Malem prend, kali saya mo sedikit share tentang membuat readmore secara otomatis dalam postingan kita. Readmore sendiri berguna salah satunya meringankan blog kita jadi postingan artikel kita gak puanjangggg kaya rel kereta. Ok, kita langsung aja ya….
Langkah-langkah pembuatan Read More Otomatis :
- Masuk ke akun Blogger teman-teman
- Klik Rancangan >> Edit HTML [saran : download template kalian dulu untuk mencegah apabila terjadi kesalahan dalam modifikasi template]
- Centang dulu Expand Widget Template
- Kemudian cari kode </head> [untuk mempermudah pencarian tekan Ctrl+F], kemudian copy script berikut dan letakkan tepat diatas kode </head> :
<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[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Fais
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>
Keterangan :
1. summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar
2. summary_img = 340; adalah tinggi potongan artikel dengan gambar
3. img_thumb_height = 100; adalah ukuran tinggi thumbnail
4. img_thumb_width = 120; adalah ukuran lebar thumbnail
- Selanjutnya cari kode <data:post.body/> lalu ganti tag <data:post.body/> tersebut dengan kode script di bawah ini :
<b:if cond='data:blog.pageType != "item"'>
<div style=' text-align: justify;' 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'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Ok, kata readmore bisa kalian ganti menjadi : selanjutnya, baca selengkapnya atau apa aja deh, tapi kalian bisa juga diganti dengan gambar. Kalau belum punya alamat gambarnya, neh ada alamatnya :
Kodenya adalah :
<img src="http://i622.photobucket.com/albums/tt309/kokobota/G3YM5x1267976206.gif" /> |
Kodenya adalah :
<img src="http://i622.photobucket.com/albums/tt309/kokobota/j4FIbe1267977517.gif" /> |
Kodenya adalah :
<img src="http://i56.tinypic.com/15etimq.gif" /> |
Kodenya adalah :
<img src="http://i56.tinypic.com/14udj5v.gif" /> |
Kodenya adalah :
<img src="http://i53.tinypic.com/2nicx6t.gif" /> |
Kodenya adalah :
<img src="http://i55.tinypic.com/2jer3ly.png" /> |
Kodenya adalah :
<img src="http://i51.tinypic.com/zu4c4o.gif" /> |
Kodenya adalah :
<img src="http://i785.photobucket.com/albums/yy131/djnand/readMorehitam.png" /> |
Kodenya adalah :
<img src="http://i785.photobucket.com/albums/yy131/djnand/but_moreinfoorange.gif" /> |
Kodenya adalah :
<img src="http://i785.photobucket.com/albums/yy131/djnand/Button_ReadMore_Reflective.jpg" /> |
- Kalau sudah memasukkan salah satu alamat gambarnya simpan tamplate-nya.
*diambil dari berbagai sumber
Enjoyed reading? Share this
0 komentar:
Posting Komentar