Membuat Readmore Otomatis di Blog

By: ALI BLOGGERS | Post: Senin, April 04, 2011 | Label: Bloger

Membuat Readmore Otomatis di Blog - Fungsi Readmore/baca selengkapnya pada posting adalah untuk menghemat halaman depan website/blog agar tidak terlalu panjang, selain itu juga dapat merangsang pengunjung untuk membaca salah satu posting di halaman depan website/blog tersebut.

Nah jika berkeinginan untuk pasang readmore otomatis pada blogspot Anda, silahkan ikuti langkahlangkahnya sebagai berikut:

Sebelum memulai memasang readmore otomatis pada blogspot/blogger Anda, ada baiknya perhatikan hal-hal sebagai berikut : 1. Download dan simpan template Anda terlebih dahulu, karena jika pemasangan gagal anda masih bisa mengembalikan blog anda seperti semula; 2. Jangan lupa untuk memberi tanda centang pada tulisan Expand widget template; 3. Untuk memudahkan pencarian code, gunakan tombol Find, caranya pada browser Anda klik pada menu Edit lalu pilih Find atau melalui keyboard komputer Anda, tekan Ctrl + F, lalu copy paste code yang mau dicari ke dalam kotak Find lalu Enter/Next; 4. Ini yang paling penting, apabila sebelumnya Anda sudah menggunakan Readmore versi lama, maka hapus dulu codenya.

Adapun langkah-langkah Cara Pasang Readmore Otomatis adalah sebagai berikut: 1. Login ke Account Blogger Anda; 2. Masuk ke halaman Edit HTML, lalu diatas kode </head> letakkan script di bawah ini: <script var summary_noimg summary_img img_thumb_height img_thumb_width thumbnail_mode = = = = = type='text/javascript'> "float" ; 250; 250; 120; 120;

</script>

<script //<![CDATA[ function if(strx.indexOf("<")!=-1) { var for(var if(s[i].indexOf(">")!=-1){ s[i] } } strx } chop = (chop < ' = strx.length-1) && ? chop = = s =

type='text/javascript'>

removeHtmlTag(strx,chop){

strx.split("<"); i=0;i<s.length;i++){

s[i].substring(s[i].indexOf(">")+1,s[i].length);

s.join("");

strx.length-2; chop++;

while(strx.charAt(chop-1)!=' strx return }

strx.indexOf('

',chop)!=-1)

strx.substring(0,chop-1); strx+'...';

function var var var var if(img.length>=1) img summ div imgtag = = =

createSummaryAndThumb(pID){ document.getElementById(pID); = "";

div.getElementsByTagName("img"); summary_noimg; {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" summ } = height="'+img_thumb_height+'px"/></span>'; summary_img;

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML } //]]> </script> 3. Cari dan ganti kode <data:post.body/> dengan semua kode dibawah ini: <b:if <div <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span class='rmlink' style='float:left'><a expr:href='data:post.url'>READMORE cond='data:blog.pageType expr:id='"summary" + != "item"'> = summary;

data:post.id'><data:post.body/></div>

<data:post.title/></a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan:

Biasanya kode: <data:post.body/> berada di bawah kode: <div class='post-body'>, maka untuk memudahkan pencarian kode tersebut gunakan tombol Find seperti penjelasan di atas. 4. Simpan/Save Template, selesai. Keterangan:

Kita dapat menentukan letak tumbnail (gambar), jumlah karakter tulisan baik tanpa maupun dengan tumbnail serta tinggi dan lebar tumbnail pada postingan dengan cara merubah kode merah tebal di atas dan berikut penjelasannya : 1. var thumbnail_mode = "float";: Letak thumbnail berada di float kiri atau jika tidak silahkan ganti dengan no-float;

2. summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail; 3. summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail; 4. img_thumb_height = 120;: Tinggi thumbnail dalam ukuran piksel; 5. img_thumb_width = 120;: Lebar thumbnail dalam ukuran piksel; 6. READMORE-<data:post.title/>: Tulisan READMORE bisa diganti misalnya dengan Baca Selengkapnya dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, Anda bisa menghapus code script ini <data:post.title/>.

Read more: Membuat Readmore Otomatis di Blog | ALI BLOGGERS COMMUNITY