Cara Membuat Auto Read More Otomatis (Thumbnail)

Selamat malem sobat blogger, apa kabar nih ? semoga sehat semua ya . Kali ini saya akan memberikan sedikit tutorial, tapi ini tutorial apa tips ya ?, tapi yaudah lah tutorial ato tips yang penting saya mau share dulu tentang artikel ini.

Sobat pasti pernah denger tentang auto read more dalam dunia blogger, kali ini saya akan berbagi sedikit tentang "Cara membuat auto read more otomatis (thumbnail)". Auto read more itu kata dibawah artikel blog yang terpotong dengan kata "Read More" atau "Baca Selengkapnya". Auto read more juga membuat menarik blog dan juga dianngap dapat memperingan loading blog. Dan juga untuk memotong artikel blog, sehingga waktu dipublikasikan tidak terlalu panjang .


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 tepat di atas kode berwarna merah

<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 #E37F52; border-radius: 4px; color: #FFFFFF !important; font-size: 10pt; font-weight: 700; line-height: 1; padding: 1px 3px 1px; text-transform: uppercase; }

Ubah kode warna #E37F52 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