Membuat Read More Part 02
Selamat siang sahabat blogger hemmm badan rasa nya masih pegel-pegel dan capek banget, karena habis kerja seharian hehehe mumpung ada luang waktu jadi adit pergunakan sejenak untuk memposting sebuah artikel tentang membuat readmore wahhh belum selasai agaknya hehehehe wah ini yang ke dua sahabat untuk yang auto read more.. oke langsung untuk masalah pembahasan ini kita lanjut ke TKP....
Langkah-langkahnya:
1. Masuk ke dahboard >> Design/Rancangan >> Edit HTML. Jangan lupa centang 'Expand Widget Templates'. Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada kesalahan.
2. Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F)Untuk pencarian cepat:
<!-- Auto read more script - http://blog-t4belajarku.blogspot.com/- Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</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(thumbnail_mode == "yes") {
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>
<!-- Auto read more script - http://blog-t4belajarku.blogspot.com/- End -->
Yang berwarna merah adalah jumlah dan ukuran tampilan, summary_noimg=jumlah karakter tanpa gambar, summary_img=jumlah karakter dengan gambar, sedangkan img_thumb_height dan img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan.
3. Kemudian cari <data:post.body/> (gunakan Ctrl+F untuk pencarian cepatnya), dan GANTI dengan:
<!-- Auto read more -http://buka-rahasia.blogspot.com- Start -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read More...</a>
</b:if>
</b:if>
<!-- Auto read more -http://buka-rahasia.blogspot.com- End -->
Ganti Read More... dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan gambar, ganti tulisan Read More tersebut dengan code dibawah ini:
<img border='0' src='url (direct link) gambar readmore'/>
Ganti url (direct link) gambar readmore dengan alamat url dimana anda mengupload dan menghosting gambar.
Baiklah sahabat blogger tercinta kiranya cukup segitu dulu deh yang adit kasih hari ini karena adit akan melanjutkan sebuah pekerjaan yang harus di selesaikan hari ini juga hemmm karena belum kelar merakit komputer nya mana lagi banyak yang pesan serta service jadi pusing deh kepala nya harus membagi waktu sana dan sini hehhehe
Selamat berjuang dan berkarya untuk seluruh sahabat blogger sejati di tanah air indonesia ini.
Categories:
Tips Blog
0 komentar:
Posting Komentar