Pada postingan kali ini, saya akan membahas cara membuat auto Read More atau Baca Selengkapnya pada blogger. Mungkin banyak di antara sobat blogger yang sudah menggunakan auto Read More ini, tapi tidak ada salahnya kalau saya posting kembali untuk sobat blogger yang belum menggunakan auto read more pada blognya. Sebenarnya cara ini di request salah satu teman saya yang baru terjun di dunia blogging sama seperti saya.
Oke langsung saja bagi sobat blogger yang tertarik untuk membuat auto read more, silahkan ikuti langkah-langkah di bawah ini.
Pertama masuk ke akun blog sobat, lalu pada dashboard pilih design kemudian klik edit HTML. Temukan kode </head> kemudian pasang kode di bawah ini 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>
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>
Kalau sudah jangan lupa save template.
Kemudian centang Expand Widget Templates dan cari kode <data:post.body/>
Kalau sudah ketemu, 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'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Simpan pekerjaan sobat.
Semoga bermanfaat.
Alhamdulillah...
kok gak bisa? 4 kali ulang ttp sama. error. :((
BalasHapus@Deean Jiddan Kok aneh ya, padahal selama ini gak ada yg gagal loh. Emang error gmn?
BalasHapusmantap gan,,setelah di coba berhasil,,,ths ya,,
BalasHapusSelamat sob, semoga bermanfaat...
BalasHapusThanks Brader Moga Bermanfaat,...
BalasHapus@angga : oke brader..
BalasHapus@angga : oke brader..
BalasHapuslumayan ni saya juga sudah pake yg begini
BalasHapusartikel yang anda tulis di blog ini, sungguh sangat memotivasi diri saya untuk trus berkarya, terima kasih semoga kebaikan anda mendapatkan balasa yang lebih baik.
BalasHapuspostingannya sangat menari gan,,
BalasHapusnice infonya.... sukses terus ea ditunggu artikel selanjutnya!!!
BalasHapus
BalasHapusditunggu artikel selanjutnya gan
BalasHapusthanks infonya gan,,,
BalasHapussangat bermanfaat infonya