Cara Membuat Readmore Otomatis di Blog/Blogspot

Coretan Bang Dadan on

Wednesday, December 12, 2012

Cara Membuat Readmore Otomatis di Blog/Blogspot - Apa yang di maksud Read More / Baca Selengkapnya?

Auto readmore - Pada postingan yang lalu bang dadan telah membahas cara merubah lebar body, main dan sidebar blog. Nah kali ini bang dadan akan membahas cara membuat read more di blog / blogspot / blogger. hehe kepanjangan ya judulnya?

Okelah langsung saja, kalau menurut bang dadan sendiri read more itu adalah istilah dari sebuah artikel panjang yang disingkat menjadi pendek. hehe begitu mungkin. radmore biasanya terdapat pada artikel - artikel blog. Bagi sobat yang sudah mempunyai blog khususnya di blogger. kali ini bang dadan akan membahas bagaimana sih membuat readmore otomatis pada blog / blogspot?

Berikut tahapan - tahapan yang harus sobat ikuti dalam tutorial membuat readmore otomatis di blog/blogspot.

---

Cara Membuat Readmore Otomatis di Blog/Blogspot

---

• Pertama, Login pada blog, kemudian menuju Dashbord ➣ Rrancangan ➣ Edit HTML. *jangan lupa  klik expand template widget
• Setelah itu cari kode HTML </head>. *gunakan ctrl+f untuk mempermudah
• Salin kode di bawah ini dan letakkan persis di bawah kode </head>.

<!-- Auto read more script -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</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 -->

• Selanjutnya silahkan cari kode <data:post.body/> 
• Ganti kode di atas dengan kode di bawah ini. *Catatan: apabila terdapat 2 atau 3 <data:post.body/> silahkan sobat ganti <data:post.body/> yang pertama.

<!-- Auto read more 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 End -->

• Selesai :: Namun sebelum menyimpan alangkah baiknya sobat klik pratinjau terlebih dahulu untuk mencegah terjadinya kesalahan. dan bila sudah silahkan klik simpan.

Tips* Bagi sobat yang ingin mengganti nama readmore dengan menggunakan icon/gambar sobat hanya cukup mengganti tulisan Read More >> dengan code dibawah ini:

<img border='0' src='https://lh3.googleusercontent.com/-P9cVAYPtMks/UOhicveA-oI/AAAAAAAABOo/qsDCT6cpi8k/w497-h373/readmore.gif'/>

Catatan* Sobat juga bisa mengganti url gambar readmore dengan url link yang sobat inginkan.

Sekian dulu pembahasan klai ini tentang Cara Membuat Readmore Otomatis di Blog/Blogspot. semoga artikle ini bermanfaat bagi anda semua, dan apabila ada pertanyaan silahkan sampaikan pada kotak omentar dibawah. Terimakasih..!!!

Labels: blogger tutorial, template hack

Thanks for reading Cara Membuat Readmore Otomatis di Blog/Blogspot. Please share...!