Membuat Read More otomatis

Selamat berjumpa lagi sahabat Pucanglaban. Sebetulnya, kebelakangan ini saya teramat sangat disibukkan oleh rutinitas harian yang sangat menguras tenaga dan fikiran. Akan tetapi demi untuk kebersamaan kita kali ini saya akan menulis untuk sahabat pucanglaban sekalian. Pada kali ini saya akan membahas tentang bagaimaa cara membuat read more otomatis.

Pada umumya, template bawaan dari blogspot belum ada fungsi read more nya. Untuk itulah kita akan memasang sendiri read more otomatis untuk blog sahabat yang belum  terdapat fungsi read more dengan memasukkan beberapa script kedalam template sehingga setelah itu blog kita mempunyai fungsi read more otomatis.

Sebetulnya, membuat fungsi read more otomatis ada dua cara yaitu: read more otomatis yang menggunakan gambar dan yang hanya menggunakan tex saja. Dan pada kali ini kita akan  membahas satu kedua cara tersebut.

Baiklah, tidak usah berlama lama dan bertele tele lagi. Langsung saja kita kepokok bahasan membuat read more otomatis. 

A. MEMBUAT READ MORE OTOMATIS DENGAN TEX


1. log in Blogger
2. klik layout
3. klik edit HTML
4. Klik tulisan Download Template lengkap, silahkan save dulu template sobat, ini untuk mencegah 
    resiko apabila terjadi kesalahan dalam melakukan kesalahan dalam proses editing template
5. klik Expand Template Widget
6. Cari kode </HEAD> lalu pastekan kode berikut diatas kode </HEAD>

<script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 150; summary_img = 150; img_thumb_height = 100; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ /****************************************** Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo visit http://en.vietwebguide.com to get more cool hacks ********************************************/ 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>

 7. Cari kode <data:post.body/> kemudian ganti dengan kode berikut

 

<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 style='float:right'><a expr:href='data:post.url'>Read More..</a></span> <b:else/> <data:post.body/> </b:if> Read more: http://pelajaran-blog.blogspot.com/2012/03/cara-membuat-read-more-otomatis-di.html#ixzz1ytnTmtmb

8. klik preview dan jika tiada masalah, klik save template.



B. READ MORE OTOMATIS DENGAN GAMBAR


Ikuti langkah langkah 1 -6 yang terdapat pada cara A kemudian cari kode <data:post.body/> dan ganti dengan kode berikut

<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 style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span> <b:else/> <data:post.body/> </b:if> Read more: http://pelajaran-blog.blogspot.com/2012/03/cara-membuat-read-more-otomatis-di.html#ixzz1ytqkGt1i

klik preview dan bila tiada masalah, kklik save template.


Sekian dulu tutorial tentang cara membuat read more otomatis dan semoga artikel ini bermanfaat untuk sahabat pucanglaban semua.


Sumber: pelajaran blog


pucanglaban.com informatif, kompetitif dan kreatif bersama berbagi ilmu dan pengetahuan.
posted by: Khoirul Anwar