Tempat Berbagi Berita, Cerita dan Derita

Kategori Yang Kalian Suka

Post ini diterbitkan pada : Tuesday, November 9, 2010

Cara Menambahkan Fitur Auto Read More

Walau Blogger sudah menambahkan fitur jump break pada default posting nya, nampaknya pilihan auto read more masih menjadi pilihan kebanyakan . Dengan fitur read more yang otomatis, kita ngga perlu bersusah ria dalam menyelipkan kode HTML pada post kita agar artikel menjadi dua bagian (bagian yang tampil di depan dan bagian yang tampil setelah di klik).

Read More Otomatis

Cukup menulis sebagus yang kita bisa, lalu fitur akan langsung membuat ringkasan artikel kita dengan word count tertentu. Hebatnya, dengan Javascript, gambar (image) pertama yang ada pada artikel, juga akan secara otomatis di letakkan pada sisi kiri atas artikel. Tentunya jauh lebih mudah kan?

lalu bagaimana cara menambahkan fitur Auto Read More ini pada template kita? simak adegan berikut. Eh salah, maksudnya simak tutorial berikut..

1. Login ke account blog kalian. Pada menu dashboard, pilih Rancangan / Design.

2. Selanjutnya, masuklah ke menu Edit HTML , Backup dulu template kalian dengan cara mengklik link Download Full Template, kemudian berikan tanda centang pada kolom Expand Widget Template.

Menu Edit Html

3. Cari kode ]]></b:skin> , dan ganti kode tersebut dengan kode ini :

]]></b:skin>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 400;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 130;
</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"><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>

4. Cari kode <div class='post-body entry-content'> , dan ganti kode tersebut dengan kode ini :

<div class='post-body entry-content'>
<p><b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read More...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>

5. Save.

Apa saja yang perlu di ganti ?

summary_noimg = 400;         <-- Jumlah teks yang tampil pada artikel tanpa image / gambar.
summary_img = 250;            <-- Jumlah teks yang tampil pada artikel yang bergambar.
img_thumb_height = 120;     <-- Ukuran tinggi gambar yang tampil.
img_thumb_width = 130;      <-- Ukuran lebar gambar yang tampil.

Ganti teks Read More... (Perhatikan langkah No.4) dengan teks yang kalian inginkan.

Selesai deh.

Do you like this post? You can share it with your community..
Dapatkan update artikel lewat email

Artikel Terkait

5 comments:

hmmm . . . . kalau buat yg auto blog manteb nih gan . . . . hacknya . . .

thx

lebih maknyus kalau pake emoticon dari blog ane gan :)

maap

@Sebuah Tips --> Bisa dicoba.

@facemot --> Wah, bener-bener maknyus.. siip!

nice tips gan saya juga pernah memakai read more seperti ini walaupun susah tetapi banyak pelajarannya. mampir ke blog ane gan http://arifust.web.id jangan lupa komentar juga ya

Informasi Terhangat tentang 7 kejadian langka dan spektakuler di seluruh dunia, ikuti update-an nya setiap hari.. Keep stay tune!!

My Tweet

 
Site Meter
© 2008 Blogger Abstrak | Template by : O-zone | Owner : Angga Leoputra