Social Icons

twitterfacebookgoogle pluslinkedinrss feedemail

Pages

Sabtu, 24 November 2012

cara memasang readmore automatis pada blog

HELLO SOBAT S7 Setelah beberapa saat saya hengkang dari dunia blogger sekarang saatnya saya kembali lagi hehe , pasti dah kangen dengan postingan d blog ini , kali ini saya akan berbagi bagaimana cara memasang readmore automatis , ADA YANG NGGA TAU APA ITU READMORE AUTOMATIS ?
aduh dari mana aja mas , berikut SS (screen shoot) dari yang namanya readmore automatis


sudah tw kan sobat apa itu readmore automatis , dengan sobat memasang script ini sobat ngga bakalan liat lagi tuh postingan sobat yang wuuussss panjang bener turun , sobat bisa mengatur berapa karakter kata yang akan muncul pasa setiap postingan sobat , pada contoh di atas saya menggunakan 250 karakter kata jadi ngga terlalu panjang hehe

ok sobat ngga usah basa basi berikut cara memasang readmore automatisnya


-Login ke blogger dengan ID sobat.

-Pilih Rancangan atau Tata Letak.

-Pilih Edit HTML.

-Centang tulisan "expand template widget".

-Lalu cari kode </head> :   untuk mempermudah pencarian tekan F3.

-Lalu masukkan code di bawah ini tepat di atas  </head>

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

Kemudian sobat  cari kode <data:post.body/>
Ganti kode <data:post.body/>  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 class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

Kemudian Save Template.
untuk keterangan readmorenya...
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 pixel;
img_thumb_width = 120;: Lebar thumbnail dalam ukuran pixel;
READMORE-: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, sobat bisa menghapus code script ini .

Sekian dlu Dari saya jika soba ingin tutor blog lagi silahkan berkomentar ^_^


Tidak ada komentar:

Posting Komentar

jika sobat menemukan link yang rusak atau error tinggalkan komentar kami akan melakukan updated terhadap link yang rusak tersebut