Senin, 28 September 2009

Cara buat buku tamu tersembunyi dengan shoutmix

10.08 Digituck No comments

Beberapa hari yang lalu kawan saya sempat menanyakan, "Kenapa gak ada shoutmix di blog kamu sob ?" . Pada awalnya memang saya tidak memprioritaskan untuk shoutmix chat yang banyak difungsikan oleh kawan-kawan sebagai buku tamu di blog untuk dipasang diblog saya ini, dengan alasan yang sangat "sepele" yaitu untuk membatasi waktu loading sekaligus mengurangi akses loading yang terjadi akibat pengaksesan link dari luar (external) yang seringkali terasa lambat jika blog kita begitu banyak menggunakan aksesoris. Batasan waktu loading atau waktu pengaksesan suatu blog seringkali saya ukur dengan menggunakan akses internet melalui dial-up modem dengan batas kecepatan di angka 153Kbps, yang artinya dengan kecepatan yang hanya sebesar itu blog saya dapat dibuka atau diakses tidak terlalu lama atau terasa lambat untuk dibuka saat sedang browsing. Tadinya saya mau sediakan satu halaman (page) untuk buku tamu yang diberikan akses untuk komentarnya. ehm ... tapi keren juga kalo ada shoutmix, mengingat blog ini tidak akan hidup tanpa kehadiran kawan-kawan blog diluar sana, namun tetap terus mencoba dan mencoba serta menghemat penggunaan aksesoris pada blog dengan alasan tersebut diatas. Sejak dulu aksesoris ini pun menjadi kebutuhan utama di beberapa blog saya yang menggunakan blogspot.

Script Shoutmix yang saya pasang disini saya dapat saat blogwalking (didapat kira-kira beberapa bulan yang lalu namun maaf .... sumber dari script ini sendiri saya sampai tidak tahu dan belum sempat tuk cari tahu karna ada tutorial di beberapa blog yang saya kunjungi tidak memberi link ke sumbernya, mungkin sobat bisa beri tahu dengan memberi komentar untuk postingan ini !).

Berikut ini kode atau script cara buat buku tamu tersembunyi atau float (mengapung, melayang) dengan shoutmix yang saya taruh di blog Wordpress ini pada bagian header.php setelah tag <body>.


<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url("DISINI LETAK URL SUMBER GAMBAR YANG DIGUNAKAN") no-repeat;

}

.gbcontent{

float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<!-- DISINI LETAK KODE ATAU SCRIPT SHOUTMIX !-->

<div style="text-align:right">

<a href="javascript:showHideGB()">

[close]

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script></div></div>


top:50px; --- disini adalah jarak batas dari atas (top) sebesar 50px (silahkan sesuaikan!).


background:url("DISINI LETAK URL SUMBER GAMBAR YANG DIGUNAKAN") ---- Silahkan buat gambar sendiri dengan ukuran height:100px width:30px menggunakan photoshop atau software lainnya dan taruh atau upload gambar tersebut hingga mengandung URL dan letakkan disini.


<!-- DISINI LETAK KODE ATAU SCRIPT SHOUTMIX !--> ---- Hapus bagian ini dan gantikan atau letakkan shoutmix kode disini, silahkan registrasi lebih dahulu untuk memperoleh kodenya di shoutmix.com


kode atau script ini bisa juga diletakkan di Appearance - Widgets - Text pada admin panel wordpress, namun untuk yang berhosting di wordpress.com tidak bisa menggunakan cara ini, cara yang bisa digunakan adalah dengan memposting kode tersebut sebagai postingan baru dan atur tanggal postingannya dengan meletakkan di belakang (mundurkan tanggal posting) agar tidak masuk ke dalam postingan halaman utama (homepage).


Untuk penggunaan blog di blogspot kode diletakkan pada HTML Widget di Setting - Layout

Posted in: ,,,,,,,,,,

0 komentar:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More
RSS FeedSubscribe to Our RSS feed!
Follow Us on Twitter!Follow Us on Twitter!

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Free Samples By Mail