-->

Cara Mengganti Tampilan Homepage Static Menjadi Grid Pada Blogger - Pada kesempatan kali ini saya akan membagikan salah satu tips mengganti tampilan homepage static menjadi grid, masih bingung tampilan homepage static dan grid itu seperti apa. Simak penjelasannya dibawah ini.

Tampilan Homepage Static atau bisa saya sebut seperti satu kolom kebawah yang artinya artikel yang anda post akan secara otomatis menempati list tersebut hingga yang paling bawah.

Tampilan homepage grid atau tampilan kolom dan baris yang sedikit berbeda dengan type static. Kalo di static tampilan hanya 1 kolom kebawah sedangkan grid tampilan homepage bisa berjumlah minimal 2 kolom kebawah.


    Sekarang sudah paham bukan, jika belum baca berulang-ulang sampai paham.

    Tertarik untuk mencobanya! Simak tutorial dibawah ini.

    Merubah Tampilan Stati menjadi Grid

    1. Login ke akun Blogger anda.
    2. Masuk ke blog yang ingin anda ubah, kemudian klik Template => Edit HTML
    3. Cari kode </head> , lalu letakkan script di bawah ini tepat diatasnya.

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <script type='text/javascript'>
    var thumbnail_mode = &quot;yes&quot; ;
    summary_noimg = 350;
    summary_img = 150;
    img_thumb_height = 120;
    img_thumb_width = 210;
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}strx=s.join("")}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...'}function createSummaryAndThumb(pID){var div=document.getElementById(pID);var imgtag="";var img=div.getElementsByTagName("img");var summ=summary_noimg;if(img.length>=1){imgtag='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';summ=summary_img}var summary=imgtag+'<div>'+removeHtmlTag(div.innerHTML,summ)+'</div>';div.innerHTML=summary}
    //]]>
    </script>
    <style type='text/css'>
    .post {width:40%;height:200px;float:left;margin:10px;position:relative;display: block;}
    .post h3{height:32px;margin-top:60px; margin-bottom:-15px;padding:5px;font-family: Helvetica, Arial;line-height:1em;font-weight: bold;  font-size:16px;letter-spacing:-0.5px;}
    .post-body {padding:5px;height:241.5px;font-family: Helvetica, Arial; font-size: 13px; margin:20px;}
    .post-footer {margin-top:30px;height:20px;}
    .post-labels {display:none;}
    .mobile .post {width:auto;height:auto;}
    .mobile .post-body {height:auto;}
    .more {float:right;background:#52e052;color:#000!important;padding:5px 10px;text-decoration:none!important;transition: all 1s ease;}
    .more:hover {background:#ff0000;color:#fff!important;text-decoration:none!important;}
    </style>
    </b:if>
    </b:if>

    4. Klik Simpan Template dan lihat hasilnya.

    Catatan Penting:

    • 350 merupakan jumlah karakter yang akan ditampilkan jika sebuah posting tidak memiliki gambar.
    • 150 merupakan jumlah karakter yang akan ditampilkan jika sebuah posting memiliki gambar.
    • 120 nilai untuk mengatur tinggi gambar.
    • 210 nilai untuk mengatur lebar gambar.
    • 40% merupakan ketinggian kotak posting pada homepage.
    • 200 merupakan lebar kotak posting pada homepage.

    Angka diatas bisa Anda ganti sesuai selera dan keinginan Anda sendiri.


    Memasang readmore pada blog tampilan grid

    Jika Anda menginginkan adanya Readmore di tampilan grid anda, silakan baca terus!.
    1. Cari kode <data:post.body/>, biasanya ada 1-4 kode seperti itu
    2. Ganti kode <data:post.body/> yang ke 2 dengan script di bawah ini:
      <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><b:else/><b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/><b:else/><div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div><script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); </script><a class='more' expr:href='data:post.url'>Read More</a></b:if></b:if>
      Catatan :
      Tulisan Read More dapat Anda ganti sesuai keinginan Anda, misalnya dengan tulisan Baca Selengkapnya.
    3. Klik Simpan Template.

    Catatan Penting: Mungkin pada beberapa template, pemasangan kode tampilan grid ini bisa terjadi error, salah satunya tombol berada, homenewer postolder post hilang atau tidak tampil.
    Cara menyelesaikannya cukup dengan mencari kode <b:includable id='nextprev'> pada bagian Edit HTML Template anda, lalu simpan kode ini <div style='clear:both;'/>  tepat dibawahnya.

    Semoga artikel kali ini dapat bermanfaat bagi anda dan terima kasih telah membaca tulisan saya.