07 Julai 2013

Tutorial #34: Letak Butang Read More pada Blog

Tutorial #: Letak Butang Read More pada Blog

Salam Blogging.

kali ni ter'rajin' lak aku mengupdate tutorial.. Maklumlah blog dalam renovation since aku guna blog template yang simple jer....

http://4.bp.blogspot.com/-GhdPht_cV64/Udkmh3EubzI/AAAAAAAACdg/7pTvd1f0S6A/s1600/read+more+button+copy.png


Sebenarnya aku suka dengan butang 'Read More' ni sebab ia menjadikan blog ni lebih kemas, dan boleh letak entries 4-5 tanpa perlu scroll banyak-banyak... Tapi template blog yang basic ni takde butang 'Read More' ni... kena la buat manual sendiri sambil boleh asah bakat mengedit HTML code blogger ni....[Sumber Rujukan dari Blog English di SINI]
Ni yang baru aku edit... korang boleh la guna yang ni yer.....

Jadi, aku terangkan dalam Bahasa Melayu untuk lebih mudah faham yer...

1. Login akaun Blogger korang >> Pergi ke Dashboard >> Template >> Edit HTML  & Expand Widget HTML (Tapi Blogger baru ni takde, abaikan jer.... )
SILA BACKUP TEMPLATE ANDA SEBELUM MEMULAKAN KERJA MENGEDIT CODE TERSEBUT...
2. Tekan CTRL+F untuk Search dalam template tu dan cari Code </head> 
3. Copy Code di bawah dan Paste-kan SEBELUM Code </head>.tu

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

Nota:
summary_ noimg= 500; >> Panjang Rumusan jika Post TIADA Gambar/ Thumbnail.
summary_img = 500; >>Panjang Rumusan jika Post ADA Gambar/ Thumbnail
null_thumb_height = 120; >> Tinggi Thumbnail dalam pixels.
null_thumb_width = 120; >>Lebar Thumbnail dalam Pixels.

4. Tak habis lagi!! Kemudian cari code berikut: <data:post.body/> dan gantikan dengan code di bawah...

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='jump-link' style='font-weight:bold;padding:5px;float:right;text-align:right;'>
<a expr:href='data:post.url'><img alt='Baca lagi' src='http://4.bp.blogspot.com/-GhdPht_cV64/Udkmh3EubzI/AAAAAAAACdg/7pTvd1f0S6A/s1600/read+more+button+copy.png'/></a></span>
<div style='clear: both;'/>
</b:if>
</b:if>

NOTA:
1. Code tersebut ada berdekatan dengan code ni:
<b:if cond='data:blog.metaDescription == &quot;&quot;'> <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. --> <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>

2. GAMBAR: Boleh gantikan LINK MERAH dengan Link Gambar korang nak..
TEXT/ AYAT: Kalau taknak letak gambar, gantikan sepanjang code tu

<a expr:href='data:post.url'><img alt='Baca lagi' src='http://4.bp.blogspot.com/-GhdPht_cV64/Udkmh3EubzI/AAAAAAAACdg/7pTvd1f0S6A/s1600/read+more+button+copy.png'/></a></span>

dengan code ni:

<a expr:href='data:post.url'>Continue Reading...</a></span>
Nota: Gantikan 'Continue Reading...' dengan ayat korang sendiri....
  
 

0 $type={blogger}:

Catat Ulasan

Terima kasih kerana sudi baca.
Segala penulisan dan penerbitan di dalam blog ini berdasarkan kepada pengalaman, pandangan dan pemahaman peribadi blogger ismiqbal sahaja. Tahap pemikiran manusia tidak sama dan mungkin boleh buat pembaca terasa hati kerana ketidaksamaan pendapat.