logo blog

Cara Membuat Widget Artikel Terbaru Di Blogger

Cara Membuat Widget Artikel Terbaru Di Blogger
Cara Membuat Widget Artikel Terbaru Di Blogger

Tutorial Cara Memasang Widget Artikel Terbaru / Recent Post Di Blogger

Tutorial Membuat Widget Recent Post Atau Artikel Terbaru Di Sidebar Blogger. Tutorial Kali Ini Mas Tamvan akan berbagi sebuah widget blogger untuk menampilkan artikel terbaru yang ada di blog kalian...

Mungkin sudah banyak yang share artikel tentnag cara membuat recent post ini d blog-blog terkenal :3 . Tapi di sini saya membuat tampilannya berbeda, tampilannya mirip dengan Widget Recent Post by Label di blog saya.

Nah buat kalian yang ingin memasang widget artikel terbaru ini silahkan ikuti tutorial dibawh ini :)

Memasang Widget New Post di Blog

  • Login ke blogger.com
  • Setelah login pilih menu Tataletak, Terus Tambahkan Widget, Cari HTML/Javascript, contoh lihat gambar

  • Gambar Tataletak Widget Html / Javascript
  • Setelah Ketemu, Klik Tanda Plus Lalu Masukan Script Widget Artikel Terbaru Dibawh ini kedalamnya
  • 
    <script type="text/javascript">
    //<![CDATA[
    eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('J.19=B(){6 a=B(a){6 b=a||{},c=b.1a||"",d=b.1b||5,e=b.1c||"#1d",f=b.1e||1f,g=b.1g||1h,h=b.1i||"1j",i=b.1k||"P",j=b.1l||"1m",k=b.1n||"Q P",l=b.1o||["1p","1q","1r","1s","1t","1u","1v","1w","1x","1y","1z","1A"],m=b.1B||" 1C:1D/1E;1F,1G=";$(e).1H(h);6 n=c;""===c&&(n=J.R.1I+"//"+J.R.1J),$.1K({T:n+"/1L/1M/1N?U=1O-E-1P&1Q=V&1R-1S="+d,W:"1T",1U:"1V",1W:B(a){6 b,c,d,n,o,p,q,r,s,t,u,v="",w=a.1X.1Y;K(1Z 0!==w){v="<X 3=\'20\'>";L(6 x=0;x<w.F;x++){L(6 y=0;y<w[x].A.F;y++)K("21"==w[x].A[y].Y){b=w[x].A[y].M;Z}L(6 z=0;z<w[x].A.F;z++)K("22"==w[x].A[z].Y&&"23/G"==w[x].A[z].W){d=w[x].A[z].C.24(" ")[0];Z}o="11"E w[x]?w[x].11.$t:"12"E w[x]?w[x].12.$t:"",p="13$14"E w[x]?w[x].13$14.T.15(/\\/s[0-9]+\\-c/g,"/s"+f):m,n=0===d?\' <2 3="N">\'+k+"</2>":1===d?\' <2 3="N">\'+d+" "+j+"</2>":\' <2 3="N">\'+d+" "+i+"</2>",o=o.15(/<\\S[^>]*>/g,""),o.F>g&&(o=o.D(0,g)+"..."),c=w[x].C.$t,q=w[x].V.$t.D(0,10),r=q.D(0,4),s=q.D(5,7),t=q.D(8,10),u=l[25(s,10)-1],v+=\'<16 3="26" ><H 3="27"><a C="\'+c+\'" M="\'+b+\'" 17="18"><28 C="\'+c+\'" U="\'+c+\'"29="\'+p+\'"/></a></H><I 3="2a"><a C="\'+c+\'" M="\'+b+\'" 17="18">\'+c+\'</a></I><H 3="2b"><2 3="2c"><2 3="2d">\'+t+\'</2> <2 3="2e">\'+u+\'</2> <2 3="2f">\'+r+"</2></2>"+n+"</H><p>"+o+"</p></16>"}v+="</X>",$(e).G(v).O(h)}2g $(e).G("<2>Q 2h!</2>").O(h)},2i:B(){$(e).G("<I>2j 2k 2l!</I>").O(h)}})};2m B(b){a(b)}}();',62,147,'||span|class|||var||||||||||||||||||||||||||||||link|function|title|substring|in|length|html|div|strong|window|if|for|href|komen|removeClass|Comments|No|location||url|alt|published|type|ul|rel|break||content|summary|media|thumbnail|replace|li|target|_blank|new_post|url_blog|numberofposts|id_contain|isina|imagesize|40|snippetsize|100|loadingClass|tungguan|commentstext|firstcmtext|Comment|NoCmtext|MonthNames|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec|pBlank|data|image|png|base64|iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABHNCSVQICAgIfAhkiAAAAA1JREFUCJljOHPmzH8ACDADZKbltQ8AAAAASUVORK5CYII|addClass|protocol|host|ajax|feeds|posts|default|json|script|orderby|max|results|get|dataType|jsonp|success|feed|entry|void|post_baru|alternate|replies|text|split|parseInt|jerona|gambar|img|src|judulna|tglncomen|date|dd|dm|dy|else|result|error|Error|Loading|Feed|return'.split('|'),0,{}))
    //]]>
    </script>
    <style type="text/css">
    #new_post{width:100%;margin:0 auto;position:relative;background:white;padding:8px;overflow:hidden;border:1px solid #f0f0f0}
    #new_post .post_baru{width:100%;padding:0;margin:0 auto;position:relative}
    #new_post .post_baru .jerona{font-size:12px;min-height:50px;margin:0 0 8px;padding:0 0 8px;border-bottom:1px dotted #f0f0f0;overflow:hidden;color:black;list-style:none}
    #new_post .post_baru .jerona .judulna a{color:#333;line-height:1.4em;font-weight:500!important}
    #new_post .post_baru .jerona p{font-size:12px;line-height:1.4em;font-weight:400;color:#333}
    .date,.komen{display:inline-block;margin-right:8px}
    .date:before{content:"\f073";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px}
    .komen:before{content:"\f086";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px}
    #new_post .post_baru .jerona:nth-child(1) .gambar{width:100%;max-width:300px;max-height:250px;padding:0;margin:0 auto;position:relative;overflow:hidden}
    #new_post .post_baru .jerona:nth-child(1) .gambar img{width:100%;padding:0;margin:0 auto;position:relative}
    #new_post .post_baru .jerona:nth-child(1) .judulna{display:block;width:100%;text-align:center;font-size:20px;margin:0 0 5px}
    #new_post .post_baru .jerona:nth-child(1) .tglncomen{background:transparent;display:block;font-size:11px;font-weight:bold;color:#8D8D8D;text-transform:uppercase;text-align:center}
    #new_post .post_baru .jerona:nth-child(n+2) .gambar{max-width:60px;max-height:60px;padding:0;margin:3px 8px 0 0;overflow:hidden;float:left;clear:both}
    #new_post .post_baru .jerona:nth-child(n+2) .gambar img{width:60px;height:60px}
    #new_post .post_baru .jerona:nth-child(n+2) .judulna{display:block;width:100%;font-size:15px;margin:0 0 5px}
    #new_post .post_baru .jerona:nth-child(n+2) p{width:0;height:0;font-size:0;overflow:hidden;display:block;position:relative}
    </style>
    <div id="new_post"></div>
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function() {
      new_post({
        numberofposts: 5,
        id_contain: "#new_post",
        commentstext: "Comments",
        imagesize: 300,
        snippetsize: 100
      });
    });
    //]]>
    </script>
    
    numberofposts: 5, Jumlah Post Yang Akan Ditampilkan
    imagesize: 300, Ukuran Gambar + Resolusi Gambar.
    snippetsize: 100 Jumlah Deskripsi Yang Akan Ditampilkan.
  • Nah mungkin cuma itu pengaturannya
  • Kalo sudah, tinggal save widgetnya dan lihat hasilnya, Done
Cukup sekian dan terima kasih, semoga artikel tentang cara memasang widget artikel terbaru di blogger ini bermanfaat ya :)

Apabila ada yang tidak dimengerti, silahkan bertanya di kolom komentar :)

Membuat Slider Random Post Responsive

Membuat Slider Random Post Responsive
Membuat Slider Random Post Responsive

Tutorial Cara Memasang Slider Random Post Di Homepage Blogger Responsive

Cara Membuat Slider Random Post Di blogger Responsive Dan Keren Seo Friendly. Slider recene post ini otomatis akan menampilkan beberapa artikel di blog kalian secara acak. Mungkin sudah banyak yang share tentang artikel Cara Membuat Resposive Recent Post Slider Di Blogger ini, tapi tampilannya yang berbeda.

Pada tutorial di blog mas tamvan ini, kita akan memasang slider dengan tampilan yang terbaru, seperti dari template yang di share oleh Arlina Design, hanya tampilannya yang mirip, isinya berbeda :3

Bagi kalian yang ingin melihat tampilan dari slider random post ini, bisa liat di blog demo berikut..

Demo Slider Random Post Responsive Blogger


Nah sekarang kita lanjut ke tutorial cara pemasangan slired post ini di blog..

cara membuat slider otomatis di blog Responsive

  • harus sudah login ke blogger.com
  • kalo sudah login masuk ke tab Template, Edit HTML
  • , lalu cari kode </head>
  • Kalo sudah ketemu, masukan css dibawah ini tepat diatasnya
  • 
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <style type='text/css'>
    .layout-content{position:relative;overflow:hidden;padding:0 20px;margin:0 auto}
    #random-post-container{width:100%;position:relative;max-width:901px;background:#222;padding:2px;max-height:381px;height:100%;border-radius:3px;overflow:hidden;margin:8px auto}
    #featured .feat-column1{float:left;width:66%;height:379px;box-sizing:border-box}
    .bungkus-related{padding:0;margin:0;position:relative}
    ul.bungkus-related .content{float:left;width:60%;height:100%;box-sizing:border-box;overflow:hidden;position:relative}
    ul.bungkus-related li.content:after{content:no-close-quote;position:absolute;left:0;bottom:0;width:100%;height:150px;background:url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACXCAYAAADUKjHXAAAABHNCSVQICAgIfAhkiAAAAC1JREFUKJFjYIACRibyCSbyuGgsYiXwixErSzuCeXAopiJBejiTHquUJCTSCAApNwIpR17mugAAAABJRU5ErkJggg==) repeat-x;opacity:.5;background-size:100% 100%;overflow:hidden}
    ul.bungkus-related .random-grup{float:right;width:40%;height:100%;background:#222;padding:12px;box-sizing:border-box;position:relative;overflow-y:hidden;max-height:381px}
    ul.bungkus-related .random-grup:hover{overflow-y:auto}
    ul.bungkus-related .content{float:left;width:60%;max-height:381px;box-sizing:border-box;overflow:hidden;position:relative;height:100%}
    ul.bungkus-related .content .gambar img{width:100%;height:381px}
    ul.bungkus-related .content .tulisan{position:absolute;left:0;bottom:0;width:100%;padding:15px;z-index:2;box-sizing:border-box;font-size:20px;color:white;line-height:1.4em}
    ul.bungkus-related .content .tulisan a{color:white;font-weight:700;opacity:0.9}
    ul.bungkus-related .content .tulisan .random-desk{font-size:15px}
    ul.bungkus-related .content .post-tag{position:absolute;top:15px;left:15px;background-color:#299680;color:#fff;font-weight:400;z-index:2;height:22px;line-height:22px;padding:0 8px;font-size:12px}
    ul.bungkus-related .content .post-tag a{color:white}
    ul.bungkus-related .content .post-tag a:nth-child(n+2),ul.bungkus-related .random-grup .content .post-tag{display:none}
    ul.bungkus-related .random-grup .content{display:block;width:100%;float:right;margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid #333;height:auto;position:relative}
    ul.bungkus-related .random-grup li.content:after{content:none}
    ul.bungkus-related .random-grup .content .gambar{width:30%;height:70px;position:absolute;overflow:hidden;left:0;top:-9px;bottom:0;margin:auto;border:3px solid rgba(255,255,255,0.79);border-radius:3px}
    ul.bungkus-related .random-grup .content .gambar img{width:100%;height:100%;display:table-cell;vertical-align:middle;overflow:hidden}
    ul.bungkus-related .random-grup .content .tulisan{display:table-cell;padding-right:5px;position:relative;float:right;margin:0;padding-top:0;font-size:14px;width:69%}
    ul.bungkus-related .random-grup .content .random-desk{font-size:10px}
    @media screen and (max-width:500px){#random-post-container{overflow:auto}ul.bungkus-related .content{width:100%;float:none}ul.bungkus-related .content .gambar img{height:100%}ul.bungkus-related .random-grup{width:100%;float:none;overflow:hidden!important}}
    </style>
    </b:if>
    
  • Lanjut, sekarang kalian cari kode </body>
  • Setelah ketemu masukan script dibawah ini tepat diatasnya.
  • 
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
      <script type='text/javascript'>
    //<![CDATA[
    // Feed configuration
    var homePage = 'https://mastamvan.blogspot.com', //ganti link mastamvan dengan link blog kalian
     maxResults = 5, //Ganti angka 5 lima untuk mengatur jumlah artikel yang akan ditampilkan
     summaryLength = 45, // udah segini aja cukup
     noImageUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAIAAADajyQQAAAAA3NCSVQICAjb4U/gAAAAbUlEQVRoge3PAQ0AIRDAsOeNn3VUEDLSKtjWzHwv+m8HnGKsxliNsRpjNcZqjNUYqzFWY6zGWI2xGmM1xmqM1RirMVZjrMZYjbEaYzXGaozVGKsxVmOsxliNsRpjNcZqjNUYqzFWY6zGWI2xmg0/igINB8FclAAAAABJRU5ErkJggg==',
     containerId = 'random-post-container';
    
    eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('8 O(t,e){w k.P(k.6()*(e-t+1))+t}8 Q(t){7 e,a,s=t.f;18(0===s)w!1;j(;--s;)e=k.P(k.6()*(s+1)),a=t[s],t[s]=t[e],t[e]=a;w t}8 R(t){7 e=O(1,t.x.19$1a.$t-y);z.A&&z.A.S&&A.S("1b 1c B x T 1d "+e+" 1e "+(e+y)),C(D+"/U/V/p?E=W-q-F&1f=1g&T-1h="+e+"&G-H="+y+"&X=Y")}8 Y(t){j(7 e,a,s,n=I.1i(1j),r=Q(t.x.1k),l="<J 2=\'1l-1m\'>",o=0,i=r.f;i>o;o++){a="p"q r[o]?r[o].p.$t.Z(/<.*?>/g,"").1n(0,1o)+"&1p;":"",s="10$11"q r[o]?r[o].10$11.1q.Z(/\\/s[0-9]+(-c)?/,"/1r"):1s;j(7 d=0,m=r[o].K.f;m>d;d++)e="1t"==r[o].K[d].12?r[o].K[d].L:"#";l+="<M 2=\'1u\'>",l+=\'<b 2="1v" ><1w 2="6-1x" 13="\'+s+\'" 3="\'+r[o].3.$t+\'" E="\'+r[o].3.$t+\'" 1y="14" 1z="14"></b>\',l+=\'<b 2="1A"><a 3="\'+r[o].3.$t+\'" 2="6-3" L="\'+e+\'">\'+r[o].3.$t+"</a><1B>",l+=\'<v 2="6-1C">\'+a+"</v></b>",z.1D=8(){j(7 t=$("#6-B-1E J M"),e=1;e<t.f;e+=4)h=e+1,t.1F(e,e+4).1G("<b 1H=\'15"+h+"\' 2=\'6-15\'></b>")},l+="<16 2=\'B-17\'>";j(7 c=r[o].1I,u=[],h=0,g=c.f;g>h;++h)u.1J(\'<a 3="\'+c[h].N+\'" L="\'+D+"/1K/1L/"+1M(c[h].N)+\'?G-H=5" 12="17">\'+c[h].N+"</a>");l+=u.1N(" "),l+="</16>",l+=\'<v 2="1O"></v></M>\'}n.1P=l+"</J>"}8 C(t){7 e=I.1Q("F");e.13=t,I.1R("1S")[0].1T(e)}C(D+"/U/V/p?E=W-q-F&G-H=0&X=R");',62,118,'||class|title|||random|var|function|||div||||length||||for|Math|||||summary|in|||||span|return|feed|maxResults|window|console|post|add_script|homePage|alt|script|max|results|document|ul|link|href|li|term|getRandomInt|floor|shuffleArray|createRandomPostsStartIndex|log|start|feeds|posts|json|callback|randomPosts|replace|media|thumbnail|rel|src|72|grup|small|tag|if|openSearch|totalResults|Get|the|from|until|orderby|updated|index|getElementById|containerId|entry|bungkus|related|substring|summaryLength|hellip|url|s600|noImageUrl|alternate|content|gambar|img|thub|width|height|tulisan|br|desk|onload|container|slice|wrapAll|id|category|push|search|label|encodeURIComponent|join|clear|innerHTML|createElement|getElementsByTagName|head|appendChild'.split('|'),0,{}))
    //]]>
    </script>
    </b:if>
    
    ganti Link Ini https://mastamvan.blogspot.com dengan link blog kalian.
  • Langkah terakhir kita tinggal pasang kode pemanggilnya..
  • kalian bisa pasang langsung di edit HTML / pasang di tataletak agar tampilannya bisa disesuaikan
  • Tapi pada tutorial kali ini sebagai contoh kita pasang dibawah kode <body>
  • Silahkan cari kode <body>, kalo ga ada coba carinya seperti ini <body
  • Jika sudah ketemu, masukan html dibawah ini tepat dibawah kode tadi...
  • 
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <div class='layout-content'>
    <div id='random-post-container'>Memuat</div>
    </div>
    </b:if>
    
  • Nah sekarang cara pemasangannya sudah selesai, tinggal di cek dan lihat hasilnya..
  • Okeh, mudah kan, cukup sampai di sini n Selesai

Cukup sekian dan terima kasih, semoga artikel tentang Tutorial cara memasnag widget Slider Otomatis Recent Post ini bermanfaat..

Apabila ada yang tidak dimengerti, silahkan tanya admin, insya allah bisa d bantu :0

Membuat Search Box PopUp Full Screen Responsive

Membuat Search Box PopUp Full Screen Responsive
pop-up-search-box-responsive

Pure css Search Box Pop Up Reesponsive

Cara Membuat Kotak Pencarian di blog menjadi pop up full screen responsive. Tutorial kali ini saya akan berbagi cara untuk mendesain tampilan search box menjadi popup..

Bagi kalian yang ingin mengganti kolom pencarian blog kalian dengan tampilan yang berbeda, bisa mencoba search box yang akan di share pada tutorial ini.

Jangan lupa untuk membaca artikel lainnya yang sudah di share di blog mas tamvan ini ya gan :)



Buat kalian yang igin melihat tampilannya, bisa kunjungi link berikut..

Demo Search Box Pop Up

Lanjut saja kita ke tahap pemasangan search box popup responsive pure css ini ya gan :3

Pure CSS PopUp Search Box Responsive

  • Seperti biasa, login terlebih dahulu ke blogger.com
  • Setelah login masuk ke tab Template, Edit HTML Lalu cari kode </head>
  • Kalo sudah ketemu, masukan css dibawh ini tepat diatasnya.
  • 
    <style type='text/css'>
    #search-box{position:relative;width:100%;margin:0}
    #search-form{height:40px;border:1px solid #999;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-color:#fff;overflow:hidden}
    .search-form{margin:0;padding:0}
    #search-text{font-size:14px;color:#ddd;border-width:0;background:transparent}
    #search-box input[type="text"]{width:96%;padding:11px 0 12px 1em;color:#333;outline:none}
    #search-button{position:absolute;top:0;right:0;height:42px;width:80px;font-size:14px;color:#fff;text-align:center;line-height:42px;border-width:0;background-color:#2EB0EC;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0;cursor:pointer}
    #popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;z-index:9999999}
    #popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8}
    .search-form-label,.search-text{position:absolute;left:0}
    .search-form-label{bottom:100%;width:100%;display:block;color:#fff;font-size:40px;font-weight:100}
    .search-text{top:46%;width:50%;right:0;margin:20px auto 0;background:0 0;border:none;border-bottom:1px dashed #ddd;font-size:60px;font-size:8vw;color:#fff;text-align:center;outline:0;position:fixed}
    #search-form:after{content:"\f002";font-family:FontAwesome}
    .keluar{height:100vh;width:100%;position:absolute;top:0;left:0;bottom:0;right:0;background:transparent;border:0}
    </style>
    
  • Kalo sudah Save Template, sekarang kita akan memasng search boxnya, kalian bisa pasang dimana saja, ntah itu digabungin dengan menu bar, sebelah header atau di widget sidebar
  • Pada tutorial kali ini kita pasang saja di widget sidebar, agar mudah..
  • Silahkan masuk ke Tataletak, lalu Tambahkan gadget atau widget , Setelah itu cari HTML/Javascript

  • Membuat Search Box PopUp Full Screen Responsive
  • Lalu masukan html dibawah ini ke dalam kotak yang sudah tersedia
  • 
    <div id="search-box">
      <form action="/search" id="search-form" method="get" target="_top">
        <input placeholder="Search Here" onclick="document.getElementById(&#39;popup_searchBox&#39;).style.display = &#39;block&#39;;" id="search-text" name="q" placeholder="" type="text" />
      </form>
    </div>
    <div id="popup_searchBox" style="display:none;">
      <button class='keluar' onclick="document.getElementById('popup_searchBox').style.display = 'none';">Close</button>
      <div id="popup_searchBox_Data">
        <!-- Search Box -->
        <div class="search-form-wrapper" style="display: block;">
          <form action="/search" class="search-form" method="get">
            <input class="search-text" placeholder="Search Here" name="q" type="text" value="">
          </form>
        </div>
        <!-- Search Box -->
      </div>
    </div>
    
  • Kalo sudah, tinggal save widget dan lihat hasilnya :).

Cukup sekian dan terima kasih, semoga artikel tentnag Cara Membuat Search Box Popup di blogger ini bermanfaat ya :)

Cara Mudah Membuat Tabel Di Postingan Blog Dengan Tool

Cara Mudah Membuat Tabel Di Postingan Blog Dengan Tool
Cara Membuat Tabel Responsive di Dalam Postingan Blog

Cara Mudah Membuat Tabel Responsive di Dalam Postingan Blog Dengan Tools Online

Cara Mudah Membuat Tabel Responsive Di Blog Dengan Tool Online Dan Mendapatkan Kodenya, Css Plus Html. Kali ini saya akan berbagi sebuah tools untuk membuat sebuah tabel dan mendapatkan kode css, html plus isinya yang nanti akan dipasang pada postingan blog..

Bagi kalian yang tidak ingin ribet untuk membuat tabel di blog, seperti menggunakan ms excel, atau membuat tabel secara manual dengan kode htmlnya maka gunakan tools ini.

Hampir sama seperti ms excel, kalian tinggal memasukan text yang ingin dijadikan tabel pada kolom yang sudah disendiakan, dan tentunya kalian bisa merubah ukuran, warna tataletak dari tabel tersebut..

Tapi ms excel digunakan secara offline sedangkan tool ini online, sebetulnya sih bisa d gunakan secara offline juga :3

Nah bagi kalian yang ingin mencoba membuat tabel secara otomatis dan mendapatkan kodenya bisa gunakan tool pada blog berikut ini

Tools Online Untuk Memudahkan Membuat Table Di Blogger


Tool Membuat Tabel Online


Nah dengan tool itu kalian dapat dengan mudah membuat tabel untuk dipasang pada blog, karena pada tools itu kalian akan diberika kode yang sudah tingal pasang di artikel..

jangan lupa untuk mampir ke tutorial lainnya ya gan :)



Cukup sekian dan terima kasih, semoga artikel tentang Cara Mudah Membuat Tabel Responsive Di Blog Dengan Tools Online Secara Otomatis Langsung Jadi ini bermanfaat ya gan :)

Membuat Header Mengecil Ketika Di Scroll

Membuat Header Mengecil Ketika Di Scroll
menu-header-fixed-resize

Cara Membuat Menu Navigation Bar Dan Header Melayang Plus Mengecil Saat di Scroll

Cara membuat menu dan header blog melayang setelah discroll (sticky menu) dengan efect menyusut / mengecil ukuran heightnya. Tutorial kali ini kita akan membuat logo header atau judul blog dan menu navigasi menjadi fixed, melayang dan mengecil setelah di scroll ke bawah.

Bagi kalian yang ingin merubah atau menambah sebuah header dan menu bar di blognya dengan efect sticky / Posisi menu dan header Tetap terlihat dengan efect awal besar dan setelah di scroll nanti akan mengecil plus Responsive ketika di buka pada device yang lebih kecil..

Nah barang kali kalian ingin melihat tampilan dari Header Resize On Scroll with Animations ini, bisa kunjungi blog demo berikut ... Demo Tampilan Header Resize on Scroll

Sekarang kita lanjut ke tutorial cara membuat header fixed dengan efect resize pada blognya..

cara membuat menu melayang bersama header


  • Tutorial Pertama kita akan membuat / menambah menu bar dan header, bukan mengedit yang sudah ada pada blog kalian. #lanjut
  • Seperti Tutorial Sebelumnya, Login dulu ke blogger.com
  • Setelah Login cari kode </head>
  • Setelah ketemu, masukan kode berikut diatasnya
  • 
    <style type='text/css'>
      header1 {
       width: 100%;
       height: 150px;
       overflow: hidden;
       position: fixed;
       top: 0;
       left: 0;
       z-index: 999;
       background-color: #0683c9;
       -webkit-transition: height 0.3s;
          -moz-transition: height 0.3s;
          -ms-transition: height 0.3s;
          -o-transition: height 0.3s;
          transition: height 0.3s;
      }
      
      header1 h1#logo {
       font-family: "Oswald", sans-serif;
       font-size: 60px;
       font-weight: 400;
       line-height: 150px;
       display: inline-block;
       float: left;
       height: 150px;
        margin: 0;
        padding: 0;
       color: #fff;
       -webkit-transition: all 0.3s;
       -moz-transition: all 0.3s;
       -ms-transition: all 0.3s;
       -o-transition: all 0.3s;
       transition: all 0.3s;
      }
      
      header1 nav1 {
        display: inline-block;
        float: right;
      }
      
      header1 nav1 a {
      line-height: 150px;
      margin-left: 20px;
      color: #9fdbfc;
      font-weight: 700;
      font-size: 18px;
      text-decoration: none;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
      }
      
      /* smaller nav1 */
      
      header1 nav1 a:hover {
        color: #ffffff;
      }
      
      header1.smaller {
          height: 75px;
      }
      header1.smaller h1#logo {
          width: 150px;
          height: 75px;
          line-height: 75px;
          font-size: 30px;
      }
      header1.smaller nav1 a {
          line-height: 75px;
      }
      
      
      @media all and (max-width: 660px) {
          header1 h1#logo {
              display: block;
              float: none;
              margin: 0 auto;
              height: 100px;
              line-height: 100px;
              text-align: center;
          }
          header1 nav1 {
              display: block;
              float: none;
              height: 50px;
              text-align: center;
              margin: 0 auto;
          }
          header1 nav1 a {
              line-height: 50px;
              margin: 0 10px;
          }
          header1.smaller {
              height: 75px;
          }
          header1.smaller h1#logo {
              height: 40px;
              line-height: 40px;
              font-size: 30px;
          }
          header1.smaller nav1 {
              height: 35px;
          }
          header1.smaller nav1 a {
              line-height: 35px;
          }
      }
    </style>
    
    
    <script type='text/javascript'>
        function init() {
            window.addEventListener('scroll', function(e){
              var distanceY = window.pageYOffset || document.documentElement.scrollTop,
                shrinkOn = 200,
                header1 = document.querySelector("header1");
              if ((distanceY) > (shrinkOn)) {
                $(header1).addClass("smaller");
              } else { 
                if ($(header1).hasClass("smaller")) {
                  $(header1).removeClass("smaller");
                }
              }
          });
        }
        init();
      </script>
    
  • Lalu sekarang kita akan memasang Htmlnya, kalian bisa pasang dibawah kode <body>
  • 
        <header1 class='site-header1'>
          <div class='container clearfix'>
            <h1 id='logo'>
                    LOGO
                </h1>
            <nav1>
              <a href=''>Lorem</a>
              <a href=''>Ipsum</a>
              <a href=''>Dolor</a>
            </nav1>
          </div>
        </header1>
    
  • Nah untuk tutorial ini sudah selesai, kalian tinggal save dan lihat hasilnya..
Kalo pas di scroll header dan menunya tidak mengecil silahkan tambahkan kode dibawah ini tepat di atas </head>

<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
//]]>
</script>
  • Save template dan selesai..


Tapi jika kalian ingin merubah header yang sudah ada pada blog kalian menjadi sticky dan ketika di scroll headernya menjadi kecil..Agan harus merubah, menyesuaikan kode yang ada di script berikut dengan tag, id atau class dari header agan..

<script type='text/javascript'>
    function init() {
        window.addEventListener('scroll', function(e){
          var distanceY = window.pageYOffset || document.documentElement.scrollTop,
            shrinkOn = 200,
            header1 = document.querySelector("header1");
          if ((distanceY) > (shrinkOn)) {
            $(header1).addClass("smaller");
          } else { 
            if ($(header1).hasClass("smaller")) {
              $(header1).removeClass("smaller");
            }
          }
      });
    }
    init();
  </script>

  • Setelah disesuaikan dengan header yang sudah ada, jangan lupa mengedit css yang ada di atas sesuai dengan yang sobat mau...
  • Seperti pada css smaller di atas, sesuaikan ukurannya dengan yang kalian mau.


Mungkin itu saja untuk tutorial kali ini tentang Cara Membuat Menu Dan Header Melayang Setelah Discroll (Sticky Menu) Dan memberikan efect menyusut ini bermanfaat ya :)

Kalo tidak ada yang dimengerti pada tutorial ini, silahkan bertanya di kolom komentar :)

Memasang Hover Share Button Image Di blogger

Memasang Hover Share Button Image Di blogger
Hover Share Button Image Di blogger

Tutorial Memasang Hover Share Button Image Di blogger

Cara Memasang Tombol Share Button Ketika Image Di Sentuh Cursor (Hover). Kali ini saya akan memberika tutorial cara memasang atau menambahkan tombol share button social media pada image / gambar di postingan blog..

Mungkin kalian suka melihat ketika berkunjung ke blog orang / wordpress, ketika cursor, pointer mengarah ke gambar akan ada tombol untuk membagikan image ke sosial media dengan efect hover, ntah kalo di hp saya blm pernah liat :V

Pada tutorial yang sederhana ini saya akan memberikan efect hover sosial share button pada image di blogger.crot.cret..

Okeh lah tanpa banyak cingcong langsung saja kae tutorial cara pemasnagan social share btton hover imagenya..

Buat kalian yang ingin melihat tampilan dari sosial share button image ini bisa kunjungi blog ini Demo Hover Social Share Button Image Di blogger

Hover | Image Social Share button Overlay

  • Langkah pertama kalian harus login terlebih dahulu ke blogger.com
  • Setelah login kalian cari kode </head>
  • Setelah ketemu, masukan css dibawah ini tepat di atasnya :)
  • 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    /*Social Image Share Button*/
    span.socialclick:hover{cursor:pointer}
    div.overlay{position:absolute;top:0;left:0;opacity:0;width:100%;height:100%}
    div.overlay ul{width:100%;text-align:center;padding:0;position:relative;top:40%;bottom:50%}
    div.overlay ul li{display:inline;padding:12px;color:white}
    div.wrap div.overlay ul li:nth-child(1){background:#3B5998}
    div.wrap div.overlay ul li:nth-child(2){background:#32CBFE}
    div.wrap div.overlay ul li:nth-child(3){background:#DD4B39}
    div.wrap div.overlay ul li:nth-child(4){background:#CE2424}
    div.wrap div.overlay:hover{opacity:1;-webkit-transition:all .5s ease .15s;-moz-transition:all .5s ease .15s;-o-transition:all .5s ease .15s;-ms-transition:all .5s ease .15s;transition:all .5s ease .15s}
    div.wrap{position:relative}
    </style>
    </b:if>
    
  • Setelah di pasang, sekarang kalian cari kode </body>
  • Kalo sudah ketemu, masukan script berikut di atasnya
  • 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    /*Social Share Button Image by mas tamvan*/
    !function(a){function s(s,i){var e=i["float"]||"none",t=(i.rgba||"236,240,241,0.8",i.color||"#ffffff");s.wrap('<div class="wrap"></div>'),$wrap=s.parent(),$wrap.css("float",e),$overlay=a("<div>"),$overlay.addClass("overlay"),$overlay.css("background","transoarent"),$links=a("<ul>"),$overlay.append($links),$facebook=a("<li>"),$facebook.html('<span class="socialclick facebook-share"><i class="fa fa-lg fa-facebook"></i></span>'),$twitter=a("<li>"),$twitter.html('<span class="socialclick twitter-share"><i class="fa fa-lg fa-twitter"></span>'),$google=a("<li>"),$google.html('<span class="socialclick google-share"><i class="fa fa-lg fa-google-plus"></i></span>'),$pinterest=a("<li>"),$pinterest.html('<span class="socialclick pinterest-share"><i class="fa fa-lg fa-pinterest"></i></span>'),a("span.socialclick").css("color",t),$links.append($facebook),$links.append($twitter),$links.append($google),$links.append($pinterest),s.before($overlay)}a.fn.socialpic=function(i){var i=i||[];return a(this).each(function(){s(a(this),i)}),this}}(jQuery),$(function(){$("body").on("click","span.socialclick",function(){var a=$(this).closest("div.wrap").find("img").attr("src");$(this).hasClass("facebook-share")&&window.open("https://www.facebook.com/sharer/sharer.php?u="+a,"Share Facebook",config="height=300, width=500"),$(this).hasClass("twitter-share")&&window.open("http://twitter.com/home?status=Currently inspired by "+a,"Share Twitter",config="height=300, width=500"),$(this).hasClass("google-share")&&window.open("https://plus.google.com/share?url="+a,"Share Google +",config="height=300, width=500"),$(this).hasClass("pinterest-share")&&window.open("http://www.pinterest.com/pin/create/button/?url="+a+"&media="+a+"&description=Currently%20Inspired%20By","Share Pinterest",config="height=300, width=500")})}),$(function(){$(".post-body img").socialpic()});
    //]]>
    </script>
    </b:if>
    
  • Kalo sudah, sekarang tinggal save deh templatenya:)
  • Dan selamat sekarang social share button imagenya sudah terpasang
Kalo icon sosial medianya tidak muncul pasang font awesome di blog kalian
dan
Kalo sosial share button imagenya tidak muncul ketika cursor diarahkan ke image. coba pasang kode ini di atas kode </head>

<script type='text/javascript'>
  //<![CDATA[
       if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
       //]]>
</script>


Mungkin cukup sampai di sini postingan kali ini tentang jQuery Plugin For Image Social Share Overlay socialpic. ini, semoga bermanfaat :)
Apabila ada yang tidak dimengerti, silahkan bertanya di kolom komentar ya :)

TS Grid - Template Blogger Responsive Dan Valid HTML5

TS Grid - Template Blogger Responsive Dan Valid HTML5
ts grid template blogger responsive valid html5 fast loading

TS Grid - Template Blogger Responsive Fast Loading Seo Dan Valid HTML5

Download Template Blogger Style Grid Responsive Valid Html5 Fast Loading Dan Seo Friendly. Halo sobat kali ini saya akan berbagi sebuah template yang sangat simplae dan tentunya responsive mobile friendly.

Bagi kalian yang suka dengan tampilan blog dengan Layout style Grid Bisa di coba template yang satu ini gan :)
kalo tidak ada yg d mengerti dalam pemasangannya tinggal bertanya di kolom komentar :)
Fiturnya mungkin seperti yang ada di tabel ini gan :)
Features Availability
ResponsiveTrue Cek
SEOTrue Cek
Google Testing Tool ValidatorTrue Cek
1 Column Style HomepageTrue
2 Column Style PostinganTrue
4 Column Footer ResponsiveTrue
Google FriendlyTrue
Custom Threaded CommentTrue
Responsive Ad SlotTrue
Clean TypographyTrue
MinimalistTrue
BreadcrumbsTrue
Fixed Top NavigationTrue
Responsive Dropdown NavigationTrue
Mobile NavigationTrue
White Base Theme ColorTrue
Related PostsTrue
Search BoxTrue
Social Share ButtonTrue
Custom Subscribe Box WidgetTrue
Sitemap WidgetTrue
Multi Author BoxTrue


Nah itu fitur dari template TS Grid ini gan :)
Langsung saja bagi yang ingin mencobanya :)

Lihat Dulu Download

Alternative Link Templates TS Grid Seo Friendly Valid HTML5 Responsive adn Fast Loading
Cukup sekian dan terima kasih, semoga bermanfaat :)

Memasang Tag Label Di bawah Postingan Blog

Memasang Tag Label Di bawah Postingan Blog
membuat-hashtag-label-di-bawah-postingan

Cara Memasang hashtag Laleb Dibawah Postingan Blog

Cara Menambahkan hashtag atau daftar tag label terkait dibawah postingan blog. Hallo sobat bloger yg tamvan, kali ini saya akan share tutorial cara menambahkan tags label terkait dibawah postingan blog..

Tags di bawah postingan blog ini mungkin bisa juga disebut sebagai hashtag yang akan menampilkan daftar label apa saja yang terkait di dalam artikel tersebut..

Mungkin bisa juga disebut dengan Breadcrumb dibawah postingan blog tapi tidak menyertakan judul dari artikel tersebut, melainkan hanya menampilkan judul dari labelnya saja..

Bagi kalian yang ingin mencoba memasang Breadcrumb, hashtag atau label terkait dibawah postingan blog, bisa ikuti tutorial singkat berikut ini..

Cara Memasang hashtag, Breadcrumb atau label terkait dibawah postingan blog


  • Seperti biasa, kalian wajib masuk dulu ke blogger.com
  • Setelah login Pilih Menu Template, EditHTML, Terus Cari Kode </head>
  • Kalo sudah ketemu, kalian masukan css dibawah ini tepat diatasnya
  • 
    <style type='text/css'>
    /*Post Label*/
    .post-labels{float:left;display:block;width:100%;color:#999}
    .post-labels a{float:left;height:24px;line-height:24px;position:relative;font-size:12px;margin-left:12px;padding:0 10px;background:rgba(0,0,0,0.25);color:#fff;text-decoration:none;border-bottom-right-radius:3px;border-top-right-radius:3px}
    .post-labels a:before{content:"";float:left;position:absolute;top:0;left:-12px;width:0;height:0;border-color:transparent rgba(0,0,0,0.25) transparent transparent;border-style:solid;border-width:12px 12px 12px 0}
    .post-labels a:after{content:"";position:absolute;top:10px;left:-1px;float:left;width:4px;height:4px;border-radius:2px;background:#fff;transition:all .3s}
    .post-labels a:nth-child(1){background:#ca85ca}
    .post-labels a:nth-child(1):before{border-color:transparent #ca85ca transparent transparent}
    .post-labels a:nth-child(2){background:#e54e7e}
    .post-labels a:nth-child(2):before{border-color:transparent #e54e7e transparent transparent}
    .post-labels a:nth-child(3){background:#61c436}
    .post-labels a:nth-child(3):before{border-color:transparent #61c436 transparent transparent}
    .post-labels a:nth-child(4){background:#f4b23f}
    .post-labels a:nth-child(4):before{border-color:transparent #f4b23f transparent transparent}
    .post-labels a:nth-child(5){background:#46c49c}
    .post-labels a:nth-child(5):before{border-color:transparent #46c49c transparent transparent}
    .post-labels a:nth-child(6){background:#607ec7}
    .post-labels a:nth-child(6):before{border-color:transparent #607ec7 transparent transparent}
    .post-labels a:nth-child(7){background:#ca85ca}
    .post-labels a:nth-child(7):before{border-color:transparent #ca85ca transparent transparent}
    .post-labels a:nth-child(8){background:#e54e7e}
    .post-labels a:nth-child(8):before{border-color:transparent #e54e7e transparent transparent}
    .post-labels a:nth-child(9){background:#61c436}
    .post-labels a:nth-child(9):before{border-color:transparent #61c436 transparent transparent}
    .post-labels a:nth-child(10){background:#f4b23f}
    .post-labels a:nth-child(10):before{border-color:transparent #f4b23f transparent transparent}
    </style>
    
  • Kalo sudah, selanjutnya kalian cari kode </article>
  • Kalo sudah ketemu, masukan HTML dibawah ini tepat diatasnya
  • 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
     <span class='post-labels'>
          <div id='maia-signature'/>
            <b:if cond='data:post.labels'>
              <span style='float: left;'>Tags: </span><b:loop values='data:post.labels' var='label'>
                <a expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' rel='tag nofollow'><data:label.name/></a>
              </b:loop>
            </b:if>
          </span>
    </b:if>
    
    Jika Tags labelnya tidak sesuai misal tampil di bawah related post, kalian tinggal pindahkan html di atas sesuai keinginan kalian..
  • Kalo sudah sesuai, tinggal save template kalian n lihat hasilnya :)

Cukup sekian dan terima kasih, semoga artikel tentang Cara Memasang Hashtag / Tags Label dibawah postingan blog ini bermanfaat ya :)

Apabila ada yang mau ditanyakan, silahkan bertanya dikolom komentar :)