Berikut ini cara untuk membuat Auto Read More pada Blogger.
Sebenarnya sudah ada fasilitas untuk membuat Read More pada Template
Blogger kita, namun kita akan mencoba untuk membuat Auto Read More pada
Blogger sebagai pengetahuan agar kita paham dan bisa membuat sendiri.
Read More atau Baca Selengkapnya di halaman awal blog bisa kita buat
dengan mengklik di icon break pada halaman postingan anda. Tapi kali ini
kita akan membuat Auto Read More pada Blogger dengan cara Edit Html /
thumbnail ( ada Gambarnya)
Cara Membuat Auto Read More Pada Blogger
1. Masuk ke Blogger / dan buka dasboard anda
2. Klik > Template > Edit HTML > Lanjutkan
3. Klik / beri centang pada Expand Template Widget
4. Cari kode </head>
5. Masukkan / kopi paste kode dibawah ini, di atas kode </head>
<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>
Catatan:
summary_noimg = 250 , ( jumlah ringkasan tulisan yang tidak ada gambarnya)
summary_img = , 250 (jumlah ringkasan tulisan yang ada gambarnya)
img_thumb_height = 120 , tinggi gambar
img_thumb_width = 120 , lebar gambar
6. Selanjutnya cari kode <data:post.body/>
7. Ganti kode tersebut dengan kode seperti di bawah ini
<b:if cond=’data:blog.pageType != "item"’>
<b:if cond=’data:blog.pageType != "static_page"’>
<div expr:id=’”summary” + data:post.id’><data:post.body/></div>
<script type=’text/javascript’>createSummaryAndThumb(“summary<data:post.id/>”);</script>
<span style=’float:right’><a expr:href=’data:post.url’>Baca Selengkapnya… </a></span>
</b:if>
</b:if>
<b:if cond=’data:blog.pageType == "item"’><data:post.body/></b:if>
<b:if cond=’data:blog.pageType == "static_page"’><data:post.body/></b:if>
8. Klik Simpan Template, lalu Tutup
Jika anda berhasil maka Template akan menyimpan perubahan ini. Kalau terjadi kesalahan biasanya akan muncul pesan tulisan warna merah di bawah. Sebaiknya anda copy / simpan terlebih dahulu semua kode script Template anda sebelum melakukan edit untuk berjaga-jaga. Sekian info Cara Membuat Auto Read More Pada Blogger, selamat mencoba, salam sukses !
Cara Membuat Auto Read More Pada Blogger
1. Masuk ke Blogger / dan buka dasboard anda
2. Klik > Template > Edit HTML > Lanjutkan
3. Klik / beri centang pada Expand Template Widget
4. Cari kode </head>
5. Masukkan / kopi paste kode dibawah ini, di atas kode </head>
<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>
Catatan:
summary_noimg = 250 , ( jumlah ringkasan tulisan yang tidak ada gambarnya)
summary_img = , 250 (jumlah ringkasan tulisan yang ada gambarnya)
img_thumb_height = 120 , tinggi gambar
img_thumb_width = 120 , lebar gambar
6. Selanjutnya cari kode <data:post.body/>
7. Ganti kode tersebut dengan kode seperti di bawah ini
<b:if cond=’data:blog.pageType != "item"’>
<b:if cond=’data:blog.pageType != "static_page"’>
<div expr:id=’”summary” + data:post.id’><data:post.body/></div>
<script type=’text/javascript’>createSummaryAndThumb(“summary<data:post.id/>”);</script>
<span style=’float:right’><a expr:href=’data:post.url’>Baca Selengkapnya… </a></span>
</b:if>
</b:if>
<b:if cond=’data:blog.pageType == "item"’><data:post.body/></b:if>
<b:if cond=’data:blog.pageType == "static_page"’><data:post.body/></b:if>
8. Klik Simpan Template, lalu Tutup
Jika anda berhasil maka Template akan menyimpan perubahan ini. Kalau terjadi kesalahan biasanya akan muncul pesan tulisan warna merah di bawah. Sebaiknya anda copy / simpan terlebih dahulu semua kode script Template anda sebelum melakukan edit untuk berjaga-jaga. Sekian info Cara Membuat Auto Read More Pada Blogger, selamat mencoba, salam sukses !
