Berikut Tutorial Membuat Auto Readmore Thumbnail dengan fitur No Image bila tidak ada gambarnya Untuk Blogspot, penasaran dengan judul diatas :D saya juga bingung mau kasih judul apa he..he... tapi intinya kali ini saya akan membuat tutorial cara membuat auto readmore blogspot dengan fitur noimage bila dalam dalah satu postingan tidak ada gambar/fotonya, sepertinya tutorial ini masih belum banyak yang share jadi supaya lebih bermanfaat saya tulis disini, oiya untuk wordpress juga bisa loh lihat postingan kang niam sebelumnya di Cara membuat auto readmore wordpress with noimage disitu saya jelaskan secara detil cara-caranya untuk pengguna wordpress self hosting.
yuk mari kita kemon caranya :
Langkah 1
tambahkan kode javascript dibawah ini di antara <head> dan</head> atau sebelum kode </head>
<script type="text/javascript">// <![CDATA[
var thumbnail_mode = "float" ;
summary_noimg = 200;
summary_img = 200;
img_thumb_height = 100;
img_thumb_width = 100;
// ]]></script>
<script type="text/javascript">// <![CDATA[
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");
if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 5px 0px 0;"><img src="http://www.calypso-beach-resort.com/listadmin/images/nophoto.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 5px 0px 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 2
lalu cari kode seperti dibawah ini:
<data:post.body/>
Langkah 3
hapus kode tadi dan ganti dengan kode dibawah ini:
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<br/>
<a class='more' expr:href='data:post.url'><p class='morekanan'>Read More →</p></a>
</b:if>
Langkah 4
Preview / Simpan template, dan lihat hasilnya sob :D
untuk mengantisipasi terjadinya error lebih baik download dulu templatenya, jika nanti ada error kamu bisa backup kembali templatenya seperti semula.
Penting - bila templatenya sudah pernah menggunakan read more thumbnail kamu hanya cukup mengganti kode javascript yang pertama saja, kamu hapus yang ada ditemplate kamu dan ganti dengan kode yang pertama oke.
sekian yah semoga bermanfaat dan berhasil, jika masih kurang paham silahkan tanya saja yah :D
Komentar
Posting Komentar
SILAHKAN BERI KOMENTAR PADA POSTINGAN INI, NOTE! DI FORM KOMENTAR BILA MENGANDUNG LINK AKAN TERDETEKSI SPAM SEHINGGA KOMENTAR ANDA AKAN OTOMATIS SEGERA TERHAPUS