How to Create Auto Read More

Holla!

Setelah kemarin memposting  Cara Insert Jump Break Pada Postingan Blog , ada salah satu teman yang meminta untuk membuat postingan mengenai cara membuat auto read more pada blog. Baiklah, saya akan menunjukkan caranya *kibasponi*.

1. Login ke Blogger.
2. Klik template, backup template terlebih dahulu, kali saja nanti ada suatu masalah
3. Klik Edit HTML.
4. Klik Kiri 1 x di mana saja dalam kotak template.
5. Klik Ctrl+F (untuk mempercepat pencarian kode),dan cari kode berikut </head>
     Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.
6. Masukan kode berikut di atas </head>

<!--Auto Read More Mulai--> <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: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 = "yes"; //yes -dengan gambar, no -tanpa gambar summary_noimg = <span style="color: blue;"><b>300</b></span>; //banyaknya huruf jika tidak ada gambar summary_img = <b>250</b>; //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--><

• Perhatikan kode summary_noimg *jika susah nyari tekan CTRL+F pada keyboar, search*. Di situ terdapat angka 300, merupakan banyaknya huruf dengan postingan tanpa gambar, sedangkan kode summary_img merupakan jumlah huruf dengan gambar
• Untuk mengatur tinggi dan lebar gambar silakan merujuk pada kode img_thumb_height untuk tinggi gambar, sedangkan kode img_thumb_width untuk lebar gambar.

7. Kemudian Cari Kode <data:post.body/> *biasanya ada 2, pilih yang kedua*

8. Hapus kode <data:post.body/> yang ke-2 dan ganti dengan kode dibawah 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> </b:else></data:post></b:if></b:else></data:post></b:if><br /> <div expr:id=""summary" + data:post.id"> <data:post .body=""></data:post></div> <script type="text/javascript"> createSummaryAndThumb("summary<data:post.id/>"); </script> <div class="read-more"> Baca Selengkapnya » </div> <!-- Auto read more Akhir --> </div> </form> </div> <div align="center"> <br /></div> <div style="text-align: justify;">  - baca selengkapnya bisa diganti sesuai selera atau bisa diinsert gambar. *cara insert gambar bisa dilihat di <a href="http://www.wulansari.net/2015/05/cara-memasukan-gambar-pada-jump-link.html" target="_blank">sini</a>*</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> 9. Simpan</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Nah, selamat mencoba! </div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Ada pertanyaan? Silakan tinggalkan dikolom komentar :)</div> <div style="text-align: justify;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPLXepqkIl92usaq_YDEeRfxRCcP7p4zyfsaldxco0CVu365gcO35HHFSbda5ADvIhUeCeGq27EwcJL6aWkkQHbM-swS99rL8WvgND3Q_69z4PJ28bLZh-haXdZ5RQ1XffKZAj3uIj1uVS/s1600/signature+copy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPLXepqkIl92usaq_YDEeRfxRCcP7p4zyfsaldxco0CVu365gcO35HHFSbda5ADvIhUeCeGq27EwcJL6aWkkQHbM-swS99rL8WvgND3Q_69z4PJ28bLZh-haXdZ5RQ1XffKZAj3uIj1uVS/s1600/signature+copy.png" /></a></div> <div style="text-align: justify;"> <br /></div>