Hay sobat blogger,. Pada
kesempatan kali ini saya akan berbagi tutorial sedikit kepada kalian, mengenai Cara Buat ReadMore Otomasti di Blog. Saat kalian
menggunakan template bawaan dari blogger belum ada Readmore otomatisnya
kalian harus membuat Readmore manual di postingan, nah pada kali ini
saya akan berbagi sedikit bagaimana cara membuat Readmore otomatis di blog sobat, oke langsung saja kita praktekkan. ikuti intruksi yang ada dibawah.
- Pertama masuk dulu ke akun blogger kalian masing - masing
- Lalu klik menu opsi dan pilih Template
- Klik Edit html
- jika ada peringatan, klik saja lanjut
- Dan Jangan lupa Centang Expand Widget Template
- Selanjutnya cari kode </head>, untuk mempermudah pencarian Tekan CTRL + F untuk mencari kode itu
- Setelah ketemu kode </head>, lalu letakkan kode di bawah ini tepat di atas kode tadi
<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>
- Langkah selanjutnya adalah mencari kode <data:post.body/>. Bila sudah ketemu, ganti kode tersebut dengan kode di bawah 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:right;padding-top:20px;'>
<a expr:href='data:post.url'> <b>
readmore</b> »»  
</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
- Jangan lupa sobat Klik tombol "Simpan template".
- var thumbnail_mode = "float"; adalah letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
- summary_noimg = 250; ialah jumlah karakter yang akan ditampilkan di posting tanpa gambar atau thumbnail;
- summary_img = 250; merupakan jumlah karakter yang akan ditampilkan di posting dengan gambar atau thumbnail;
- img_thumb_height = 120; yaitu tinggi thumbnail dalam ukuran pixel;
- img_thumb_width = 120; artinya lebar thumbnail dalam ukuran pixel;
- readmore merupakan tulisan readmore yang dapat diganti misalnya dengan “Baca Selengkapnya” dan apabila Sobat tidak ingin menampilkan judul dibelakang Readmore, Sobat dapat menghapus kode skrip ini .
0 komentar:
Posting Komentar