TopBottom

Blog Tutorial

About Me

Add your donation here for a better of our service. Thanks!

Berlangganan

Anda Suka Tips Blogger Zacky?
Temukan Kami Di:
Ingin Dapat Artikel Terbaru?
rss Klik disini untuk berlangganan melalui RSS atau terima artikel di email anda dengan cara mengisi form berikut:

Cara Membuat Read More Automatis + Thumbnail (Versi 3)

Original by IFX Adrian | 01 Desember 2009 4 Comments

Hmm.. Setelah versi 1 dan 2, sekarang ada lagi read more versi 3. Kalau di read more versi 1 dan 2, banyaknya abstraksi postingan di atur dari tempat membuat postingan yaitu dengan cara meletakkan abstraksi sebelum kode <span class="fullpost"> (versi 1) atau <span id="fullpost"> (versi 2) dan sisanya sebelum kode </span>. Lain halnya pada read more versi 3 ini yang kita bisa mengaturnya langsung di saat mengedit template kita dengan menentukan jumlah karakter yang akan menjadi abstraksi postingan, inilah yang dinamakan automatis. Selain itu, kita juga bisa menampilkan thumbnail dari gambar pertama postingan. Wow, menarik juga nih! Mau tau gimana caranya?

Berikut Cara Membuat Read More Automatis +Thumbnail:

1. Seperti biasa, login dulu ke akun Blogger anda

2. Pilih Layout > Edit HTML

3. Letakkan kode berikut di di bawah kode </head>


<!-- Read more v3 -->
<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; margin:0px 10px 5px 0px; padding:0; border-right:2px solid #ccc; border-bottom:2px solid #ccc;"><img src="' img[0].src '" width="' img_thumb_width 'px" height="' img_thumb_height 'px"/></span>';
summ = summary_img;
}

var summary = imgtag '<span>' removeHtmlTag(div.innerHTML,summ) '</span>';
div.innerHTML = summary;
}
//]]>
</script>

<script type='text/javascript'>
var thumbnail_mode = "float";
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 125;
img_thumb_width = 120;
</script>
<!-- Read more v3 end -->


Note:
var thumbnail_mode = "float"; = Menentukan posisi thumnail
summary_noimg = 500; = Jumlah karakter bila tidak menggunakan thumbnail
summary_img = 400; = Jumlah karakter bila menggunakan thumbnail
img_thumb_height = 125; =Tinggi thumbnail
img_thumb_width = 120; = Lebar thumbnail

4. Klik Save Template

5. Tetap di Edit HTML, lalu centang Expand Widget Template

6. Cari kode <data:post.body/>, lalu ganti kode tersebut dengan kode berikut:

<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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>



Tulisan READ MORE - bisa anda ganti sesuai keinginan.

7. Save lagi template nya.

Siap deh semunya. Sekarang tinggal anda coba, Ok! Have a nice dream…! Hehehe…!

Jangan lupa kasih komentar ya…

Bagikan Artikel Ini!

<a href="http://instaforex.com/forexcopy_system.php?x=DVXF">InstaForex</a>
Facebook Delicious Digg! Twitter Linkedin StumbleUpon Lintas Berita
Technorati Google Bookmarks Mixx Yahoo! Newsvine Reddit

Artikel Lain Yang Mungkin Anda Baca

4 komentar:

vodevone 12 Desember 2009 10.14  

mkcih bGD bwt infox....:)

me 3 Desember 2010 17.35  

Kok saya malah ilang bagian postingnya

Anonim 15 Juni 2011 09.56  

Ilang Postingnya

Posting Komentar