Wednesday, July 25, 2012

Tutorial 137 : Auto Read More



Assalamualaikum dan selamat berpuasa semua?

Sebelum ini aku ada bagi tutorial Cara Membuat Read More tapi kali ini nak bagi tutorial read more yang lagi mudah, tak perlu nak main coding semasa post entry, sangat leceh lagi melecehkan kan? So kali ini ada tutorial yang sangatlah senang lenang. Tak payah nak ejas-ejas coding kat entry box kan. Jom, aku ajarkan 2 versi, bergambar dan tidak bergambar. Jom-jom..

1. Sign in Blogspot > Design > Edit Html > Tick Expand Widget Templates

2. Copy dan cari code di bawah, Ctrl F sahaja dan paste code di bawah dalam kotak find then tekan enter!

</head>

3. Copy code di bawah dan paste di atas code yang korang cari tadi.

<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 Anhvo
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
summary_noimg = 250 adalah jumlah ringkasan tulisan jika tidak ada gambarnya
summary_img = 250 adalah jumlah ringkasan tulisan jika ada gambarnya
img_thumb_height = 120 adalah tinggi gambar
img_thumb_width = 120 adalah lebar gambar
#kalau tak payah edit pun tak pe, sebab dah cun.

4. Copy dan cari lagi code di bawah,  Ctrl F sahaja

<data:post.body/>

5. Dah jumpa? Korang padam/delete code tersebut dan gantikan/replace dengan code di bawah.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span style='float:right'><a expr:href='data:post.url'>Read More... </a></span>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

6. Kalau korang nak tukar kepada gambar padam perkataan Read More... dan gantikan kepada code di bawah.


<img alt='Reply To This Comment' src='URL GAMBAR ANDA'/>


7. Letakkan URL GAMBAR ANDA yang sesuai.


8. Dah Preview, menjadi? Save je. Tak menjadi tu kena ikut step slow-slow dan masih tak menjadi memang tak sesuailah widget ni untuk korang.




URL gambar Read more button untuk korang

 http://4.bp.blogspot.com/-y88SwuhrNWk/UA-0yMG6vzI/AAAAAAAADn0/Oj6tfEAspvM/s1600/bicarafarahreadmore1.png


 http://2.bp.blogspot.com/-flVi-X7eJJ8/UA-0yyxFH7I/AAAAAAAADn8/0UNCMdaaDHk/s1600/bicarafarahreadmore2.png


 http://3.bp.blogspot.com/-vEWhSlgrfMY/UA-0zkTxWiI/AAAAAAAADoE/PGVjRpCmWdc/s1600/bicarafarahreadmore3.png


 http://1.bp.blogspot.com/-qTL5TnYloBs/UA-00XElDcI/AAAAAAAADoM/yRsd0PYiVjE/s1600/bicarafarahreadmore4.png


 http://3.bp.blogspot.com/-E2X_78yxGcY/UA-006_EcwI/AAAAAAAADoU/-7JCN3AFkfo/s1600/bicarafarahreadmore5.png


 http://2.bp.blogspot.com/-oYSKDOYZhOg/UA-01TYHnBI/AAAAAAAADoc/4fL1b9EXl1k/s1600/bicarafarahreadmore6.png


 http://3.bp.blogspot.com/-9mY-IkwDRiY/UA-01zn4S9I/AAAAAAAADok/OitOLRaW4m0/s1600/bicarafarahreadmore7.png


http://1.bp.blogspot.com/-Szlwory7sZg/UA-02lY5nwI/AAAAAAAADos/PsSgHfqKpqQ/s1600/bicarafarahreadmore8.png

# 8 warna utama untuk korang, kalau nak lagi cun rajin-rajinlah design sendiri ye.

Bye!



8 comments:

  1. nice one, tak payah susah2 tekan banyak2 untuk baca entry yang lain. All in one pages, nak try la..

    ReplyDelete
  2. bole x bg taw cm ne nk wat contest n give away?

    ReplyDelete
  3. adik manis..mana nak letak ye kot url tuh :)

    ReplyDelete
  4. x jumpa la code ni :



    keciwa.......=(

    ReplyDelete
  5. Kenapa nampak macam panjang sangat jerk step die. takut nak gune. takut template rosak. Auto read more ni kegunaan dia tuk ape ?

    ReplyDelete
  6. nape sy punye x de Tick Expand Widget Templates

    sy masih lg merangkak2...sgt2 newie dlm dunia blogging...mhon tunjuk ajar sis

    tq

    ReplyDelete
  7. Yeay... dah jadi... tqvm cik Nurfarah

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Terima kasih lepak sini, nanti datang lagi yer..
Sayang Korang...





Related Posts Plugin for WordPress, Blogger...
 
Copyright © 2016 Blog Cik Nurfarah. All Rights Reserved. Designed by Blog Cik Nurfarah.