Cara Membuat dan Memasang Read More Otomatis di Blog

Cara Memasang Read More Otomatis di Blog~ Read more atau baca selengkapnya sering kali kita jumpai di halaman beranda atau home sebuah blog. Kegunaan read more ini adalah untuk memenggal kalimat yang di tampilkan pada halaman utama blog anda. 

Fungsi Dari Pemasangan Read More:

1. Menghemat ruang pada tampilan halaman utama sebuah website.
2. Menjadi lebih elegant dan interaktif.
3. Membuat pengunjung membaca artikel tersebut hingga selesai.
4. Menambah pageviews artikel yang dibaca oleh pengunjun.
5. Menambah link anchor terhadap keyword judul.

Cara Memasang Auto Read More Pada Blog

Sebenarnya untuk melakukan pemenggalan kalimat pada halaman beranda bisa dilakukan dengan cara manual, yaitu pada saat membuat postingan artikel, ada salah satu menu yang berfungsi untuk memotong artikel saat berada di halaman utama. Menu tersebut adalah Insert Jump Break.

Namun sudah jarang blogger yang menggunakan menu tersebut, mungkin karena adanya fitur Auto read more atau read more otomatis ini yang membuat menu Insert Jump Break ini jarang dipakai. Memang sih? banyak blogger males (Seperti Saya) yang tidak mau repot-repot dalam menulis artikel.

Bayangkan saja, sudah otak terkuras untuk membuat artikel yang SEO friendly, di tambah kita harus melakukan beberapa pengaturan pada menu setelan entri. Kita harus menambahkan Label yang tepat, Tautan permanen yang SEO friendly, dan mengisi deskripsi penelusuran atau meta deskripsi yang berbeda setiap artikel.

Jadi dengan adanya fitur Read More Otomatis ini, kita tidak perlu melakukan pengaturan pada menu insert jump link, karena semua artikel yang anda buat akan terpotong otomatis pada saat di halaman utama. Untuk itu, bagi anda yang tertarik ingin memasang auto read more pada blog saudara, silahkan ikuti langkah-langkah sederhana di bawah ini:

• Login dengan akun blog saudara
• Buka menu TEMPLATE blog anda
• Lalu klik pada tombol EDIT HTML
• Cari kode berikut </head>
• Simpan kode di bawah ini tepat 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>

Penjelasan Kode di Atas:
-summary_noimg = 250; adalah banyaknya karakter yang akan ditampilkan ketika tidak ada gambar di dalam posting anda, anda bisa mengubah jumlahnya.
-summary_img = 250; adalah banyaknya karakter yang akan ditampilkan ketika terdapat gambar di dalam posting anda, anda bisa mengubah jumlahnya.
-img_thumb_height = 120; adalah tinggi gambar thumbnail, anda dapat mengubah nilainya.
-img_thumb_width = 120; adalah lebar gambar thumbnail, anda dapat mengubah nilainya.
 Tapi untuk amannya tinggalkan begitu saja.

• Setelah itu, cari kode <data:post.body/>
• Ganti kode <data:post.body/> dengan kode di bawah 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 == "item"'><data:post.body/></b:if>

Keterangan Kode di Atas:
1. Ganti kode berwarna biru dengan kata-kata lain sesuai keinginan anda.
2. Kode berwarna merah adalah kode yang menentukan letak posisi kata-kata tadi. Anda bisa menggantinya menjadi Right, jika ingin rata kanan.

• Klik PRATINJAU untuk melihat hasilnya...
• Jika sudah berhasil, jangan lupa klik SIMPAN untuk menyimpan perubahanya 

Demikianlah artikel tentang Membuat Auto Read More pada Blog, dilain kesempatan saya juga akan membuat artikel yang tidak jauh beda dengan yang saya buat sekarang, yaitu tentang Cara Membuat Auto Read More dengan Gambar.

Sampai Jumpa dan Selamat Mencoba . . .

Tweet

Terima Kasih Atas Kunjungan Anda
Judul: Cara Membuat dan Memasang Read More Otomatis di Blog
Ditulis Oleh Unknown
Artikel ini dipatenkan pada www.myfreecopyright.com, Jika mengutip harap berikan link balik yang menuju artikel Cara Membuat dan Memasang Read More Otomatis di Blog ini. Jika tidak akan diproses secara DMCA Takedown yang tentu saja tidak baik akibatnya bagi blog saudara. Terima kasih atas perhatiannya