Cara Buat Read More Pada Blog - SISHAWA DESIGN
test banner

Hot

10.3.17

Cara Buat Read More Pada Blog

"Kalau ada masa boleh tak ajarkan cara nak buat read more contohnya macam dekat blog sis?" tutorial ini di minta oleh Aireen dan sis yakin pasti ada blogger lain yang berminat untuk tahu bagaimana untuk buat post style read more ni.

Kat sini sis kongsikan cara-caranya. Cara yang sis ajar ni memang cara yang selalu sis gunapakai semasa proses edit blog. Antara blog yang sudah sis siapkan dengan style readmore ni adalah http://mulan-sahbanu.blogspot.my/ dan https://pracomelkusksl.blogspot.my/

Macam biasalah, langkah awal :

- Login ke akaun blogger >> Dashboard >> Template / Theme >> Edit Html

- Klik cursor pada mana-mana bahagian di dalam kotak kod Html dan tekan Ctrl + F serentak untuk membuka kotak search

Sekarang copy dan paste kod di bawah ini ke dalam kotak search dan tekan Enter.
<data:post.body/>
Kod <data:post.body/> yang telah di cari ni bukan hanya ada satu tau. Sesetengah template ada dua kod <data:post.body/> dan ada juga template yang punya kod ini sebanyak 3 kali. Pastikan berhenti pada kod yang ke dua.

Apabila telah jumpa dan betul-betul yakin, sekarang padamkan kod <data:post.body/> tersebut dan gantikan dengan semua kod di bawah ini.
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script> <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</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>
 Step seterusnya, copy dan paste kod di bawah ini pula ke dalam kotak search dan tekan Enter.
</head>

Bila dah jumpa,  copy semua kod di bawah ini dan paste kan betul-betul di atas (above) kod  </head> yang telah di cari tadi.
<script type='text/javascript'> posts_no_thumb_sum = 490; posts_thumb_sum = 400; img_thumb_height = 160; img_thumb_width = 180; </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, pURL, pTITLE){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = posts_no_thumb_sum; if(img.length>=1) { imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>'; summ = posts_thumb_sum; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <style type='text/css'> .post-footer {display: none;} .post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;} .readmore a {text-decoration: none; } </style> </b:if> </b:if>
Sekarang preview dulu, jika tiada apa-apa error, bolehlah klik Save!

Selamat mencuba. Terima kasih :)

4 comments:

  1. Terbaik sis... ilmu terpendam dah keluar balik kan... hihi...

    ReplyDelete
  2. wah..sis dah buat tutorial lah..

    ReplyDelete
  3. Masa mula mula buat blog dulu....mmg selalulah search tutorial nak tambah itu ini dlm blog...sekarang dah jarang dah....

    ReplyDelete
  4. Wahhh, blog mai takde auto read more ni, mai tak suka.hahahaha.

    ReplyDelete