pada artikel Cara Membuat Read More Otomatis dengan Thumbnail di Blogger
saya sudah lengkap membahas Cara Membuat Read More Otomatis dengan Thumbnail di Blogger namun saya akan membahasnya lagi dengan tulisan selain READ MORE karna buat newbie kalau tidak langsung contoh yang siap dicopy paste akan sulit "aku kan juga newbie" jadi tahu bagaimana newbie hehe...
caranya masih sama dengan di artikel Cara Membuat Read More Otomatis dengan Thumbnail di Blogger
Silahkan Login dan masuk
lalu klik Rancangan dan klik Edit HTML
Centang Expand Template Widget
Untuk mempermudah pencarian kode HTML nya anda tekan aja ( CTRL + F )
Cari kode </head> dan kalau sudah ketemu
Tambahkan kode dibawah ini tepat nya diatas kode </head> :
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 500;
summary_img = 500;
img_thumb_height = 220;
img_thumb_width = 220;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Fais
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>
lalu cari kode <data:post.body/> lalu ganti tag <data:post.body/> tersebut dengan kode script di bawah ini :
<b:if cond='data:blog.pageType != "item"'>
<div style=' text-align: justify;' 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'>BACA SELANJUTNYA - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
atau pakek yang lebih aneh,yaitu pakek bahasa madura contohnya:
<b:if cond='data:blog.pageType != "item"'>
<div style=' text-align: justify;' 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'>BECAH SELENGKAPAH - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Tahap terakhir setelah selesai pengeditan simpan Templete dan lihat aja hasil nya.
pasti keren deh hasilnya hehe...
saya sudah lengkap membahas Cara Membuat Read More Otomatis dengan Thumbnail di Blogger namun saya akan membahasnya lagi dengan tulisan selain READ MORE karna buat newbie kalau tidak langsung contoh yang siap dicopy paste akan sulit "aku kan juga newbie" jadi tahu bagaimana newbie hehe...
caranya masih sama dengan di artikel Cara Membuat Read More Otomatis dengan Thumbnail di Blogger
Silahkan Login dan masuk
lalu klik Rancangan dan klik Edit HTML
Centang Expand Template Widget
Untuk mempermudah pencarian kode HTML nya anda tekan aja ( CTRL + F )
Cari kode </head> dan kalau sudah ketemu
Tambahkan kode dibawah ini tepat nya diatas kode </head> :
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 500;
summary_img = 500;
img_thumb_height = 220;
img_thumb_width = 220;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Fais
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>
lalu cari kode <data:post.body/> lalu ganti tag <data:post.body/> tersebut dengan kode script di bawah ini :
<b:if cond='data:blog.pageType != "item"'>
<div style=' text-align: justify;' 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'>BACA SELANJUTNYA - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
atau pakek yang lebih aneh,yaitu pakek bahasa madura contohnya:
<b:if cond='data:blog.pageType != "item"'>
<div style=' text-align: justify;' 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'>BECAH SELENGKAPAH - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Tahap terakhir setelah selesai pengeditan simpan Templete dan lihat aja hasil nya.
pasti keren deh hasilnya hehe...
langsung coba dulu ya bang,trimksih bnyk atas ilmunya
BalasHapusTerima kasih bnyk gan
BalasHapusizin copy gan
BalasHapussech@dan baid@sama2.
BalasHapusanonim@silahkan
akhirnya blogku simple dah bang,terima kasih ilmunya ya gan
BalasHapusmantaaaaaaaaaaaaaaaaaaaaaaaaaaaaaffff
BalasHapusSB66@makasih banyak
BalasHapusʎnɥn ɥıǝq ɥǝpǝq lıɐʎuɐ
BalasHapusM Mufid@gaya baru tuh,tiorinya gimana tuh
BalasHapus