Membuat Auto Read More pada Blogspot dapat memperkaya tampilan dan pengalaman pembaca saat mengunjungi blog Anda. Tutorial ini akan memberikan panduan langkah demi langkah dalam memasang Auto read More secara otomatis pada blog Anda. Meskipun topik ini telah banyak dibahas oleh para blogger lain, namun tidak ada salahnya untuk memperkaya pengetahuan Anda.
Langkah pertama yang perlu Anda lakukan adalah masuk ke menu edit HTML pada blog Anda. Selanjutnya, pastikan untuk mencentang Expand Template Widget pada Edit HTML agar Anda dapat melihat kode secara lengkap. Dengan melakukan langkah-langkah ini, Anda akan dapat memasang fitur Auto Read More dengan mudah dan efektif.
Dengan menambahkan fitur Auto Read More, Anda dapat meningkatkan tampilan blog Anda dan membuat pengunjung lebih tertarik untuk membaca konten-konten yang Anda bagikan. Jadi, jangan ragu untuk mencoba tutorial ini dan lihatlah bagaimana fitur Auto Read More dapat memberikan manfaat yang besar bagi blog Anda.
selanjutnya, letakkan kode berikut pas 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>
Selanjutnya cari kode <data:post.body/> (gunakan fungsi find)
ganti kode tersebut dengan kode
<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>
Klik "Simpan" pada Menu edit Html Anda untuk mengatur Blog Anda agar secara otomatis menampilkan summary sebanyak 430 karakter tanpa gambar (summary_noimg = 430;) atau 340 karakter jika menggunakan gambar (summary_img = 340;). Anda juga dapat mengubah kode tersebut sesuai keinginan Anda. Selamat mencoba dan semoga sukses! Jika mengalami kesulitan, jangan ragu untuk menghubungi dukun terdekat.
Posting Komentar