3 November 2013

Membuat Readmore/Selengkapnya Otomatis Diartikel/Postingan Blogger

Hari ini yang suka update posting-posting, jangan asal positn lho ya karena sobat-sobat lain juga pengen baca artikel/postingan yang ada didalam blog yang dituju. Ok, siapa sih yang sekarang belum tahu cara membuat agar artikel dapat diringkas dan bisa otomatis menjadi tulisan baca selengkapnya, Readmore, dan lain-lain. Tips kali ini ane akan mengupas tuntas mengenai cara Membuat Readmore secara Otomatis di Blogger. Disini saya akan menjelaskan cara membuat readmore otomatis secara detail sehingga blogger pemula akan dapat menerapkan dan membuatnya.


Hello, hari gini masak belum tahu.. hehe.. Ok, Manfaat readmore tersebut yaitu untuk memendekkan serta agar terlihat rapi dalam artikel yang panjang, jadi postingan akan terlihat setengah dari bagian keseluruhan artikel sobat, dan pastinya akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.



Inilah cara membuat readmore secara otomatis diblog dengan gambar, Silahkan buka template anda. Lalu Pilih: TEMPLATE lalu EDIT html.

1. Coba cari Kode </head>
2. Copy pastekan kode dibawah ini tepat di atas kode </head> tadi

Ini kodenya:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>    
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, (for blogspot)
by: http://trikseosimple.blogspot.com/
********************************************/
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>

3. Sebelum lanjuuuutt, Save dulu Template sobat ya.
Kemudian scroll template anda kebawah cari kode seperti berikut:

4. Cari kode bernama “Blog Post”


Jika sudah ketemu kode yang seperti di atas lalu klik anak panah kecil warna hitam sebelah kiri.
Setelah tanda panah kecil lalu klik dan pasti akan ada tampilan bernama
"POST' VAR='POST'".
Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.
lalu akan terbuka kode kode yang lain.

5. Lalu scrol ke bawah ya dan cari kode 

<data:post.body/>
 Apabila sudah ketemu lalu hapus kode diatas dan ganti dengan 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>

Ok, selesai. Lalu Klik SAVE dan SIMPAN coba lihat hasilnya.


Semoga bermanfaat apa yang saya share’kan ya sobat, Terimakasih sudah berkunjung diblog ane..

Tidak ada komentar:

Posting Komentar