Blog of Rosanna Simanjuntak: Tips Mudah Memasang Read More Otomatis di Postingan Blog

Senang banget akhirnya bisa pasang "widget read more" otomatis. Mungkin karena tadi baca doa dan sudah sarapan juga ya. Jadi, agak lancar gitu, kakaa... bye-bye lola.

Apa sih itu, kak?

Widget read more otomatis ini adalah membantu agar tampilan blog kelihatan simple dan dinamis. Kadang-kadang kita menemukannya dalam bentuk lain seperti "baca selengkapnya", "klik di sini" dan lain-lain.

Untuk beberapa template blog kece terbaru dan responsif dari blogger, fasilitas seperti ini sudah ada. Jadi tak perlu lagi dikutak-katik ya. Tinggal pakai!

Contohnya ini

Jadi tips ini murni buat kamu yang ingin eksplor diri sendiri dan ajang uji nyali.

Jangan lupa untuk kenyamanan, template sebelumnya kudu dicadangkan!

Dan, bagi kamu yang sudah pernah pasang, kudu dilepas dulu yang versi sebelumnya. Karena yang aku pasang ini diklaim adalah versi tercepat dan terbaik. Uuu...ye...!

Yuk kita mulai!

1. Login ke dasboard blogger.

2. Klik theme (jangan lupa klik backup/restore, ada di kanan atas) untuk jaga-jaga! atau bisa coba di blog lain untuk ajang coba-coba.

3. Klik edit HTML.

4. Cari kode <head>

Bisa dengan mengetikkan "control F" untuk mempercepat.

Untuk kasus aku kebetulan ada di baris ke 4 dari template blog.

4. Masukkan kode berikut ini di atas <head>

<!--Auto Read More Mulai-->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:280px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 280;
</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(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>

<!--Auto Read More Akhir-->

Warna biru artinya: pengaturan lebar dan tinggi gambar
Warna hijau artinya: pengaturan jumlah huruf jika tidak ada gambar dan jika ada gambar

Namun sebaiknya setiap postingan blog minimal ada 1 gambar, agar tampilan lebih menarik.

5. Berikutnya cari kode <data:post.body/>

Dengan cara yang sama gunakan "control F". Umumnya jumlah kode ini ada 2. Gunakan enter 2 kali pada kotak pencarian, dan ganti kode ke 2 dengan kode di bawah ini:

 <b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <div class='read-more'> <a expr:href='data:post.url'>Baca Selengkapnya »</a> </div> </b:if> </b:if>

Warna hijau muda bisa dihapus, bisa tidak. Suka-suka!

"Baca Selengkapnya" juga bisa di tukar sesuai selera, dengan "read more" "lebih lanjut" dan lain-lain.

Sekali lagi, jika sudah pernah menggunakan fitur "read more" sebelumnya, harus dihapus dulu, konsekuensinya, langka-langkah di atas juga akan berubah.

Tutorial ini juga merupakan buah kemasgulan setelah beberapa kali kegagalan.

Ingin mencoba trik mudah lainnya, main ke sini yuk!

Semoga tips mudah memasang read more otomatis di postingan blog ini bermanfaat.