Profil

My photo

Blogger, Digital Imaging, Photography
Blog Status: Terjadwal

Friday, April 23, 2010

Cara Membuat Read More Otomatis (Auto Read More) di blog

Not your language? Choose your language here
Saya buat posting ini sebenarnya karena ada temen saya di sekolah (namanya Pramana) yang pengen tau cara membuat read more di blog. Rasanya menyenangkan karena bisa jadi master blogger di sekolah bantu temen buat ngeblogging, jadi tambah banyak deh yang suka nge blogging. Ok, semoga buat Pramana dan para blogreaders blog Agung AP bisa bermanfaat.

Tapi, sebelum saya mulai... mungkin ada blog yang udah memakai read more yang manual. Jadi agar read more otomatis ini mau bekerja di blog anda, anda bisa melakukan cara berikut:

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style&gt;
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

- Hapus kode yang berwarna merah

Ok, setelah read more manual di blog anda sudah dinonaktifkan, sekarang anda bisa memasang read more otomatis di blog anda:

1. Pertama yang harus anda lakukan adalah Log in ke akun Blogger anda.
2. Buka Tata Letak --> Edit HTML, centang Expand Template Widget.
3. Cari kode </head> dan paste kode berikut di atas kode </head>

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

- Keterangan:

var thumbnail_mode = "float";  (bisa ganti apakah letak thumbnail berada di (float) kiri atau jika tidak bisa diganti dengan (no-float)
summary_noimg = 250; (Menentukan berapa banyak karakter yang akan ditampilkan di posting tanpa gambar)
summary_img = 250; (Menentukan berapa banyak karakter akan ditampilkan di posting dengan gambar)
img_thumb_height = 120; (Thumbnail/Gambar 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail/Gambar 'lebar dalam piksel)

4. Setelah dipasang, sekarang anda cari kode <data:post.body/> dan ganti kode <data:post.body/> 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: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>

- Tulisan READ MORE tersebut bisa anda ganti dengan tulisan apa aja.

Dan setelah itu simpan deh dan lihat hasilnya. Semoga tips ini bisa bermanfaat dan selamat mencoba :)

Save And Share : Cara Membuat Read More Otomatis (Auto Read More) di blogTweet This ! (Click On It For Url Shortening) Share On Facebook ! Share On Google Buzz ! Add To Del.icio.us ! Share On Digg ! Share On Reddit ! Share On LinkedIn ! Post To Blogger ! Share On StumbleUpon ! Share On Friend Feed ! Share On MySpace ! Share On Yahoo Buzz ! Get These Share Buttons ! Share On Google Reader ! Google Bookmark ! Send An Email ! Blog Feed !

Subscribe in a reader

Silahkan masukan alamat email anda disini untuk berlangganan artikel dari blog ini GRATIS:

Artikel menarik lainnya:



10 comments:

  1. pertamax lagi disini!!!

    mending pake read more di draft blogger aja...lebih mudah kan....ya gak?

    ReplyDelete
  2. Kalau aku gak suka pakai read more sob...

    ReplyDelete
  3. saia pake yang editor diperbarui, jadi gag ribet lagi masukin html :)

    ReplyDelete
  4. okdeh sob blog q juga pakai auto readmorekok, sipdeh

    ReplyDelete
  5. Wah keren bro...

    artikelnya.... semoga tambah maju,,,

    mampir dan FOLLOW Blog aq ya....

    Ingin tahu, Sejarah Google
    Cepet klik Sejarah Google

    ReplyDelete
  6. mangtabz gan! dah saya pasang kok..

    makasi dah berbagi ilmunya ya sob!

    ReplyDelete
  7. wah, mantab euy..
    thanks infonya bro..

    tarikk mangg..

    ReplyDelete
  8. manab infonya kunjungan balikk.. txs atas kunjungannya

    ReplyDelete

Kalo mau komen disini inget No SPAM, No PORN, No SARA (Seks, Agama, Ras dan Anatomi), karena komen seperti itu akan saya hapus!
Jika anda ingin mereply/membalas komentar, klik tulisan "Reply" dan tulis komentar anda

Terima kasih atas kunjungannya, semua komentar akan saya hargai :)

Blog ini DOFOLLOW