Cara Membuat Auto Read More pada Blogger

Posted by Abdul Roqib | Friday, December 11, 2009 56 comments
Membuat Auto Read More kali ini berbeda dengan yang sebelumnya yaitu cara memberi read more dan cara memberi read more pada posting. Cara membuat auto read more kali ini aku pelajari dari blognya Oom (o-om.com). Berhubung untuk menerapkan ilmunya aku tulis lagi cara membuat auto read more ini dengan tujuan memperfaseh dan memperluas berbagi informasi sesama blogger, khususnya cara membuat auto read more ini. Cara membuat auto read more kali ini agak ruet disbanding membuat read more sebelumnya. Membuat auto read more kali ini memang dibilang lebih praktis karena apa, jika read more terdahulu harus menggunakan cara manual untuk memasang fungsi auto read more tersebut ke setiap posting.

Tidak kalah menariknya fungsi auto read more kali ini mampu menampilkan gambar pertama dalam sebuah poting. Fungsi auto read more ini bisa dibilang lebih mirip dengan artikel terbaru dengan thumbnail.

Kelebihan yang lain dari fungsi auto read more kali ini yaitu kita bisa mengatur berapa banyak karakter yang akan ditampilkan. Ada karakter yang bisa ditampilkan jika ada sebuah gambar dalam postingan yang anda buat. Dan adapula yang tanpa menampilkan gambar. Memang cara membuat fungsi auto read more kali ini agak rumit tapi ada sisi positifnya juga yaitu kita tidak perlu lagi membuat fungsi read more pada setiap posting .

Tidak perlu membahas terlalu panjang lebar, mungkin alangkah baiknya jika langsung ke tkp. Oo ia jika anda sudah membuat fungsi read more sebulumnya maka dikembalikan lagi ke bentuk semula. Tambahan kode script telah ditamahkan di hapus, untuk melihat kembali script mana yang perlu dihapus klik link cara memberi read more ini.

Jika sudah Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> .
copy paste script auto read more barikut ini:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

Tetap pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" kemudian cari kode dibawah ini

<data:post.body/>

Jika sudah ketemu, maka ganti kode <data:post.body/> dengan semua kode dibawah 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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Setelah selesai tekan save template.

Keterangan tentang cara membuat auto read more:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel).

Dengan keterangan di atas anda dapat merubah script fungsi auto read more sesuka hati.
Selamat bereksperimen…

56 comments: to "Cara Membuat Auto Read More pada Blogger"

Astaga.com lifestyle on the net said...

Lengkap nih tutorial blogspotnya :)

nowGoogle.com adalah Multiple Search Engine Popular said...

Keep posting OK, salam

Festival Museum Nusantara said...

informasi yang menarik sobat

Piala Dunia 2010 said...

thx for share, bro

Nyubi said...

nice share

Festival Museum Nusantara said...

mampir sob

Chiropractic said...

keren bro

Tempat Informasi dan Download Gratis said...

makasi mas atas infonya

sarana pulsa elektrik murah said...

boleh juga nih...

Tips SEO said...

berhasil sobat, makasih infonya...

negeriads.com solusi berpromosi said...

mantab kang

Nyubi said...

makasih sudah berbagi tip

negeriads.com solusi berpromosi said...

mantab bro

TAUFIK HIDAYAH said...

salam kenal dan makasih sudah berbagi cara dalam blog

Daleev Khan said...

makasih mas atas infonya...

mamenz said...

makasih tutornyaa.... ;)

bisnis hosting said...

tapi sekarang sudah ada metode baru kan bos, tinggal di klik langsung jadi read more sendiri
seperti di wordpress

Aica said...

MANTAP TUTORIALNYA BANG @_@

ibelog05 said...

wah makasih banyak mas, ini yang saya cari selama ini, artikelnya bagus, gampang diikuti dan sama sekali gak ribet.
salam kenal mas..

download midi said...

sekarang udah lebih otomatis lagi kan

Iseng Ngeblog said...

Ni dia yang dicari2, kemaren utak-atik malah ngaco hehe

pasang iklan gratis said...

mangtab infonya.., coba dulu ahh..
thanx..

blank-note said...

sama ky o=om tpi bungung gak ada data:post.body

Scholarships Information said...

Wah, infonya mantap nih. Saya cobain dulu ahh..

blackberry torch said...

wow.. thanks banged mas tutorial cara buat readmore otomatis..

Mr. Sok Tahu said...

Lha ini yang kucari.......puter-puter beberapa hari dapatnya disini. suwun mas roqib. Lagi belajar ngeblog mas.

Blogger said...

makasih sob infonya...
udh sekalian ane fllow...
:)

Budi Fajar said...

terima kasih mas

tazz said...

mantap gan

Zoegenk0505 Blog said...

Mantabs bos infonya, saya sdh coba dan hasilnya sangat memuaskan, silahkan bs di cek ke blog sy bos, barangkali ada yg perlu diperbaiki lagi, mohon bimbingannya ya bos?
Lam kenal aja, Tks bngt infonya

22materialistis said...

wah, makasih banget mas tutorialnya. worked.. ;)

OZAN HACKER said...

boz ko` pas q pasang katanya kode "div" ada di "head"...gimana nich...mohon bantuannya...

Febrilian Kristiawan said...

Data post body itu dimana yaa?? Enggak ketemu2!

sakuraID said...

sipz bang bisa di coba di blogku yang lain

75 keunggulan obat herbal xamthoneplus said...

mantap infonya,,sangat membantu sekali,,makasih sobat,,

solusi mengobati kolesterol tinggi said...

keep blogging moga jadi ilmu yang berguna,,,

Alandani said...

thanks info ny gan ..

Ardi Wilanda said...

Gan, buat remove nya gimana???

Ardi Wilanda said...

soalnya langakh terakhir ga ketemu di HTML saya...

Admin said...

mas mau tanya: kalo pasang iklan gimana ya?

Maz Evan said...

Mau ah, thanks infonya gan... ^_^

BowiBowiBowi™ said...

Thank's infonya berguna banget buat saya

download software area said...

Thank you, I try in my blog template and success...

Valentya said...

Thanks gan infonya..mampir ya

Alexa Rank Turun 200 ribu Perhari said...

Masih bisakan menurunkan alexa perhari 200 ribu?

Bebas Berkarya said...

Nice post. Thanks gan tutorialnya

Bewmentalism said...

mantap gan,, udah ane coba , and berhasil nitip link ya http://abbew.co.cc

Nikmaya John said...

Bagus nih tipsnya, pasti brmnfaat buat rekan2 blogger,,,,

Iklan gratis tanpa daftar said...

Nie inpo gan,,,,

iphone 5 said...

Rumors about the Apple’s next generation iphone, iphone 4S/ iphone 5

thebestandroid said...

It’s hard to believe that it’s been just three years since Google’s open-source Android mobile operating system hit the scene.
Regards
The Best Android

iphone 5 said...

Rumors about the Apple’s next generation iphone, iphone 4S/ iphone 5, is growing at a rapid speed and it is not yet confirmed
Regards
The Best Android

JOY said...

Nice article for be aplicated into my blog.
Thank for share :-)

Choice said...

mantap berhasil membuat di blog ku
http://choiceautoinsurance99.blogspot.com
terima kasih sob

gusmulam said...

thank's gan infonya.. sangat membantu buat para blogger pemula seperti saya.

ON THE SPOT said...

manteb bnget sobbb.. tiap kali gw buat blog bru, gw pastiin, gw pasti gunain trik ini.. mksh bwt sharing nya :)

Post a Comment

What's your comment about Cara Membuat Auto Read More pada Blogger, type in the comment form below. Please Don't Spam.!!!