Cara Buat Readmore Otomatis - Seperti janji Toko Blog pada postingan cara buat readmore blogspot, kali ini toko blog akan sedikit berbagi tentang cara buat readmore secara otomatis. Mungkin sahabat ada yang bertanya apa bedanya kode html readmore/baca selengkapnya yang pertama dengan pasang readmore otomatis ini. Sedikit kilas balik kalau cara pasang readmore yang lalu sahabat memerlukan kode html yang harus dipasang secara manual saat memulai posting baru di blogger sahabat (baca ; cara buat readmore) dan tentunya agak ribet dan sering juga kita saya kelupaan mengatur kode tersebut.
Langkah Empat :
Cari kode <data:post.body/> (klik CTRL + F lagi yaw biar bisa ketemu tuh kode).
Langkah Lima :
Ganti kode <data:post.body/> tersebut dengan kode berikut :
Langkah Enam:
Save Template – atau bisa di pratinjau dulu, barang kali gak sukses tuh :-). Kalau udah yakin berhasil yang terakhir sobat follow dan komen di Toko Blog dulu zaw.. :-D
Maka di tulisan cara membuat tulisan readmore/baca selanjutnya secara otomatis ini, toko blog mencoba membagi pengalaman belajar blog dasar ini untuk sahabat semua yang juga baru memulai belajar ngeblog 0_0. Apa sih kira-kira manfaatnya pasang readmore ini? Menurut Toko Blog banyak sekali manfaatnya, dan salah satunya untuk mempercantik wajah tampilan blog sobat :-D. Selain itu juga mempercepat loading blog (baca ; mempercepat loading template) dan banyak lagi deh manfaatnya. Yuk baca cara buat readmore otomatis di bawah ini :
Yang pertama seperti biasa sobat login ke blogger dan pilih menu Rancangan – Edit Html. Sebelumnya download dulu template sobat biar aman.
Langkah Dua:
Beri tanda centang pada Expand Template Widget
Langkah Tiga :
Beri tanda centang pada Expand Template Widget
Langkah Tiga :
Cari kode </head> (klik CTRL+F supaya cepat ketemu saya) udah ketemu belum? Kalau belum cari di tempatku aja :-D
Copy kode javascript di bawah ini dan tempatkan di atas kode </head>
Copy kode javascript di bawah ini dan tempatkan di atas kode </head>
<script type='text/javascript'> var thumbnail_mode = "no-float" ; 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>
Langkah Empat :
Cari kode <data:post.body/> (klik CTRL + F lagi yaw biar bisa ketemu tuh kode).
Langkah Lima :
Ganti kode <data:post.body/> tersebut dengan kode berikut :
<b:if cond='data:blog.pageType != "item"'>
<div 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:right;padding-top:20px;'>
<a expr:href='data:post.url'>»»  read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
Langkah Enam:
Save Template – atau bisa di pratinjau dulu, barang kali gak sukses tuh :-). Kalau udah yakin berhasil yang terakhir sobat follow dan komen di Toko Blog dulu zaw.. :-D
Hem jadi cantik kan tampilan blog sobat setelah membaca cara membuat readmore/baca selengkapnya secara otomatis, Kalau belum cantik bisa baca dulu tips mempercantik tampilan blog. Kalau udah toko blog mau pamit istirahat dulu capek jarinya nulis postingan cara buat readmore otomatis ini. :-P Silahkan baca daftar harga HP nokia Terbaru dan cara pasang breadcrumb.
