Membuat Readmore

Ok deh..,kali ini bang wahid akan berikan trik cepat pasang baca selengkapnya atau read more pada blog secara otomatis. Jadi setelah kita pasang read more ini maka akan secara otomatis setiap postingan yang kita buat akan terpotong sendiri secara otomatis sehingga sangat sederhana dan praktistentunya bagi kita-kita yang tidak suka dengan keribetan..,
Banyak situs-situs yang memberikan bagaimana cara memasang read more tapi kebanyakan dari mereka memberikan cara memasang read more yang manual yang harus menentukan sendiri berapa panjang teks yang akan ditampikan pada halaman pertama tentu bagi orang yang awam dan gak mau repot akan merasa terbebani. Oleh karena itu, pada saat ini bang wahid akan mencoba berikan trik memasang read more yang otomatis..,
Langsung saja ya bagi yang berminat dapat melakukan trik di bawah ini..,
1. Login ke akun blogger anda
2. Klik rancangan
3. Klik edit html
4. Centang pada Expand Widget Template
5. Cari kode </head> atau ketik control+ F kemudian ketikkan </head> pada kolom pencarian dengan kemudian masukkan script di bawah ini tepat diatas kode tersebut.

<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[
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>

6. Cari dan ganti kode <data:post.body/> dengan semua kode dibawah 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'>READMORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


Keterangan :

1. var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
2. summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
3. summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
4. img_thumb_height = 120;: Tinggi thumbnail dalam ukuran piksel;
5. img_thumb_width = 120;: Lebar thumbnail dalam ukuran piksel;
6. READMORE-: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, Anda bisa menghapus code script ini .

Selesai
Klik Simpan/Save Template
Kemudian tinggal hasilnya dengan cara membuka blog anda..,semoga berhasil..!!

Share

Like

G+

Tweet

Tweet

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di IPMAWANKU