Cara Memasang Auto Readmore di Blogger Blog

Mungkin jika pemula dan membuat blog dengan template defaultnya Blogger maka anda akan melihat satu perbedaan dengan Blog atau website lain yang Anda kunjungi,anda pernah  menemukan sebuah artikel terputus dan anda diharuskan untuk klik link readmore atau baca selengkapnya untuk dapat melihat artikel secara utuh.Tujuan dari pemasangan readmore (summary post) ini sendiri bertujuan untuk menghemat ruang halaman homepage blog sehingga tampilan homepage akan tampak rapi.

Bagi anda yang ingin sekali memasang auto readmore di posting blogger,pada kesempatan kali ini saya akan membagikan sebuah tutorial untuk membantu anda membuat auto readmore sederhana di blog yang anda miliki.

Berikut cara memasang auto readmore di posting blogger

1. Pertama-tama yang anda harus lakukan adalah masuk ke halaman dashboard blog anda di www.blogger.com dengan menggunakan akun blogger yang anda miliki.

Backup dulu template Anda sebelum melakukan peng-editan

2. Setelah masuk ke halaman dashboard,silahkan anda klik Template lalu klik EDIT HTML

3. Cari kode </head> lalu letakkan kode berikut ini di atas kode </head>

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 250;

summary_img = 250;

img_thumb_height = 50;

img_thumb_width = 50;

</script>

<script type='text/javascript'>

//<![CDATA[
//Autoreadmore by bloggingpasuruan.blogspot.co.id

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>

Keterangan:

summary_noimg = 250 (panjangnya teks pada post yang tidak memiliki gambar)

summary_img = 250 (panjangnya teks pada post yang memiliki gambar)

img_thumb_height = 50 (ukuran tinggi gambar/tumbnail pada postingan)

img_thumb_width = 50 (ukuran lebar gambar/tumbnail pada postingan)

4. Jika sudah,selanjutnya anda cari kode <data:post.body/> ,silahkan anda hapus kode tersebut dan ganti dengan kode dibawah ini.

Anda akan menemukan kode <data:post.body/>  lebih dari satu,gantilah <data:post.body/>  yang ke du atau yang ketiga.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/><b:else/> <b:if cond='data:blog.pageType != &quot;item&quot;'> <style type='text/css'>.post-footer {display:none;}</style> <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><span class=' pasuruanreadmorelink ' style='float:right'><a expr:href='data:post.url'>Read More</a></span></b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></b:if>

Catatan:

Teks yang saya beri warna merah adalah untuk menonaktifkan fungsi post footer baik dihalaman homepage maupun statis.Anda dapat menghapus kode tersebut jika anda ingin mengaktifkan fungsi post footer.

5. Agar tampilan kelihatan lebih menarik,anda dapat memasukkan css berikut ini diatas kode ]]></b:skin.

/* CSS Read more link*/

.pasuruanreadmorelink a{font-family:cuprum; background-color:#45818e; color:#FFF; font-size:12px; padding:1px 3px 1px; text-transform:none}

. pasuruanreadmorelink a:hover{background-color:#2E5760}

6. Jika sudah,silahkan anda klik simpan.

Terakhir,lihatlah homepage blog anda dan lihatlah apabila auto readmore telah muncul maka anda telah berhasil memasang auto readmore di posting blog anda.

Bagaimana? cukup mudah bukan?

Catatan : Tutorial diatas adalah cara menambahkan AUTO READMORE pada TEMPLATE DEFAULT bukan MODIFIKASI READ MORE yang sudah ada sebelumnya pada template Blog Anda.

Semoga bermanfaat