Cara Membuat Auto Read More Blogger Dengan Thumbnail - Jika kalian baru saja membuat sebuah template blogger, pasti home page template blogger kalian tidak ada read more nya bukan? ya emang kan belum di buat read more nya, tapi kalo template dari internet kalian pasti udah nemuin read more nya.
Saya sendiri pernah baca di beberapa blog dan website kalo penambahan Read More ini sendiri ke dalam blog akan mempengaruhi proses penerimaan Google Adsense, jika kalian mendaftarkan nya ke Google Adsense. Tapi saya suka liat liat blog orang, ada read more nya tetapi juga ada adsense nya. Ntah lah itu cuma beberapa opini saja, yang penting saya bukan membahas Adsense pada postingan ini. Read more kali ini hanya read more biasa tetapi untuk teks read more akan di ganti dengan gambar. Gif? bukan gif kok cuma gambar PNG biasa aja.
Step 1 : Login ke blogger, masuk ke halaman Template kemudian edit HTML. Cari kode </head> copy kode di bawah dan paste tepat 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>
Step 2 : Masih di Edit HTML, sekarang cari kode <data:post.body/> , biasa nya di dalam template kode tersebut ada lebih dari 1, sekitar 2 atau 3 gitu, dan coba cari di kode yang ke 2. Udah ketemu? copy kode di bawah ini dan timpa atau replace dengan kode di bawah ini. Inget ya, di ganti bukan di tambahin kode ini.
<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'><img src='https://s24.postimg.org/ekmrlw0o5/Read_More_Ukon.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Selesai, kemudia save template dan coba di refresh halaman utama blog nya.
Untuk gambar read more nya, kalian bisa ganti link url nya dengan gambar kalian sendiri, misalnya di ganti jadi "Baca Selengkap nya ...." atau bahkan di hapus gambar nya lalu di ganti dengan tulisan saja. Itu terserah kalian. Oke terimakasih sudah berkunjung, jangan segan untuk bertanya di kolom komentar jika menemukan kesulitan.
EmoticonEmoticon