Cara membuat Read More otomatis

Pada waktu yang lalu saya sudah pernah membahas mengenai cara membuat read more yang bekerja secara manual, yaitu kita harus menambahkan beberapa kode HTML setiap kali kita membuat artikel atau posting artikel.
Tapi Read More kali ini bekerja secara otomatis akan membuat ringkasan posting artikel yang akan tampil dihalaman muka atau Home pada web atau blog kita. Jadi kita tidak perlu lagi menambahkan beberapa kode HTML pada setiap artikel yang kita buat. Selain itu kelebihan lain adalah ukuran tampilan yang sama antara artikel satu dengan yang lain, sehingga konten tampak lebih rapi. Anda bisa lihat contoh read more otomatis pada halaman Home blog ini, Rapi .... kan? hehehe....
Bila anda berminat, silahkan anda ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.






4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode yang sama atau mirip dengan kode berikut :

</head>

7. Sisipkan kode dibawah ini sebelum kode </head> 

<script type='text/javascript'> summary_noimg = 450; summary_img = 280; img_thumb_height = 200; 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>

8. Kemudian cari lagi kode yang sama atau mirip dengan kode berikut :

<data:post.body/>

9. Ganti kode <data:post.body/> dengan kode dibawah ini :

<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:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVcZiWJemE3LMQqAx-bcOyDP7XE2CM6W-SrVo_ktUInTOtmGs7JQnFSxa2jcw1ySq9bIVuM_73Uhf-fL8bunmK4bEsh-wwWtSQrOAj3KXEHU2Fq_Nf3Pux5O4HXUVTWBoFNIC8Pfp6DfY/' style='border-style:none;'/></a></span></b:if>

10. Simpan Template.

Nah.... jadi deh....,
Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Related Articles :
Baca artikel lain :

Informasi Artikel :
	Judul : "Cara membuat Read More otomatis" Diulas Oleh : Noercholis | Kamis, 05 Mei 2011 | 11.03 Description : Pada waktu yang lalu saya sudah pernah membahas mengenai cara membuat read more yang bekerja secara manual, yaitu kita harus menambahkan b... Label : Tutorial Blogger Rating : 6.4 Dari 10, Berdasarkan 1700+ Dari 17 000+ Pengunjung.
Sampai saat ini baru ada : 17 komentar >>> Silahkan tambahkan komentar Anda...