CARA MEMBUAT READMORE PADA BLOGGER

CARA MEMBUAT READMORE PADA BLOGGER | Pada kesempatan siang kali ini saya akan memcoba berbagi pada agan-agan semuanya tentang bagaimana cara membuat Readmore yang Valid, lho kog Valid sih? Yah karena teknik ini sudah saya terapkan kebeberapa blog saya dan hasilnya selalu sukses,hehehehe, terus bagaimana donk cara bikin Readmorenya? Mau tahu yuck simak penjelasannya dibawah ini :

Adapun langkah-langkah Cara Membuat Readmore Pada Blogger adalah sebagai berikut :
1. Login ke Account Blogger Anda;
2. Masuk ke Halaman Edit HTML (Jangan Lupa Ceklist/centang Pada Expand Widget), kemudian di atas kode </head> Letakkan skrip di bawah ini :

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

Langkah Selanjutnya adalah agan-agan Cari kode <data:post.body/>, kemudian agan-agan ganti kode tersebut 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'>READMORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan:

Perlu agan-agan ingat bahwa kode <data:post.body/>  biasanya terletak di bawah kode <div class='post-body'> , untuk mempermudahkan pencarian agan-agan, gunakanlah tombol find (Ctrl + F).

3. Dan teknik yang terakhir adalah Simpan Template agan-agan dan Selesai dech,

Keterangan :

• var thumbnail_mode = "float"; : Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
• summary_noimg = 250; : Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
• summary_img = 250; : Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
• img_thumb_height = 120; : Tinggi thumbnail dalam ukuran piksel;
• img_thumb_width = 120; : Lebar thumbnail dalam ukuran piksel;
• READMORE-<data:post.title/> : Tulisan READMORE bisa diganti misalnya dengan “Baca Lebih Lanjut”  dan lain-lainnya, dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, Agan-agan tinggal menghapus code script ini <data:post.title/>.

Share 'CARA MEMBUAT READMORE PADA BLOGGER' On ...

Anda baru saja membaca artikel yang berkategori Modifikasi Blog dengan judul CARA MEMBUAT READMORE PADA BLOGGER. Anda bisa bookmark halaman ini dengan URL http://codingngeblog.blogspot.com/2013/03/cara-membuat-readmore-pada-blogger.html. Terima kasih!

Ditulis oleh: Unknown - Saturday, March 23, 2013