Cara 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 yakni untuk memenggal kalimat yang di tampilkan pada halaman utama blog anda.

Fungsi Dari Pemasangan Read More:

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

Cara Memasang Auto Read More Pada Blog

Sebenarnya untuk melaksanakan pemenggalan kalimat pada halaman beranda sanggup dilakukan dengan cara manual, yaitu pada ketika menciptakan postingan artikel, ada salah satu sajian yang berfungsi untuk memotong artikel ketika berada di halaman utama. Menu tersebut adalah Insert Jump Break.

Namun sudah jarang blogger yang memakai sajian tersebut, mungkin alasannya adanya fitur Auto read more atau read more otomatis ini yang menciptakan 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 melaksanakan beberapa pengaturan pada sajian setelan entri. Kita harus menambahkan Label yang tepat, Tautan permanen yang SEO friendly, dan mengisi deskripsi penelusuran atau meta deskripsi yang berbeda setiap artikel.

Makara dengan adanya fitur Read More Otomatis ini, kita tidak perlu melaksanakan pengaturan pada menu insert jump link, alasannya semua artikel yang anda buat akan terpotong otomatis pada ketika 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 sajian TEMPLATE blog anda
Lalu klik pada tombol EDIT HTML
Cari arahan berikut </head>
Simpan arahan di bawah ini sempurna 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; yakni banyaknya abjad yang akan ditampilkan ketika tidak ada gambar di dalam posting anda, anda sanggup mengubah jumlahnya.
-summary_img = 250; yakni banyaknya abjad yang akan ditampilkan ketika terdapat gambar di dalam posting anda, anda sanggup mengubah jumlahnya.
-img_thumb_height = 120; yakni tinggi gambar thumbnail, anda sanggup mengubah nilainya.
-img_thumb_width = 120; yakni lebar gambar thumbnail, anda sanggup mengubah nilainya.
Tapi untuk amannya tinggalkan begitu saja.

Setelah itu, cari kode <data:post.body/>
Ganti kode <data:post.body/> dengan arahan 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 arahan berwarna biru dengan kata-kata lain sesuai impian anda.
2. Kode berwarna merah yakni arahan yang memilih letak posisi kata-kata tadi. Anda sanggup menggantinya menjadi Right, kalau 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 menciptakan artikel yang tidak jauh beda dengan yang saya buat sekarang, yaitu wacana Cara Membuat Auto Read More dengan Gambar.

Sampai Jumpa dan Selamat Mencoba . . .

Sumber https://www.gratistutorial.me/