Cara Membuat Read More Otomatis

By On 17:26 , ,

Cara Membuat Read More Otomatis 

Cara Membuat Read More Otomatis - Membahas topik kali ini mengenai Read More, sebenarnya pada waktu penulisan artikel kita juga dapat menyisipkan tag "More" di baris mana saja yang gunanya nanti untuk menampilkan ringkasan dari artikel kita. Sehingga bila pengunjung ingin membacanya secara lengkap, maka tinggal klik tombol yang disediakan. Tentunya ini sangat berguna untuk membuat tampilan blog lebih simpel dan padat.

Terkadang ada beberapa template yang sudah menyediakan script untuk membuat read more otomatis, tapi banyak juga template yang belum memiliki script ini. Maka dari itu kali ini saya akan membantu bagi anda yang menggunakan template dan belum ada script read more otomatisnya. Sekarang mari perhatikan langkah-langkah di bawah ini :

Cara Membuat Read More Otomatis

  • Login ke blogger dengan akun anda
  • Masuk ke bagian TEMPLATE, saya sarankan anda untuk backup template anda terlebih dahulu karena script yang akan dimasukan nanti sedikit rumit.. Setelah itu klik EDIT HTML
  • Sekarang cari kode </head> (Gunakan CTL +F untuk memudahkan pencarian)
  • Perhatikan kode yang ada pada kota di bawah.. Letakan kode di dalam kotak tepat di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
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>


  • Setelah itu coba anda cari lagi kode <data:post.body/> . Biasanya dalam template terdapat lebih dari satu kode tersebut.. Untuk cari saja beberapa baris kode seperti ini 
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<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>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

  • Apabila sudah ketemu kode seperti di atas, kemudian ganti dengan kode di atas dengan kode di bawah ini..
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
<span style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></span> 
<b:else/>
<data:post.body/>
</b:if>

  • Kemudian klik SIMPAN TEMPLATE dan lihat hasilnya sekarang.
Readmore yang saya maksudkan disini adalah dengan menggunakan gambar. Tujuannya agar terlihat lebih menarik jika dibandingkan hanaya sekedar teks saja. Oh iya, cara ini saya jamin berhasil karena saya sudah mencobanya sendiri. Saya coba di salah satu blog saya, lihat DISINI 

Saya rasa cukup artikel kali ini mengenai Cara Membuat Read More Otomatis semoga artikel kali ini bermanfaat untuk anda !

Sumber Kode : Pelajaran Blog

Share to :