Beberapa kawan blogger berpendapat readmore akan membuat tampilan rada bagus dan simple. Kalau ane sih berpendapat dengan kita memasang readmore ketika pengunjung tertarik pada salah satu posting di blog kita, berarti dia akan mengklik readmore, secara otomatis aktifitas klik anda akan meningkat. Hal ini merupakan salah satu siasat untuk meningkatkan blog activity. Tentunya hal itu akan meningkatkan pula optimalisasi serv google yang konon kabarnya salah satu faktor mbah google akan mengindex blog anda secara cepat berdasar blog activity. Itu kata kawan-kawan....tapi kalau dipikir masuk akal juga. Bukankah semakin banyak klik blog anda cepat naik ranking. Ok itu gak usah terlalu di pikirkan...intinya ini hanya untuk berbagi ilmu dan ini mungkin juga anda perlukan, sekaligus posting ini untuk menjawab pertanyaan hallurmala yang menanyakan bagaimana cara membuat readmore secara otomatis? Ok ikuti langkah berikut ini.
- Log in ke blog anda
- Klik Rancangan
- Edit HTML
- Centang Expand Template Widget
- Cari kode di bawah ini (ini untuk memutus halaman untuk masing-masing posting)
.post{
misalnya secara lengkap kode itu seperti ini.
.post{
width:600px;
padding:10px;
background:#FFF;
font-family:Helvetica,sans-serif;
margin-bottom:20px;
}
- Hapus kode berwarna merah lalu masukkan kode di bawah ini di dalamnya
-moz-box-shadow:0 0 5px #231A11;
-webkit-box-shadow:0 0 5px #231A11;
-goog-ms-box-shadow:0 0 5px #231A11;
padding:15px;
margin-right:20px;
margin-bottom:20px;
Nanti jadinya akan seperti ini (perhatikan kode berwarna biru)
.post{
width:600px;
background:#FFF;
font-family:Helvetica,sans-serif;
-moz-box-shadow:0 0 5px #231A11;}
-webkit-box-shadow:0 0 5px #231A11;
-goog-ms-box-shadow:0 0 5px #231A11;
padding:15px;
margin-right:20px;
margin-bottom:20px;
- Kalau sudah selesai cari kode </head>
- Masukkan kode berikut di atasnya
<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>
- Langkah selanjutnya cari lagi kode <data:post.body/>
- Hapus kode tersebut dan ganti 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:left'><a expr:href='data:post.url'><strong>Baca Selengkapnya.....</strong><data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
/* Silahkan ganti tulisan Baca Selengkapnya..... dengan readmore atau yang lainnya */
- Simpan Template dan lihat hasilnya
Keterangan:
var thumbnail_mode = "float"; /* kalau mau letak di kiri ganti float dengan no-float */
summary_noimg = 250; /* jumlah karakter yang ditampilkan di posting tanpa gambar / thumbnail) */
summary_img = 250; /* Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail */
img_thumb_height = 120; /* tinggi thumbnail dalam piksel */
img_thumb_width = 120; /* lebar thumbnail dalam piksel */
Ok selamat mencoba dan sukses selalu
''keep spirits and do the best''
