Cara Memasang Auto Read More pada Blogger

Cara Memasang Auto Read More pada Blogger – Untuk yang belum tahu apa itu read more, silahkan lihat halaman muka blog ini. Di halaman muka (homepage) Tips SEO + Blog – PC 123 ini, akan terlihat postingan terpotong, yang hanya terlihat sebagian (hanya beberapa kalimat dari paragraf utamanya). Itulah yang dinamakan read more. Read more ini dapat membantu penataan homepage blog Anda, sehingga terlihat lebih rapi dan indah. Sebenarnya Anda dapat menambahkan read more pada pada postingan melalui tombol Insert Jump Break (), tetapi sebagian blogger menganggap cara ini kurang praktis. Untuk praktisnya, Anda dapat memasang auto read more pada blog Anda. Sehingga Anda tidak perlu mengklik tombol Insert Jump Break, cukup poskan postingan Anda, dan secara otomatis akan terpotong oleh auto read more ini.

Jika template blog Anda tidak memiliki auto read more, silahkan coba tips dibawah ini untuk memasang auto read more.

1.   Buka blog, masuk ke menu Template.

2.   Buatlah sebuah backup template Anda, dengan mendownload template yang Anda gunakan saat ini.

3.   Pada menu Template, klik Edit HTML. Jika keluar peringatan, cukup abaikan peringatan tersebut dengan mengklik Lanjutkan.

4.   Jangan lupa untuk mencentang Expand Widget Template.

5.   Tekan CTRL + F, cari kode </head>, dan pastekan kode ini tepat dibawahnya :

<!-- Auto read more script -http://xxpc123xx.blogspot.com- Start -->

 <script type='text/javascript'>

 var thumbnail_mode = &quot;yes&quot;;

 summary_noimg = 300;

 summary_img = 250;

 img_thumb_height = 90;

 img_thumb_width = 90;

 </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 = '<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>

 <!-- Auto read more script -http://xxpc123xx.blogspot.com- End -->

Keterangan :

-       summary_noimg : menentukan jumlah karakter yang ditampilkan tanpa gambar

-       summary_img : menentukan jumlah karakter yang ditampilkan dengan gambar

-       img_thumb_height : menentukan tinggi gambar dalam pixel

-       img_thumb_weight : menentukan lebar gambar dalam pixel

Keempat kode diatas dapat Anda ubah untuk menyesuaikan auto read more dengan desain blog Anda.

6.   Setelah selesai dengan kode diatas, masukkan isian <data:post.body/> pada kotak yang muncul saat penekanan CTRL + F tadi. Setelah ketemu, silahkan ganti kode tersebut dengan kode dibawah ini :

<!-- Auto read more -http://xxpc123xx.blogspot.com- Start -->

 <b:if cond='data:blog.pageType == &quot;item&quot;'>

 <data:post.body/>

 <b:else/>

 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

 <data:post.body/>

 <b:else/>

 <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

 <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

 </script>

 <a class='more' expr:href='data:post.url'>Read More >></a>

 </b:if>

 </b:if>

 <!-- Auto read more -http://xxpc123xx.blogspot.com- End -->

Catatan :

Anda dapat mengganti kata Read More >> dengan kata yang Anda inginkan, semisal Baca Selengkapnya >>, dsb

7.   Langkah terakhir, lihat preview auto read more dengan mengklik tombol Pratinjau. Jika dirasa sudah sesuai, klik tombol Simpan untuk menyimpan auto read more yang telah Anda tambahkan di blog Anda.

Selamat, Anda telah berhasil memasang auto read more pada blog Anda. Kini Anda tidak perlu repot – repot mengklik tombol Insert Jump Break, karena semuanya akan dilakukan secara otomatis oleh blogger.

Selamat mencoba, dan jangan lupa untuk meninggalkan ‘jejak’ (komentar)!

Salam blogger!