Cara membuat atau memasang readmore otomatis di
blog pada blogger atau blogspot memang sudah banyak di bahas para
blogger lainnya. adanya readmore atau bahasa gaulnya "Baca Selanjutnya"
memang sangat banyak manfaatnya. fungsi readmore diantaranya adalah
merapikan tampilan blog,
memepercantik halaman blog, mempermudah pengunjung melihat postingan-postingan yang ada di blog kita.
Berikut Toturial Membuat ReadMore Otomatis di blog:
1. loggin akun - Rancangan - Edit HTML
2. Centang Expand Template Widget
3. Copy Kode dibawah ini
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
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>
4. Paste kode diatas Tepat di atas Kode </head>
5. selanjutnya mengganti kode <data:post.body/>
6. cara nya blok kode <data:post.body/> paste dengan kode dibawah ini:
<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:right'><a
expr:href='data:post.url'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIB3n1vCfW6r6YWuaJ_e_bejIWOMQ75_cz99Y6e-lBWouUCAq0Y3UJ6GwLcWkvZqe94_NviKHEoMqfLL7eBRVjDhgYe26Vy_mo-IjvOUU2nC2XOkXpogB_TzTyHcFVnmAMm5syRMJx7iM/s1600/readmore.gif'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<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:right'><a
expr:href='data:post.url'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7QLUXBSOSOj_kS7mef7IqgGTwS78prEh5gSPycyHh_Z718nk9B9Rcj4_aFC10KfgAc6GXBPyz0S4fnpk9JKu_5MvExtj2rhP3HKm1yC0DKbkCBbf0Z25Q3CZxKoqaXzeMDW9UVfxiilZq/'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<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:right'><a
expr:href='data:post.url'><img
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPF2NnpExvFolQ7p8ZznsOk8D8nl4eRsq01w4UAW6-TvpCgz9YSaXecdNcdj0_XzuQK3B3e9jIKOtGTYei7JkpatbGZgKrzbojZGtC5D_F7dCnrvWkGfSuzoxeXg1CMXCMJAZr30iRoeE/s320/a1ifte.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
Keterangan:
- var
thumbnail_mode = "float"; (untuk menentukan letak thumbnail berada di
(float) kiri atau ganti dengan (no-float) jika ingin thumnail berada di
kanan
- summary_noimg = 250; (untuk menentukan berapa karakter yang akan ditampilkan di posting tanpa thumbnail)
- summary_img = 250; (untuk menentukan berapa karakter yang akan ditampilkan di posting dengan thumbnail)
- img_thumb_height = 120; (Tinggi thumbnail)
- img_thumb_width = 120; (Lebar thumbnail)
Ada
beragam widget yang bisa kita dapatkan untuk mengetahui jumlah
pengunjung yang sedang online di blog kita. Salah satu widget yang saya
akan bahas yaitu Whos.amung.us.
Anda dapat memperoleh widget script gratis langsung langsung
websitenya. Widget ini juga memiliki fungsi untuk mengetahui lokasi dari
pengunjung yang datang ke blog atau situs anda. Anda juga dapat
mengetahui jumlah pengunjung yang online pada jam-jam tertentu serta
mengetahui apa yang halaman atau page yang dibuka oleh pengunjung. Anda
tidak perlu melakukan registrasi untuk memperoleh script codenya. Anda
hanya perlu mengkopi script kodenya pada blog setelah anda menentukan
posisi widget pada blog. Jika anda tertarik untuk memasang widget ini
ikuti trik dan tips yang satu ini:
3. Kopi script kodenya di atasnya.
Bagaimana
mudahkan membuatnya, anda dapat mengatur posisi widget tersebut sesuai
selera yang anda suka pada blog. Jika anda klik pada widget tersebut
maka anda akan diarahkan ke halaman statistik pengujung pada situs Whos.amung.us.
Sebelumnya
blog trik dan tips telah memberikan info cara membuat efek love
berjatuhan. Kali ini seperti judul diatas saya akan berbagi trik terbaru
cara membuat efek gelembung di blog. Ada dua efek gelembung yang akan
saya bagikan triknya ke sobat blogger. Efek yang pertama yaitu efek
gelembung berwarna biru muda yang berjatuhan di blog sementara efek
kedua yaitu efek gelembung terapung (float effect). Jika sobat
penasaran bagaimana tampilan efeknya silahkan dicoba aja langkahnya
dibawah ini:
