Membuat Readmore Automatic DiBlogspot

Jika anda adalah blogger pemula seperti saya dan masih menggunakan template standard seperti yang saya pakai, biasanya setiap postingan itu terbaca penuh di halaman utama blog. Mungkin anda pernah melihat blog dari teman-teman blogger yang menggunakan readmore/baca selanjutnya dihalaman utama blognya walau dengan tampilan banyak post tetapi lebih simple dari yang kita punya.

Anda ingin mencoba membuat itu?

Ini saya beritahukan caranya sekalian belajar berkreasi untuk mempercantik tampilan blog dengan hasil karya sendiri. Walau sekarang sudah banyak yang menawarkan template free yang bagus2 tetepi biasanya jarang bisa di modif tapilan sidebar dan warna font serta jenisnya. Lebih asykan jika pake made in dewe alias kreasi sendiri.

• Tahap Pertama anda login ke blog yang anda punya,selanjutnya klik Design/Rancangan, Klik lagi Edit HTML kemudian klik Expand Widget Templates, akan tetapi saya sarankan untu memback Up template anda terlebih dahulu.

 

• Tahap selanjutnya anda copy script dibawah ini dan letakan tepat diatas </head> . untuk mempermudah pencarian silahkan tekan Ctrl + F cari kata </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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(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>

• Tahap berikutnya adalah cari dengan tekan Ctrl + F Cari kode <data:post.body/> dan selanjutnya gantikan dengan script yang berada dibawah ini.

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

<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='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;Readmore(Baca Selanjutnya)....</a></span>

</b:if>

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

</b:if>

• Kemudian klik SAVE TEMPLATE dan selesai.

 Jika tulisan Readmore ingin diganti silahkan saja dengan apa yang ada inginkan...

GEVT7S4QHJFR