Cara Pasang Auto Read More Otomatis


Pada posting kali ini, saya akan menjelaskan tentang "Cara Pasang Auto Readmore". Walaupun banyak blog2 yang menjelaskan tentang cara membuat read more seperti ini, tapi sekedar sharing info saja, saya akan memberikan ilmu ini kepada para blogger :D .Banyak template yang menyediakan read more yang langsung ada pada template tersebut, namun ada juga yang tidak menyediakan fungsi read more. Contoh Read more bisa dilihat pada blog ini. Apakah fungsi read more? selain untuk mempersingkat artikel yang panjang, read more ini berfungsi agar loading page blog anda lebih ringan. Bahasa gaulnya lola (loading lama) :D .

tapi, ada fungsi tambahan lagi nih dari read more versi terbaru ini, yaitu  mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw  Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok
.

Sumber Gambar : www.o-om.com





Langkah 1

Dashboard>>Rancangan>>edit HTML  , 
Cari kode </head> (pakai CTRL+F untuk mencari)
kemudian letakan script dibawah ini di atas kode barusan..


Langsung Copy-Paste kode HTML 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>

Langkah 2

Masih pada halaman EDIT HTML,temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, 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>

silahkan disimpan dan lihat hasilnya :)


Keterangan:


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)

Selesai , SEMOGA BERMANFAAT ! :D

{ 10 komentar..ada pertanyaan? komentar disini! }

Nixonleon mengatakan...

I was very pleased to find this site.I wanted to thank you for this great read!!
my blogs: master cleanse

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

oh, youre welcome, thanks ..

Asoka Site mengatakan...

Saya punya satu pertanyaan bro. Gimana caranya hapus thumbnail di readmore. Jadi readmore nya tanpa thumbnail. Saya tunggu di Asoka Site ya

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

tinggal dihapus aja sob., script ini (script yang paling atas : script type='text/javascript'
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
/script

Asoka Site mengatakan...

Oke bro. .thank you sudah dikasi pencerahan.,bisa saya praktek kan :D.. . Oke bro. .thank you sudah dikasi pencerahan.,bisa saya praktek kan :D.. .

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

iyaaa sama2.. good luck yaa

Gilang Firlian mengatakan...

sekali lagi thank you atas artikel nya...
bermanfaat banget nie buat blogg ane......

http://gilangfirlian.blogspot.com/

Terimakasih Untuk Komentar Sobat ... by AcerNoval
Naufal Syahrial Hidayat mengatakan...

iya sama2.. :D

ika_uki (123horas) mengatakan...

whoa.! thankyuu bang..
hahahahah
membantu bener ^^
soalnya templateku baru aku gAnti.
nah...

tapi kalo di laman readmorenya setelah di klik ko ngga bisa full view ya?

123horas.blogspot.com
monggo di cek =D

Terimakasih Untuk Komentar Sobat ... by AcerNoval
riswana suherman mengatakan...

Uiiihhhhh ilmu penting nih tQ obat tradisional kanker pankreas

Terimakasih Untuk Komentar Sobat ... by AcerNoval

Be a Top Commentators!

Top Commentators

Postingan
Komentar


Widget by DAW-XP