Cara Mengganti Tampilan Homepage Static Menjadi Grid Pada Blog

IKUTI CARA DI BAWAH INI

1. Login ke akun Blogger
2. Klik Template > Edit HTML
3. Cari kode </head> , lalu letakkan script di bawah ini di atasnya.

<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 = 380;
summary_img = 180;
img_thumb_height = 130;
img_thumb_width = 220;
</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:45%;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

      Catatan :

• 380 adalah jumlah karakter yang akan ditampilkan jika sebuah posting tidak memiliki gambar.
• 180 adalah jumlah karakter yang akan ditampilkan jika sebuah posting memiliki gambar.
• 130 adalah tinggi gambar.
• 220 adalah lebar gambar.
• 45% adalah ketinggian kotak posting pada homepage.
• 200 adalah lebar kotak posting pada homepage.
• Angka diatas bisa Anda ganti sesuai selera dan keinginan Anda sendiri

Jika Anda menginginkan ada fitur Readmore di tampilan grid anda, Anda gunakan metode berikut,

1. Cari kode <data:post.body/>, biasanya ada 1-3 kode seperti itu
2. Copy kode dibawah ini, lalu ganti kode <data:post.body/> yang ke 2 dengan script di bawah ini:

Catatan :


• Tulisan Read More bisa Anda ganti sesuai dengan keinginan Anda, misalnya dengan Lanjutkan Membaca, Baca Selengkapnya, atau Lihat Selengkapnya.


3. Klik Simpan Template

Catatan :

Jika setelah menggunakan metode grid diatas ada kendala dengan tombol Beranda, Posting Lama, Posting Baru, atau tombol Home, Newer Post, Older Post, pada homepage blog Anda hilang, solusinya adalah cari kode <b:includable id='nextprev'> pada bagian Edit HTML, lalu simpan kode ini <div style='clear:both;'/> dibawahnya.

SELAMAT MENCOBA