Cara Membuat Grid Mode Pada Auto Readmore di HomePage

Biasanya ketika kita menambahkan sebuah Auto Readmore, maka Auto Readmore tersebut hanya menampilkan List saja. Anda bisa melihat pada gambar diatas 1. Mode Biasa. Perlu diketahui juga bahwa pada Blogger secara (Default) pada Post HomePage Menggunakan Structur List Post. Untung saja Blogger bersifat Open Source yaitu anda bebas mengedit dan menambahkan elemen. Sekarang yang akan dibahas kali ini adalah : Cara Membuat Grid Mode Pada Auto Readmore di HomePage dan Bagaimana agar HomePage Blog dapat menampilkan Pola Grid dan berfungsi dengan baik dan sekaligus juga kita melengkapi tombol Readmore.

Baca Juga : Template Desain MayCyber-Download (Free, No Redirect Template) 

Cara Pertama :

1. Buka Blogger Kemudian Login dengan akun anda.
2. Dashboard - Template.
3. Edit HTML.

Proses Pembuatan :

1. Temukan kode </head>
2. Copy&Paste kode berikut ini, dan Letakkan diatas 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 = 400;
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: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".
summary_noimg = 400; merupakan jumlah karakter yang akan ditampilkan jika ada sebuah post tidak memiliki gambar.
summary_img = 180; merupakan jumlah karakter yang akan ditampilkan jika sebuah post memiliki gambar, tapi hanya gambar pertama dalam struktur post yang akan digunakan sebagai thumbnail.
img_thumb_height = 130; Ketinggian thumbnail
img_thumb_width = 220; : Lebar thumbnail adalah "220".   Kedua ketinggian thumbnail dan nilai lebar dapat disesuaikan dengan nilai pilihan anda sendiri.

3. Temukan kode <data:post.body/> kode ini biasanya lebih dari satu, silakan gunakan saja yang kedua atau anda bisa mencobanya satu/persatu.
4. Copy&Paste kode berikut ini dan ganti dengan kode dibawah 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>

Keterangan : Tulisan Read More bisa anda ubah, Misalnya Baca Selengkapnya.

5. Simpan Template!

Note : Jika terjadi kesalahan seperti Tombol Home, Newer Post dan Older Post yang hilang. Cara Memperbaikinya adalah :

1. Temukan kode <b:includable id='nextprev'>
2. Copy& Paste kode dibawah ini, dan Letakkan dibawah kode <b:includable id='nextprev'>

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

Demikian Tutorial Blogger kali ini, bila terjadi kesalahan silakan jangan sungkan untuk berkomentar dibawah ini. Terakhir silakan lihat home page anda. Sekian dari saya, Semoga Bermanfaat! Thanks for Reading & Sharing : Cara Membuat Grid Mode Pada Auto Readmore di HomePage