Cara Mudah Membuat Read More Otomatis Pada Blog


     Hey sob? anda punya blog? pasti sebagian orang mempunyai blog pribadi seperti saya ini, banyak orang yang menginginkan tampilan blog yang dimilikinya itu memiliki tampilan yang enak untuk dilihat atau tampilannya dinamis, tampilan yang simple serta ringan membuat pengunjung tidak sungkan untuk mengunjungi blog anda. Oleh karena itu saya akan membagikan tips cara untuk membuat tampilan blog anda menjadi simple dengan menambahkan fitur Read More pada halaman home page anda.


Read More Otomatis adalah sebuah fitur tambahan untuk blog agar tampilan blog yang dimilikinya terlihat lebih simple, dinamis serta yang terpenting itu ringan. Tidak heran kalau anda melihat blog yang di halaman Home Page nya tidak menampilkan artikel sepenuhnya, melainkan dengan meneruskan artikel dengan mengklik Read More. Oke langsung saja jika anda ingin menembahkan fitur Read More ke blog anda silahkan simak cara ini.


Langkah Menembah Fitur Read More Pada Blog

1. Buka Blogger anda dan pilih elemen Template, lalu klik Edit HTML.

2. Lalu centang Expand Template Widget.

3. Selanjutnya cari kode </head> (gunakan Ctrl+f untuk mempermudah pencarian).

4. Lalu salin coding di bawah ini dan pastekan tepat diatas kode </head>.


<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
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>


5. Setelah kode yang diatas sudah diletakan, selanjutnya cari kode <data:post.body/> dan kemudian ganti kode <data:post.body/> dengan coding yang dibawah ini.


<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;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More</a></span> 
<b:else/>
<data:post.body/>
</b:if>


6. Dan terakhir simpan Tamplate anda dan lihat hasilnya.

7. Selesai.

Oke mungkin itu saja yang bisa saya berikan mengenai artikel ini, semoga dengan apa yang sudah saya berikan ini dapat bermanfaat bagi Anda. Jangan lupa untuk like dan follow akun kami untuk mendapatkan info serta update terbaru dari kami. Jika ada Kesalahan atau ada Pertanyaan serta Tambahan bisa isi pada kolom komentar anda. Terimakasih.

Previous
Next Post »

2 komentar

Click here for komentar
August 21, 2015 at 7:26 PM ×

Lunya salah zra -_- semua yang gua post udah pernah gua test sebelumnya -_-

Balas
avatar
admin

► Dilarang meninggalkan link aktif
► Dilarang komentar yang mengandung sara, pornografi dsb.
► Semoga artikel bermafaat
► Terimakasih sudah berkomentar :)
Out Of Topic Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Powered by Blogger.