Cara Membuat Mode Grid Pada Post Homepage Blogspot

Secara umum semua template blogger yang masih standar (default) pada post homepage menggunakan struktur list post. Walaupun sekarang sudah banyak penyedia template blogger yang gratis dengan fitur-fitur yang menarik, namun beberapa blogger terutama yang masih belajar dalam desain blog mungkin tidak menghalangi niat untuk mencari cara sendiri agar gaya template blognya memiliki tampilan grid atau bergaya galeri. Begituoun saya, saya blogger pemula browaing kanan kiri blog tetangga mencari cara untuk membuat template default blogspot bisa mena

mpilkan post grid. Tentu saja bisa, cara ini tidak luput dengan adanya fungsi jQuery. Sekarang akan saya bahas disini bagaimana agar homepage blog dapat menampilkan pola grid dan bisa berfungsi dengan baik sekaligus kita lengkapi dengan tombol auto read more. jQuery ini yang nanti akan memposisikan posting thumbnail di bagian atas dan menyelaraskan ringkasan post di bagian bawahnya dengan disertai jump break atau read more secara otomatis yang akan muncul di akhir setiap ringkasan setelah jumlah karakter tertentu. Untuk lebih detailnya, berikut sekelumit penjelasan cara 

Membuat Mode Grid Pada Post Homepage Blogspot

1. Masuk Ke Blog dan di bagian dashbord blog pilih menu Template kemudian Edit HTML.
2. Selanjutnya copy kode berikut ini, lalu pasang di atas kode </head>




<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 = 300;

summary_img = 180;

img_thumb_height = 110;

img_thumb_width = 200;

</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:44%;height:370px;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>

Keterangan: 

Jika tidak ingin menampilkan thumbnail post, ubah "yes" menjadi "no".

• Angka "300" merupakan jumlah karakter yang akan ditampilkan jika ada sebuah post tidak memiliki gambar.
• Angka "180" merupakan jumlah karakter yang akan ditampilkan jika sebuah post memiliki gambar, tapi hanya gambar pertama dalam struktur post yang akan digunakan sebagai thumbnail.
• Ketinggian thumbnail adalah "110" dan Lebar thumbnail adalah "200". Kedua ketinggian thumbnail dan nilai lebar dapat disesuaikan dengan nilai pilihan anda sendiri.

3. Kemudian cari kode <data:post.body/> kemungkinan terdapat beberapa kode, lalu replace salah satu kode tersebut dengan kode berikut ini untuk memasang auto read more. 

<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>

4. Kata "Read More" bisa diubah agar menjadi lebih menarik sesuai dengan keinginan kita atau lainnya, bisa juga mengganti read more dengan tombol. Jika dirasa sudah sesuai keinginan Anda, Simpan template.

Apabila mengalami masalah seperti tombol Home, Newer post, maupun Older post yang hilang. Caranya di perbaiki dengan masuk ke Edit HTML lagi lalu cari kode <b:includable id='nextprev'> kemudian paste kode dibawah ini di bawahnya.

<div style='clear:both;'/>

Sekian dulu cara Membuat Mode Grid Pada Post Homepage Blogspot, nanti anda bisa mengembangkannya dengan memberi background dan border atau lainnya agar lebih sesuai dengan template blog yang di gunakan.