Membuat Read More Otomatis Pada Blog

Assalamualaikum wr. wb, Alhamdulillah, puji serta syukur selalu dan senantiasa saya panjatkan kpd ALLAH. krna saya msh diberi kesempatan untuk update dan berbagi ilmu kpd sobat blogger semua. kali ini saya mau berbagi mengenai blog, krna teman2 saya banyak yg request untuk posting mengenai cara menambahkan readmore pada blog, karena tidak semua blog / template yg langsung mendapatkan readmore otomatis. banyak sekali manfaat yg dapat kita simpulkan dari readmore itu sendiri, salah satunya kita dapat mempersingkat bacaan artikel kita pada halaman utama / index blog kita, agar terlihat lebih rapi dan tertata, dan membuat blog kita menjadi lebih ringan. lalu link artikel yg terbuat juga dapat terindeks google, dan dapat memudahkan para pembaca artikel blog kita. nah skarang ikuti langkah langkah berikut untuk menambahkannya kedalam blog sobat..

Langkah langkahnya adalah :

1. Login ke Blogger.

2. Kemudian pada dasbor, klik Rancangan.

3. Lalu Klik Edit HTML.

4. Setelah halaman Edit HTML terbuka beri ceklis pada Expand Template Widget.

5. Lalu cari kode </head> dengan menekan kombinasi tombol pada keyboard ( CTRL + F ) agar lebih mudah mencarinya.

6. lalu tambahkan script berikut tepat diatas kode </head> .

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 450;

summary_img = 300;

img_thumb_height = 120;

img_thumb_width = 160;

</script>

<script type='text/javascript'>

//<![CDATA[

/******************************************

Auto-readmore link script, version 2.0 (for blogger)

(C)2011 By GILANG ARIANTO

visit my Blog htp://notebase.blogspot.com for more article

********************************************/

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. Kemudian dilanjutkan dengan mencari kode <data:post.body>

8. Kemudian ganti kode <data:post.body> dengan script dibawah ini.

<b:if cond='data:blog.pageType != "item"'>
<div style=' text-align: justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Baca Selengkapnya </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

9. Kemudian Simpan Template dan lihat hasilnya.

10. Selamat Mencoba.

Keterangan khusus untuk script diatas :

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)

summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)

summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)

img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

nah itulah cara cara menambahkan Link / tombol Readmore pada blog kita agar terlihat lebih professional.. smoga dapat bermanfaat buat semua. thanks for visit my blog. dan jngn lupa untuk memberikan sedikit komentarnya. kita berjumpa lagi pada postingan berikutnya.

wassalamualaikum wr wb

Tweet

Posted by Unknown |

Masukkan Email Untuk Berlangganan Tulisan by E-mail

Tulisan Lainnya :