Cara Buat ReadMore Otomatis di Blog

Cara Buat ReadMore Otomatis di Blog -

Assalamualaikum sobat blogger, alhamdulillah bisa posting lagi. Pada kesempatan kali ini saya akan berbagi tutorial sedikit kepada kalian, yaitu Cara Buat ReadMore Otomasti di Blog. biasa saat kalian menggunakan template bawah dari blogger belum ada Readmore otomatisnya kalian harus membuat Readmore manual di postingan, nah pada kali ini saya akan berbagi sedikit bagamana sich cara membuat Readmore otomatis itu, oke langsung aja cek idot

1. Pertama masuk dulu ke akun blogger kalian masing - masing
2. Lalu klik menu opsi dan pilih Template
3. Klik Edit html
4. jika ada peringatan, klik saja lanjut
5. Dan Jangan lupa Centang Expand Widget Template
6. Selanjutnya cari kode </head>, untuk mempermudah pencarian Tekan CTRL + F untuk mencari kode itu

Setelah ketemu kode </head>, lalu letakkan kode di bawah ini tepat di atas kode tadi

<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>

7. Langkah selanjutnya adalah mencari kode <data:post.body/>. Bila sudah ketemu, ganti kode tersebut dengan kode di bawah 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'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

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

</b:if>

8. Klik tombol "Simpan template".

Keterangan:

• var thumbnail_mode = "float"; adalah letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
• summary_noimg = 250; ialah jumlah karakter yang akan ditampilkan di posting tanpa gambar atau thumbnail;
• summary_img = 250; merupakan jumlah karakter yang akan ditampilkan di posting dengan gambar atau thumbnail;
• img_thumb_height = 120; yaitu tinggi thumbnail dalam ukuran pixel;
• img_thumb_width = 120; artinya lebar thumbnail dalam ukuran pixel;
• readmore merupakan tulisan readmore yang dapat diganti misalnya dengan “Baca Selengkapnya” dan apabila Sobat tidak ingin menampilkan judul dibelakang Readmore, Sobat dapat menghapus kode skrip ini .

Demikian Mengenai cara buat Readmore Otomatis pada Blog, semoga artikel yang saya berikan dapat bermanfaat buat kalian. Wasalamualikum

 

Tweet