Cara Menciptakan Grid Mode Pada Auto Readmore Di Homepage

Baca Juga

Biasanya dikala kita menambahkan sebuah Auto Readmore, maka Auto Readmore tersebut hanya menampilkan List saja. Anda sanggup 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 yakni : Cara Membuat Grid Mode Pada Auto Readmore di HomePage dan Bagaimana supaya HomePage Blog sanggup menampilkan Pola Grid dan berfungsi dengan baik dan sekaligus juga kita melengkapi tombol Readmore.

Baca Juga : Template Desain (Free, No Redirect Template) 

Cara Pertama :

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

Proses Pembuatan :

1. Temukan aba-aba </head>
2. Copy&Paste aba-aba berikut ini, dan Letakkan diatas aba-aba </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 huruf yang akan ditampilkan jikalau ada sebuah post tidak mempunyai gambar.
summary_img = 180; merupakan jumlah huruf yang akan ditampilkan jikalau sebuah post mempunyai gambar, tapi hanya gambar pertama dalam struktur post yang akan dipakai sebagai thumbnail.
img_thumb_height = 130; Ketinggian thumbnail
img_thumb_width = 220; : Lebar thumbnail yakni "220".   Kedua ketinggian thumbnail dan nilai lebar sanggup diubahsuaikan dengan nilai pilihan anda sendiri.

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

5. Simpan Template!

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

1. Temukan kode <b:includable id='nextprev'>
2. Copy& Paste aba-aba 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