Cara Membuat Read More Otomatis di Blog

Cara Membuat Read More Otomatis di Blog - Malam gan xixiix :D ketemu lagi awkawkawk :v malem ini mbahas 2 artikel sekaligus! :D soalnya kayanya besok nggak bisa ngepost jadi aku postin sekarang ya ? :D yuk langsung aja kita bahas tentang Cara Membuat Read More Otomatis di Blog cekidott..

1. Masuk ke www.blogger.com

2. Pilih Template

3. Klik Edit HTML

4. Cari kode   </head> untuk memudahkan pencarian pencet [CTRL+F]

5. Copy kode dibawah ini lalu pastekan tepat diatas </head> <!--ReadMore http://trikseosimple.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-->

6. Save Template agan

7. Scroll template agan kebawah cari kode seperti ini : 


NB: Kata kunci adalah di dalam kotak hitam "Blog Posts/Postingan Blog" jika agan menggunakan bahasa indonesia

8. Jika sudah menemukan kode seperti gambar diatas klik tanda panah kecil warna hitam di sebelah kiri. 

9. Setelah tanda panah diklik maka akan muncul tampilan seperti gambar ini : 


"
10. Cari kode yang ditandai dengan kotak hitam. 'post' var='post'

11. Setelah ketemu klik tanda panah yang lurus dengan kotak tersebut - nantinya akan terbuka kode² yang lain.

    12. Geser scroll kebawah  cari kode   <data:post.body/> 

    13. Jika sudah bertemu dengan kode diatas ganti kode diatas 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 -->

  

    14. Lalu, Klik Simpan Template dan lihat hasilnya!! :D 

Sekian dulu ya gan, cara tentang Cara Membuat Read More Otomatis di Blog semoga bermanfaat see u nexttt post.. ;D 


Script for : trikseosimple

Tweet