Cara membuat tombol “read more” di template Blogger

downloadRead more link.
Untuk pengguna template Blogger Cara membuat nya adalah sangat mudah. Sebelum melangkah  ke cara membuat read more otomatis di blogspot lebih baik kita tahu apa itu read more? dan apa fungsi read more? Read more dalam bahasa indonesia yaitu ” Baca Selengkapnya ” dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda.
Nah. Sekarang saatnya ke bagaimana cara membuat read more otomatis di blogspot tersebut.
Langkah-langkah cara membuat Read More adalah :
Login ke Blog anda (wajib)
Masuk ke Blog > dashboard > Design/Rancangan > Edit HTML; centang Expand template widget
Cari kode <head>  gunakan CTRL + F untuk mempermudah pencarian

Paste kode berikut tepat dibawahnya

<script type=’text/javascript’>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 400;
summary_img = 300;
img_thumb_height = 150;
img_thumb_width = 150;
</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(thumbnail_mode == “yes”) {
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>

Keterangan :
Script berwarna
biru adalah jumlah dan ukuran tampilan.
summary_noimg = Jumlah karakter tanpa gambar
summary_img = Jumlah karakter dengan gambar
img_thumb_height = Tinggi gambar {dalam pixel}
img_thumb_width =Lebar gambar { dalam pixel }
Silahkan diubahlah sesuai dengan keinginan anda 


baca juga: CARA MEMBUAT DAFTAR ISI BLOG BERDASARKAN LABEL


Selanjutnya cari kode <data:post.body/> atau <p>
<data:post.body/></p>

( seperti biasan gunakan CTRL + F untuk mempermudah pencarian. Jika ditemukan 2 atau lebih kode yang sama, maka ambil kode yang pertama.

Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini

 <b:if cond=’data:blog.pageType == &quot;item&quot;’>
<data:post.body/>
<b:else/>
<b:if cond=’data:blog.pageType == &quot;static_page&quot;’>
<data:post.body/>
<b:else/>
<div expr:id=’&quot;summary&quot; + data:post.id’><data:post.body/></div>
<script type=’text/javascript’> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class=’more’ expr:href=’data:post.url’>Read More >></a>
</b:if>
</b:if>
Tulisa Read More dapat anda ganti dengan kata yang sesuai keinginan anda sendiri. Bebas aja deh.
Kemudian simpan template dan lihat hasilnya

Semoga bermanfaat. Selamat mencoba dan semoga berhasil.

Berlangganan konten blog ini:

Tinggalkan Komentar

Email anda tidak akan di publikasikan. Lengkapi Data di bawah ini :