Dengan memasang Readmore Otomatis, kita tidak usah lagi memenggal kalimat dengan memasukkan " Insert Jump Break " Lagi , Karena secara otomatis nantinya akan dipenggal sendiri .
Langsung saja kita ke cara memasang readmore Otomatis .
Sigin di draft blogger
Dalam dasbor masuk Tata letak --> Edit HTML
Centang Expand Template Widget
Readmore otomatis ini menggunakkan kode javascript, jadi copy kode javascript dibawah ini :
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 300;summary_img = 250;
img_thumb_height = 50;
img_thumb_width = 50;
</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+'" /></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Paste kan diatas kode ini </head>, Silahkan di save dulu .
Sekarang Cari kode ini :
<p><data:post.body/></p>
biasanya disimpan diatas ini <!-- clear for photos floats -->Ganti kode <p><data:post.body/></p> dengan kode dibawah ini :
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id' style='text-align: justify;'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<a expr:href='data:post.url' style='float:right;padding-top:10px;'>[Read More...] - <data:post.title/></a>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
</b:if>
Jangan lupa jika beres memasukkan kode diatas di save.
Sedikit penjelasan :
var thumbnail_mode = "float"; ( float: letak thumbnail berada di kiri atau jika tidak silahkan ganti dengan " no-float " ).
summary_noimg = 300; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 50; (tinggi Thumbnail dalam pixel)
img_thumb_width = 50; ( lebar Thumbnail dalam pixel)
Kemudian jika kita ingin menghilangkan judul post didepan Readmore, tinggal menghapus kode ini :
<data:post.title/>
Silahkan sesuaikan yang menurut anda cocok dengan lebar template anda.
**** Semoga Bermanfaat ****
7 komentar:
mantap Gan... Akhirnya ketemu juga cara untuk justify code ini....
syukron ya....
salam kenal....
Sama-sama, salam kenal juga dan makasih sudah berkunjung keblog ku...;)
mksh gan skrg blog q sdh bs pake readmore ente thanks bgt ych..
i love your bloggggggggg :x
terima kasih atas info bagusnya...........
ini baru yang ane cari2 selama ini ... ;)
sip artikelnya
thanks justify nya !!
Muantaap bro informasinya, sangat transparan dan detailnya mantap sehingga bisa belajar membuat template sendiri.
Posting Komentar
Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.