Rabu, 02 Maret 2011

Auto Read More Untuk Blogger

Membuat auto readmore di blog


Membuat Auto Read More di Blog, meskipun pada sesi sebelumnya pernah di bahas tentang cara membuat read more, tapi pada kesempatan kal ini,membahas read more dengan cara atau metode yang berbeda. Jika ada yang belum tau apa itu read more, read more adalah istilah yang di pakai oleh para Blogger dalam memenggal atau memotong kalimat pada halaman utama blog agar terlihat lebih profesional dan menghemat tempat.

Kehadiran Auto Read More di Blog tentu akan sangat  membantu para blogger dalam mendesain blog mereka. dengan auto read more, akan menyingkat waktu penulis blog memotong kalimat di halaman depan. Jika pada cara membuat read more sebelumnya, penulis harus menentukan sendiri sampai berapa banyak kata di halaman depan, di cara Membuat Auto Read More di Blog kali ini, proses pemotongan akan dilakukan otomatis oleh java script.

Langkah install auto readmore ini !
  1. Login di blogger.
  2. Masuk ke tataletak
  3. Masuk ke edit html
  4. Download dulu template anda sebelum melakukan instalasi.
  5. Conteng expand widget
  6. Cari kode
    </head> kemudian letakan script dibawah ini 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[
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.

NB:



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

Itulah cara Membuat Auto Read More di Blog. Dengan cara seperti ini, kita pasti akan sangat terbantu dalam menulis sebuah artikel. semoga artikel singkat ini bisa bermanfaat. meskipun script dalam auto read more ini sudah banyak yang memposting.


Sumber:http://www.rofingi.com

0 komentar:

Posting Komentar

 
www.Indo-pages.blogspot.com