Auto Read More dengan Thumbnail

In Web

Auto Read More dengan thumbnail, adalah solusi atau bisa dikatakan Blogger hacks untuk menampilkan fungsi read more di blog. Bahkan script ini menampilkan thumbnail gambar, baik itu disimpan di awal, tengah atau akhir. Cotohnya kaya di blog ini :

Langsung aja langkahnya :

1. Login ke Blogger. Dasbor > Rancangan > Edit HTML, centang “Expand template widget

2. Simpan kode dibawah ini, tepat sebelum

</head>


<script type='text/javascript'>var thumbnail_mode = "no-float" ;
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>

 

Kode yang dapat di rubah :

summary_noimg = <span style="color: rgb(204, 0, 0);">430</span>; (karakter yang ditampilkan tanpa gambar)


summary_img = <span style="color: rgb(204, 0, 0);">340</span>; (karakter yang ditampilkan dengan gambar)


img_thumb_height = <span style="color: rgb(204, 0, 0);">100</span>; (ukuran tinggi thumbnail gambar)


img_thumb_width = <span style="color: rgb(204, 0, 0);">120</span>; (ukuran lebar thumbnail gambar)

// < ![CDATA[
createSummaryAndThumb(“summary”);
// ]]> read more “”

3. Cari kode <data:post.body/>, dan ganti dengan kode ini :

<b:if cond='data:blog.pageType == "static_page"'>

<data:post.body/>
<b:else/>
<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'> <span style="color: rgb(204, 0, 0);">read more "<data:post.title/>"</span></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

4. Save.

Selamat mencoba

source : www.kangismet.com

Related Search

Tags: #data #post

Anda sedang membaca artikel tentang Auto Read More dengan Thumbnail. Silahkan baca artikel Be Log tentang Web lainnya. Semoga bermanfaat ...

Hapus Post Lama di WordPress Melalui PHPMyadmin
Hapus Post Lama di WordPress Melalui PHPMyadmin
Sekelumit tentang perintah langsung di PHPMyadmin sudah
Bypass Internet Positif
Bypass Internet Positif
Buat agan-agan yang sudah capek dengan Internet
Redirect Artikel Pada Domain Lama Ke Domain Baru dengan .htaccess
Redirect Artikel Pada Domain Lama Ke Domain Baru dengan .htaccess
Caranya cukup simple, buat file .htaccess pada
Leverage browser caching for Nginx
Leverage browser caching for Nginx
Apa siy Leverage browser caching ? Ini penjelasan

Top