Cara Membuat Auto Read More Otomatis (Thumbnail)

Selamat siang sobat blogger, apa kabar nih ? semua sehat semua ya. Artikel saya ini akan membahas tentang cara membuat auto read more. Sobat blogger pasti denger auto read more atau pernah liat tulisan read more di dunia blogger. Artikel ini pastinya udah nggak update banget, terutama buat para master blog,hahahaha.



Nah langsung aja sobat simak langkah-langkahnya dibawah ini.

1. Login ke blogger dulu
2. Pilih template
3. Klik edit HTML
4. Klik semua tanda panah warna hitam tebal
5. Cari kode </head> (tekan dulu CTRL+F dan copas kode warna merah tersebut di dalamnya lalu tekan Enter
6. Letakkan kode dibawah ini tepat di atas kode </head>

<script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 250; summary_img = 250; img_thumb_height = 120; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ /****************************************** Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo visit http://en.vietwebguide.com to get more cool hacks ********************************************/ 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>

Keterangan :
var thumbnail_mode = "float";  memutuskan apakah letak thumbnail berada di kiri (float) atau jika tidak silahkan ganti dengan (no-float)

summary_noimg = 250; (berapa banyak karakter yang ingin ditampilkan di posting tanpa gambar / thumbnail)

summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

img_thumb_height = 120; (tinggi thumbnail dalam ukuran pixel)

img_thumb_width = 120; (lebar thumbnail dalam ukuran pixel)




Selanjutnya, cari kode <data:post.body/> hapus kode tersebut dan ganti dengan kode dibawah ini

<b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE >>></a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></b:if>

Dan, agar tambah menarik tampilan auto read more sobat tambahkan kode berikut ini tepat di atas kode ]]></b:skin>

.rmlink a { background: none repeat scroll 0 0 #b2500e; border-radius: 4px; color: #b2500e !important; font-size: 10pt; font-weight: 700; line-height: 1; padding: 1px 3px 1px; text-transform: uppercase; }

Ubah kode warna #b2500e sesuai keinginan sobat.



Jika berhasil pemasangan auto read more sobat, tampilannya akan seperti gambar di atas. Sekian, sedikit artikel "Cara membuat auto read more otomatis (thumbnail)", semoga bermanfaat untuk blog sobat.

Terima kasih, salam blogger.


Sumber : Hengki Kristianto