Rabu, 20 April 2011

Membuat Read More dengan Thumbnail pada Postingan Blogger

Posted at 17.01 by thegudangupil
 Langkah-langkahnya seperti berikut :
  • Pertama setelah masuk pada Dashboard akun Blogger kemudian akses menu Rancangan >> Edit HTML.
  • Kedua jangan lupa centang opsi Expand Template Widget agar seluruh kode HTML yang ada pada template blog kita muncul, sehingga akan mempermudah kita saat mencari kode HTML yang kita tuju dan dinginkan.
  • Ketiga cari tag </head> dan simpanlah kode di bawah ini diatas kode </head>.
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 180;
img_thumb_width = 200;

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


  • Keempat carilah kode <data:post.body/> lalu gantilah kode tersebut dengan kode dibawah 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:right;padding-top:20px;'><a expr:href='data:post.url'> Baca Selanjutnya "<data:post.title/>"</a></span>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>


    Setelah itu Save Template

    Bila semua langkah telah dilakukan maka sampai sini seharusnya berhasil
    *Catatan
    untuk kode ini kita dapat merubah tergantung keinginan kita
    • summary_noimg = 430; adalah potongan atau ringkasan artikel postingan tanpa gambar/thumbnail
    • summary_img = 340; adalah  potongan ringkasan artikel postingan dengan gambar/thumbnail
    • img_thumb_height = 180; adalah ukuran tinggi dari gambar/thumbnail
    • img_thumb_width = 200; adalah ukuran lebar dari gambar/thumbnail
     Selamat Mencoba! 

    Related Post



    Tidak ada komentar:

    Posting Komentar