Teman Teman kali ini saya masih berbagi ilmu tentang Readmore otomatis
di blogger, Mengpa blog dibutuhkan read more.
Alasanya mempercantik blog, mempersimpelkan blog, cara membuat readmore
ini terbilang sangat mudah, kalau kita ada kemauan pasti kita bias menjalankanya.
Mungkin ada beberapa cara , namun disini saya menampilkan atau memberitahu cara
nya yang enak dan mudah dimengerti saja. Tidak muluk muluk.
Nah,dengan kombinasi javascript read more yang akan kita ciptakan ini
akan tampil otomatis meskipun kita tidak mengeditnya kembali.
Ada dua(2) pilihan membuat readmore otomatis / auto read more
pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan
tulisan.
Langkah Cara Membuat Read More Otomatis tanpa jQuery pada
Blogger dengan Bahasa Javascript
Sedikit Curhat >>Dulu saya Sampe keringetan sendiri yang nama nya
belajar ngeblog apa lagi yang namanya Buat read more tuh, sampe, kehilangan
kesabaran, apa kah teman teman pernah mengalaminya Seperti Saya ??? JUJUR aja
teman teman,,,,
Ok pertama seperti Biasa Masuk Blogger.
Pilih Template, edit Html
Jangan Lupa Cek Lis, Centang
Lalu Setelah Kamu Centang cari tulisan </head> agar
mudah gunakan CTRL+F atau F3 setelah ketemu tepat diatas kode </head> kamu copy dan paste Kode Berikut.
<script
type='text/javascript'>
var
thumbnail_mode = "float" ;
summary_noimg
= 150;
summary_img
= 150;
img_thumb_height
= 100;
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 di coppy paste berikutnya tinggal cari kode <data:post.body/> atau <p><data:post.body/></p>
Tadi
sebelumnya sudah saya bahas bahwa Ada dua(2) pilihan membuat
readmore otomatis / auto read more pada blogger ini sob,yakni read more
menggunakan gambar dan hanya menggunakan tulisan.
Sekarang yang
menggunakan Teks dulu
Caranya cari
kode <data:post.body/> atau <p><data:post.body/></p> lalu ganti dengan kode
<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
style='float:right'><a expr:href='data:post.url'>Read
More..</a></span>
<b:else/>
<data:post.body/>
</b:if>
Sekarang
Yang menggunakan Gambr
Caranya cari
kode <data:post.body/> atau <p><data:post.body/></p> lalu ganti dengan kode
<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
style='float:right'><a expr:href='data:post.url'><img alt='Read
More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>
