Memasang script auto readmore blogger
Ada banyak pilihan untuk membuat read more di blogger, ada yang menggunakan fitur snippet ada juga yang menggunakan script, kedua caranya memiliki kekurangan dan kelebihan masing-masing.
Membuat read more menggunakan snippet memang lebih ringan untuk loading page tetapi tampilannya bisa jadi kurang menarik, alternatifnya bisa menggunakan script yang dipasang pada template. Kendati lebih berat akan tetapi tampilannya lebih variatif, di bawah ini sudah saya sertakan script yang sudah dikompress sehingga relatif lebih ringan.
Penting !
Bagi yang sudah pernah menggunakan script auto read more lain harap kembalikan terlebih dahulu template widget ke default, skrinsutnya seperti di bawah ini :
Selanjutnya untuk membuat read more otomatis langkahnya sebagai berikut :
1. Masuk ke Dasboard >> Edit HTML >> Expand Widget Template
2. Tempatkan script di bawah ini tepat di atas kode </head> :
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 280;
summary_img = 250;
img_thumb_height = 70;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 2px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
</b:if>
</b:if>
3. Cari kode <data:post.body/> lalu ganti dengan kode di bawah ini :
<b:if cond='data:blog.pageType == "static_page"'>Keterangan:
<data:post.body/>
<b:else/>
<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'>baca selengkapnya » <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
</b:if>
a. Kode di atas sudah ditambah kode untuk menyelesaikan masalah pada static page karena script auto read more.
b. Keterangan pada kode pertama yang disimpan di atas kode </head> tadi adalah:
var thumbnail_mode = "float"; (thumbnail berada di (float) kiri, jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (jumlah karakter yang akan ditampilkan pada posting tanpa gambar / thumbnail)
summary_img = 250; (jumlah karakter akan ditampilkan pada posting dengan gambar / thumbnail)
img_thumb_height = 120; (tinggi gambar dalam pixel)
img_thumb_width = 120; (lebar gambar dalam pixel)
4. Preview dulu lalu simpan. Selamat mencoba, semangat dan salam blogger
b. Keterangan pada kode pertama yang disimpan di atas kode </head> tadi adalah:
var thumbnail_mode = "float"; (thumbnail berada di (float) kiri, jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (jumlah karakter yang akan ditampilkan pada posting tanpa gambar / thumbnail)
summary_img = 250; (jumlah karakter akan ditampilkan pada posting dengan gambar / thumbnail)
img_thumb_height = 120; (tinggi gambar dalam pixel)
img_thumb_width = 120; (lebar gambar dalam pixel)
4. Preview dulu lalu simpan. Selamat mencoba, semangat dan salam blogger
0 komentar :
Posting Komentar
Jika anda menyukai artikel di atas silahkan share atau tinggalkan komentar. Mohon maaf, untuk menghindari spam, komentar yang menyertakan live link akan dihapus.