Tutorial Membuat Auto Read More di Blog

Posted by Alimuddin Muhammad Sunday, February 26, 2012 0 comments



Auto Read More merupakan Read More otomatis dengan fungsi yang canggih. Kenapa canggih? Karena Auto Read More dilengkapi dengan pengaturan jumlah karakter yang tampil pada home page blog Anda. Ada 2 pengaturan jumlah karakter yaitu jumlah karakter Read More dengan gambar dan jumlah karakter Read More tanpa gambar.

Kecanggihan yang lain yaitu Read More ini memiliki image thumbnail yang menampilkan gambar pertama pada postingan blog Anda dan memunculkannya pada awal paragraf.


Jika Anda belum mengetahui apa itu Auto Read More, Anda bisa melihat read more pada home page dari blog Kumpulan Tutorial Ngeblog. Itu merupakan Auto Readmore dengan image thumbnail.

Udah ngga sabar nih menunggu tutorial cara membuat auto read more?? Hehehehehe...

Silakan Anda simak cara membuat auto read more berikut ini

Langkah Pertama

Kita Login ke akun Blogger milik anda > Tata Letak > Edit HTML. Klik Download Full Template untuk membackup template blog Anda.

Beri tanda centang pada "Expand widget template" kemudian CoPas kode berikut ini di atas kode </head> (tekan Ctrl+F untuk mempermudah dalam pencarian kode)
<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, 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>

Anda bisa memodifikasi kode berikut ini
var thumbnail_mode = "float"; 
summary_noimg = 250; 
summary_img = 250; 
img_thumb_height = 120;
img_thumb_width = 120; 
Ganti angka summary_noimg untuk mengatur jumlah karakter yang tampil pada kutipan artikel tanpa gambar.
Ganti angka summary_img untuk mengatur jumlah karakter yang tampil pada kutipan artikel dengan gambar.

Ganti angka img_thumb_height untuk mengatur tinggi gambar yang tampil pada kutipan artikel.

Ganti angka img_thumb_width untuk mengatur lebar gambar yang tampil pada kutipan artikel.

Langkah Ke 2

Cari kode <data:post.body/> lalu ganti dengan kode berikut ini


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Ganti kata yang berwarna biru dengan left untuk menampilkan link readmore di bagian kiri dan right untuk menampilkan link readmore di bagian kanan. 

Ganti kata yang berwarna merah dengan kata yang Anda suka. Misalnya Baca Selengkapnya atau Baca Selanjutnya.

Langkah Ke 3

Klik tombol Preview untuk melihat hasil. Jika hasil sudah sesuai, klik tombol Simpan.




terima kasih telah datang di blog saya semoga tutorial ini dapat membatu, bermanfaat dan menambah ilmu untuk anda 
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Tutorial Membuat Auto Read More di Blog
Ditulis oleh Alimuddin Muhammad
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://alie94.blogspot.com/2012/02/tutorial-membuat-auto-read-more-di-blog.html. Terima kasih sudah singgah membaca artikel ini.

0 comments:

Post a Comment

Copyright of alie94.