Menambahkan Readmore Otomatis Pada Postingan Blog

Selamat malam sahabat Blogger. Setelah lama fakum dari dunia blogger, kali ini Suntomato-san ingin berbagi ilmu tentang bagaimana cara menambahkan readmore otomatis pada postingan blogger sobat. Alhasil setelah melakukan percobaan sendiri dari referensi yang ada, saya coba merangkum kembali kedalam bentuk yang lebih sederhana lagi agar mudah dipahami baik bagi Anda yang baru pertama kali masuk ke dunia blogger yang menarik ini.

👀 Apa itu Readmore Pada Postingan Blog ?? 
Readmore adalah penggalan pada sebuah postingan yang umumnya ditandai dengan kata "Lanjutkan Membaca" , "Baca Selengkapnya" , atau juga sering dikenal dengan"Readmore" itu sendiri.

Bagi sobat Blogger yang baru pertama kali mengenal kata "Readmore", dibawah sudah saya cantumkan contoh readmore yang sudah jadi. Klik open untuk melihat screenshot -nya.

Contoh readmore yang sudah jadi:

Bagaimana ..? tertarik pada trik blogger yang satu ini.

Berikut langkah -langkah Menambahkan Readmore Pada Postingan Blog .

1) Langkah pertama, tentunya Anda harus login ke Blogger Anda terlebih dahulu.

2) Jika sudah login, buka menu || Template || >> Edit HTML
3) Cari Kode </head> 
tips : gunakan kombinasi keyboard Ctrl+F untuk memudahkan mencari Kode.
4) Copy paste kode dibawah ini tepat di atas kode </head>

<!--ReadMore http://suntomato.blogspot.com--> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <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:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;} .grow img{height:165px;width:250px;transition: all 2s ease;} .grow img:hover{width:400px;height:250px;} </style> <script type='text/javascript'> var thumbnail_mode = "yes"; //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 = 250; </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-->

5) Save Template Anda terlebih dahulu.
6) Kemudian cari kode di bawah ini ,

<b:includable id='post' var='post'

untuk memudahkan mencari gunakan Ctrl+F

7) Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.
8) Scroll ke bawah pelan - pelan sampai ketemu kode <data:post.body/> yang pertama .
9) Kemudian hapus kode <data:post.body/> yang pertama tadi dan ganti dengan kode dibawah ini:

<!-- Auto read more Mulai --> <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> <!-- Auto read more Akhir -->

10) Langkah terakhir adalah Menyimpan settingan Anda. Klik Save / Simpan Template .
============= Selesai 💦

Oke sobat blogger, bagi Anda yang sudah berhasil menambahkan readmore otomatis pada postingan blogger sobat. Saya ucapkan selamat 👏 dan jika Anda punya pertanyaan seputar postingan ini silahkan Anda tulis pertanyaan Anda pada kolom komentar dibawah ini.

👆Jangan lupa share ya.. jika Anda menyukai postingan ini. Terimakasih .