Cara Membuat Read More Versi 3 ( Automatis + Thumbnail )
Jumat, 25 November 2011
0
komentar
Sesuai namanya Readmore versi 3 berbeda dengan readmore versi sebelumnya, yakni versi 1 dan versi 2…karena di readmore versi 1 dan versi 2, kita harus mengatur batas perpotingan text sevcara manual…nah tapi dengan readmore versi tiga atau yang lebih di kenal dengan Read More Automatis + Thumbnail ini bisa menentukan jumlah karakter text yang akan menjadi abstraksi postingan kita…karena itulah di sebut Readmore Automatis..karena kita gak perlu ribet-ribet lagi untuk mengatur posisi perpotongan text dengan meletakkan text sebelum kode <span class="fullpost"> dan sisanya sebelum kode </span>, karena itu udah ketinggalan zaman…he..he…he…
Selain kelebihannya yang otomatis …readmore versi 3 ini juga memiliki kelebihan lain, yakni mampu menampilkan thumbnail dari gambar pertama postingan, untuk mewakili isi dari postingan kita
He..he…he…keren kan…???
Kalau para sahabat blogger tertarik denagan readmore versi 3 ini,
Ikuti aja langkah-langkah di bawah ini :
1. login dulu ke akun Blogger kamu
2. Pilih Layout > Edit HTML
3. Letakkan kode berikut di di bawah kode </head>
<!-- Read more v3 -->
<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");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; margin:0px 10px 5px 0px; padding:0; border-right:2px solid #ccc; border-bottom:2px solid #ccc;"><img src="' img[0].src '" width="' img_thumb_width 'px" height="' img_thumb_height 'px"/></span>';
summ = summary_img;
}
var summary = imgtag '<span>' removeHtmlTag(div.innerHTML,summ) '</span>';
div.innerHTML = summary;
}
//]]>
</script>
<script type='text/javascript'>
var thumbnail_mode = "float";
summary_noimg = 500;
summary_img = 400;
img_thumb_height = 125;
img_thumb_width = 120;
</script>
<!-- Read more v3 end -->
Catatan :
var thumbnail_mode = "float"; = Menentukan posisi thumnail
summary_noimg = 500; = Jumlah karakter bila tidak menggunakan thumbnail
summary_img = 400; = Jumlah karakter bila menggunakan thumbnail
img_thumb_height = 125; =Tinggi thumbnail
img_thumb_width = 120; = Lebar thumbnail
4. Klik Save Template
5. masih ada di kolom Edit HTML, lalu centang Expand Widget Template
6. Cari kode <data:post.body/>, dan ganti kode tersebut dengan kode berikut:
<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>
7. lalu Save template nya.
Catatan :
Tulisan READ MORE - bisa anda ganti sesuai keinginan kamu .jika kamu ingin mengubahnya ke bentuk gambar…klik aja [ di sini ]
oke deh semuanya dah rebes beres, silahkan di cek aja, gimana tampilan readmore baru kamu…He…he…he…
Selamat mencoba, Semoga berhasil , dan jangan lupa tinggalkan komentar
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Cara Membuat Read More Versi 3 ( Automatis + Thumbnail )
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://azharadzuan.blogspot.com/2011/11/cara-membuat-read-more-versi-3.html. Terima kasih sudah singgah membaca artikel ini.Ditulis oleh Unknown
Rating Blog 5 dari 5
0 komentar:
Posting Komentar