Panduan Cara Membuat Auto Read More

Coba perhatikan Template Rudi Tabuci ini, ada perubahan dari template aslinya dengan nama template  "Collaboration". Sebetulnya template ini standard tetapi cukup menarik serta ringgan. Di template ini saya menambahkan Auto Read More dan 3 buah kolom di Footer.

By the way bila anda tertarik akan template ini bisa di download pada link di bawah :

 http://btemplates.com/2008/blogger-template-collaboration/

Kali ini saya akan membahas Cara membuat Auto Read More, dan untuk membuat 3 kolom pada Footer akan dibahas kemudian. Semoga dengan adanya tutorial membuat Auto Read More  ini, siapa aja bisa buat read more dengan mudah. Sebelum melakukan modifikasi template untuk menambahkan Auto Read More, ada baiknya Anda membackup dahulu templatenya. Caranya Masuk ke Pengaturan ke mode HTML dan Download template lengkap.

Baik Simak Panduannya  di bawah:
1. Masuklah ke Pengaturan >> ke halaman Edit HTML >> centang expand template widget
2. Cari kode berikut:   </head>
3. Setelah Anda menemukan, tempatkan kode di bawah ini di atas kode </head> tadi.

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

Anda dapat mengatur jumlah karakter tulisan dan besarnya gambar yang akan ditampilkan dengan cara melakukan sedikit modifikasi sebagai berikut:

var thumbnail_mode = "float"; 

(float –> gambar thumbnail diletakkan di sebelah kiri. Bisa diganti dengan  no-float )

summary_noimg = 250; 

(250 –> jumlah karakter yang ditampilkan jika postingan tidak memiliki gambar / thumbnail)

summary_img = 250; 

(250 –> jumlah karakter yang ditampil jika postingan ada gambarnya / thumbnail)

img_thumb_height = 120; 

(120 –> tinggi gambar/thumbnail dalam piksel)

img_thumb_width = 120; 

(120 –> lebar gambar/thumbnail dalam piksel)

4. Selanjutnya cari kode berikut:

           <data:post.body/>

5. Ganti kode tersebut dengan kode berikut:

<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:right'><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>

Selanjutnya  klik save template. Perlu diingatkan bahwa membuat Auto Read More ini Anda harus sabar untuk mengikuti petunjuk ini agar berhasil nantinya. Selamat mencoba semoga berhasil

Related Articles by Category