Readmore otomatis sangat berguna banget untuk yang suka ngeblog,karena pada saat kita posting sebuah artikel, kita harus memotong artikel tersebut dihalaman utamanya untuk tidak menapilkan semua postingan kita, karena apabila kita menampilkan semua hasil postingan kita, maka blog kita akan menumpuk di halaman utamanya.. coba bayangkan kalo artikel yang akan kita posting sebanyak 10 lembar file di ms.word?? pasti gak kebayangkan panjangnya seperti
apa..
Dan kalo kita gunain Readmore yang secara manual, maka akan memperlambat kinerja kita pada saat ngeblogs, karena kita membagi 2 postingan secara manual.. Jauh lebih ribet kan di bandingkan dengan menggunakan Readmore secara otomatis??
Nah oleh karena itu, kita gunakan Readmore secara otomatis, karena agar mempermudah kinerja kita saat memposting sebuah artikel..
Langsung aja yah :
1. Pertama Login di Blog kalian.
2. klik design atau perancangan.
3. klik Edit HTML.
4. klik Expand Widget Templates.
5. Copy kode di bawah ini, Paste di atas kode <head>
<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 450; summary_img = 360; img_thumb_height = 120; img_thumb_width = 150; </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>
6. Untuk kalian yang sudah pernah menggunakan Readmore versi lama (Manual), sebaiknya kalian kembalikan dulu kodenya seperti semula, caranya hapus kode dibawah ini yang berwarna hijau. Sesuaikan dengan template kalian, karena setiap template berbeda - beda :
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
Sehingga kalian hanya memiliki 1 buah <data:post.body/>
7. Lalu hapus kode dibawah ini :
<data:post.body/> atau <p><data:post.body/></p>
8. Dan gantikan dengan kode berikut ini :
<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 == "item"'><data:post.body/></b:if>
Kode yang berwarna hijau bisa kalian ganti dengan Baca Selengkapnya..
9. Terakhir Save Template.
Catatan :
* Summary_noimg = 450 --> Untuk tinggi postingan tanpa gambar.
* Summary_img = 360 --> Untuk tinggi postingan dengan gambar.
Contoh Hasil :
Kritik dan saran kirim aja di komentar saya..
Thanks n Good Luck..
No comments:
Post a Comment
kritik dan saran kirim aja disini..