MusicPlaylistView Profile
Create a playlist at MixPod.com

Friday, March 26, 2010

Cara Membuat Read More Otomatis dengan Thumbnail di Blogger

imageSebelum cara ini ditemukan, para blogger masih pake cara lama untuk mnyembunyikan sebagian postingnya dan menampilkan tulisan read more di beranda blog mereka. Kita harus nyanyumin tag <span id=”fullpost”> dan </span> setiap kali kita posting di blog. Kalo menurut saya sih ini terlalu rumit, dan kita juga suka bingung mau ngebatesin artikel kita seperti apa. Malah di sebagian browser, tag read more seperti itu kadang2 suka berbeda, malah ada yang ga muncul tombol read morenya. Selain itu, masalah yang sering timbul yaitu javascript yang kadang2 ga bisa dibuka karena hostingnya sedang bermasalah. Pasti ga enak banget kan kalo masalah2 itu menimpa blog kita? Nah, saya punya solusinya nih! Kita ga harus nyantumin kode2 <span id=”fullpost”>, dan gambar yang kita sisipkan di artikel bakal muncul di postingan kita paling atas! Contohnya seperti blog saya ini. Kita tinggal ngebiarin script yang ngejalanin semuanya buat kita. Tertarik kan? Langsung aja ya kita pratekkan.

1. Pertama, kamu harus login ke akun blogger kamu, klik di sini.

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. Semoga bermanfaat!

20 Testimonials:

Adi Setia Budi on March 27, 2010 at 8:57 AM said...

wow . akang tau darimana ?
klo aku taunya dari buku .

oempak on May 9, 2010 at 5:47 PM said...

wah, makasi nih infonya, membantu banget :)

Nisrina said...

gan ak repost yg ini ya
tetep pk full credit ko

makasi banyak :D :D :D

amrih-09 on July 1, 2010 at 4:36 PM said...

thanx berat OHM... berkat bantuan.Na blog.aku makin profesional... check it out!!!!!!!!!!!!!!!!!... pokokke thange berate ae dah

senyum-xp on August 19, 2010 at 2:21 PM said...

makasi ya atas tipsnya....sangat membatu,....kalau ada waktu singga di blog sy ya mas tks.......

Anonymous said...

Thanku Brother berhasil tutornya, ha ha ha sekalilagi TKU Bro. salam ngeblog :X

Dedy Ariyanto. StP on November 15, 2010 at 11:20 AM said...

Tengkyu kang mas.... berhasil...

Ummi Alief on December 4, 2010 at 11:17 PM said...

Aduh syukron banget..saya uda hampir(baru hampir lho...)putus asa nyoba2 ga pernah berhasil sampai ganti template berxx..tapi sekrg udah jadi...tks sekali lagi...

cheat point blank on December 7, 2010 at 10:51 PM said...

Bos.. cara biar homenya rapi gmn???
bls di koment ane ya.. ne yang baru http://wikicheat.blogspot.com
dan ini yang lama.. http://fedoce.co.cc soalnya di homenya gak rata.. tapi cm rata kanan..

Reo.Rachmawan on December 13, 2010 at 11:04 PM said...

Thaks banget,saya dah beberapa kali coba "read more". baru kali berhasil. sekali lagi thaks

kiyute on February 3, 2011 at 4:12 PM said...

http://kiyute80.blogspot.com/

Team GMS on February 11, 2011 at 6:15 AM said...

thanks bro infonya ...go to TKP !!! salam kompak http://gmsrw12.blogspot.com/

fianagus on March 3, 2011 at 1:02 PM said...

maturnuwun tengkyu.,.

Rafless bencoolen on March 8, 2011 at 3:43 PM said...

udah dicoba,,tapi kok tulisan java script yang muncul???apanya yang salahya?? bantuin donk gan,,, bahankuliahkesehatan.blogspot.com

Erik Erilanita on March 13, 2011 at 10:58 PM said...

berhasil... berhasil... berhasil...
tengkyu... tengkyu... tengkyu...

Admin Aneh on April 1, 2011 at 12:44 AM said...

mkasih mas bro,, berhasil^_^
jgn lupa dikunjungi balik y mas bro:D
pointnol.blogspot.com

vita on April 11, 2011 at 11:15 AM said...

TFS yaa.... sudah berhasil.. :)

Bhima Permana Putra on May 1, 2011 at 3:29 PM said...

Thanks sob sharenya,langsung praktek ahh
hihihi

LutFiiy Lavhalitya on May 30, 2011 at 7:11 PM said...

thx :D

Mr.Simple on December 22, 2011 at 6:07 PM said...

snior blogger mohon izin copas buat jadi bahan blog saya yang newbie

new-article-artikel.blogspot.com

Post a Comment

Silahkan berkomentar semau kamu..
Tapi yang sesuai dengan topik yaa...

 

Site Info

Related Posts with Thumbnails

Followers

Thinking Positive, Thinking Out of The Box Copyright © 2010 Blogger Template Sponsored by Trip and Travel Guide