Cara Membuat dan Memasang Read More Otomatis di Blog

|| || || 8 komentar
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 . . .
Terima Kasih Atas Kunjungan Anda
Judul: Cara Membuat dan Memasang Read More Otomatis di Blog
Ditulis Oleh Riki Junizar
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

/[8 komentar Untuk Artikel Cara Membuat dan Memasang Read More Otomatis di Blog]\
Lingga Imanda Fuesdi mengatakan...

di langkah yang ke 2 post body gga cuma satu tutornya gak jelas

rezkhy adami mengatakan...

Salam gan, saya masih sangat baru dalam "blogger". Banyak hal yang membuat saya bingung. Namun saya tetap ingin posting hal-hal bermaanfaat baik bagi diri sendiri maupun orang lain. Ya.. sekalian kaji ulang pelajaran lah. Terima kasih atas postingan blog agan yang sangat berguna bagi kami para pemula.
Salam sukses....

Naruto Wahib mengatakan...

Thank Min... kun jungi blog saya y0 hehe :)

Aditya Rizki Gunawan mengatakan...

kok ga tampil READ MORE nya ya gan ??

Herry Furyanto Yohanes mengatakan...

Kalau Yang Pesan penutup Otomatis itu Gimana ??

ary setyobudi mengatakan...

Sudah dicoba namun gagal, kira-kira apanya nih ya?

M.Rizki Chaeru Ramadhan mengatakan...

Kok ane gagal gan.. Gak tampil read more nya

Novinka Q Ilmi mengatakan...

ga nemu <data:body .... ka.. gimana ya?? ga bisa pakai tambahkan gadget aja?

Posting Komentar

Terima kasih telah membaca artikel di atas, kalau boleh dibantu tolong berikan komentar yang relevan sesuai dengan topik pembahasan artikel di atas. Anda diperbolehkan berkomentar dengan memperhatikan hal-hal berikut:
1. Komentar jangan mengandung SARA dan PORNO.
2. Jangan berkomentar dengan menggunakan LINK MATI apalagi LINK AKTIF.
3. Jika anda orang Indonesia yang cinta tanah air, maka berkomentarlah dengan bahasa baku dan sopan.
Jika komentar anda melanggar syarat di atas, maka komentar anda tidak akan saya publish dan akan saya tandai sebagai SPAMER.

Terima kasih atas kunjunganya ^_&