Cara Memasang Read More Pada Blog

Posted by Rifaiy On 2 komentar

Trutorial ini di khususkan untuk templet yang tidak ada Read More nya, kalau sudah ada yang lebih baik jangan. Tapi bagi yang bisa mengeditnya juga silahkan, barang kali ada yang lupa. Kali ini saya akan memberitahu cara memasang  Read more tanpa .js hanya mengetikan  manual, dan tidak terlalu banyak. Menurut saya ini memang cukup mudah di pasang apalagi tidak memerlukan file .js , jadi kita tisak perlu hosting2 lagi untuk mengupload file .js.



Sebenarnya cara memasangnya cukup bikin pusing, karena ada beberapa yang sama, tapi hasilnya cukup memuaskan. Sebelum kamu mencoba memasang Read More lebih baik kamu Backup dulu templet kamu untuk jaga2 supaya kalau terjadi kesalahan yang cukup parah bisa di kembalikan. Baiklah langsung saja ini dia caranya:
  1. Pertama kamu buka blog kamu / masuk ke blogger.com,
  2. Setelah berada di Dasboad pilih Rancangan,
  3. Setelah kamu berada di Rancangan pilih Edit HTML,
  4. Setelah berada di bagian Edit HTML kamu beri tanda ceklis (v) pada Expand widget template,
  5. Setelah itu cari kode </head> dengan menekan Ctrl+F agar lebih cepat dan ketikan </head>,
  6. Setelah ketemu kamu salin kode di bawah ini dan letakan di atas kode </head>:

<script type="text/javascript">
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 100;
img_thumb_width = 100;
</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>

Masi Melanjutkan:
Masih pada halaman EDIT HTML, Setelah itu temukan kode seperti dibawah ini:
 <data:post.body> dengan cara menekan tombol Ctrl+F dan ketikan <data:post.body> kemungkinan kamuakan menemukan 2 <data:post.body> kemudian kamu ganti kode <data:post.body> dengan semua kode dibawah 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 == &quot;item&quot;'><data:post.body/></b:if>

Setelah itu Simpan dan lihat hasilnya :)

Keterangan:
var thumbnail_mode = "float" ; (kita dapat memutuskan apakah di read more terdapat gambar thumbnail "float" atau jika tidak menginginkan ada gambar silahkan ganti dengan "no-float"
summary_noimg = 250 ; (Menetapkan berapa banyak karakter texs yang akan ditampilkan di posting tanpa gambar)
summary_img = 250 ; (Menetapkan berapa banyak karakter texs yang akan ditampilkan di posting dengan gambar thumbnail)
img_thumb_height = 100 ; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 100 ; (Thumbnail 'lebar dalam piksel)

Selamat mencoba, Sekian dari saya, semoga bermanfaat...