Home » » Style Read More Otomatis dengan Thumbnail

6 Style Read More Otomatis dengan Thumbnail

Pada artikle terdahulu saya pernah sharing tentang membuat Readmore otomatis, bedanya dengan Tutorial kali ini hanya terletak pada thumbnailnya, Pengetian dari thumbnail itu sendiri adalah menyertakan judul blog di readmorenya misalnya Read more "Cara Membuat Read More Otomatis dengan Thumbnail di Blogspot". Kurang lebih kaya begitu lah,, hehehehe.

Contoh gambar Read More Otomatis dengan Thumbnail 


Oke ikuti Cara Membuat Read More Otomatis dengan Thumbnail di Blogspot

1. Pertama, kamu harus login ke akun blogger kamu,.

2. Terus, klik Tata Letak > Edit HTML.

3. Jangan lupa beri tanda ceklis pada kotak kecil expand widget templates

4. Cari tag </head>, biar lebih gampang pencet ctrl+f aja terus ketik </head> dan tekan enter.

5. Kalo udah ketemu, kopi script berikut tepat di atas kode </head> tadi.

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

Kita bisa mengubah nomor2 yang di atas sesuai kebutuhan kita:

summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar
summary_img = 340; adalah tinggi potongan artikel dengan gambar
img_thumb_height = 100; adalah ukuran tinggi thumbnail
img_thumb_width = 120; adalah ukuran lebar thumbnail

6. Selanjutnya cari kode <data:post.body/> lalu ganti kode tsb 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 "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

7. Selesai

Sekarang coba save template kamu, terus kamu klik preview. Kalo berhasil, semua postingan di blog kamu bakal kepotong dan bertuliskan read more di bawahnya dengan adanya thumbail tentunya. Semoga bermanfaat!
Anda suka atau merasa artikel ini bermanfaat? Jika ya, mohon kesediaannya untuk meng-klik tombol Plus One yang ada di samping ya. Terima kasih
related post :

6 Testimonial:

ALI BLOGGERS COMMUNITY :

owwhh bagus mas uwah. tapi kalau yang sudah pake readmore otomatis template ny masih bisa juga nggak?

Mas uwah :

@ali: hapus aja dan ganti redmore otomatis yg lama dengan yg ini mass!!

narti :

makasih tutorialnya

Feby Oktarista Andriawan :

Owh, ternyata untuk otomatis juga ada ya, jadi kita gak perlu repot motong artikel kita ya mas? :)
Nice info..

Mas uwah :

@narti: sama2..
@feby: iya mas ada,, betul sekali selamat mncoba

Anonymous :

kalo..teksnya di hilangkan bisa gak
indibandung@gmail.com

SILAHKAN KOMENTAR

Maturnuwun sampeyan sudah mampir di Blog Mas uwah, tinggalkan komentar untuk menjalin persahabatan ingat NO SPAM.

 

Copyright © 2011 Mas Uwah is proudly powered by Blogger.com | Return to top

Grab this blog to mobile version on http://trikbloggers.blogspot.com/?m=1

Mas uwah | Trik blogger | Optimasi seo