Widged ShoutBox melayang

 안녕하세요 친구들✌(✿◠‿◠)....

Cara Membuat Buku Tamu Auto Hide di Blog

Cara Membuat Buku Tamu Auto Hide di Blog

<style type="text/css">#gb{ position:fixed; top:20px; z-index:+1000; }* html #gb{position:relative;} .gbtab{ height:150px; width:50px; float:left; background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat; } .gbcontent { float:left; border:1px solid #000000; -moz-border-radius-bottomleft:5px; -webkit-border-radius-bottomleft:5px; -o-border-radius-bottomleft:5px; -khtml-border-radius-bottomleft:5px; -moz-border-radius-topright: 5px; -moz-border-radius-topleft: 5px; background: #F2F2F2; url() no-repeat bottom; padding:10px; } </style><br /><br /><script type="text/javascript">function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0); gb.opened = !gb.opened; }function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);} }</script><br /><br /><div id="gb"> <div class="gbtab" onmouseover="showHideGB()"> </div> <div class="gbcontent"> <center> <!-- BEGIN CBOX - www.cbox.ws - v001 --><br /><div id="cboxdiv" style="text-align: center; line-height: 0"> <div> <iframe frameborder="0" width="300" height="275" src="http://www4.cbox.ws/box/?boxid=4100717&boxtag=ebc39c&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4100717" style="border:#FFFFFF 1px solid;" id="cboxmain4-4100717"></iframe></div> <div> <iframe frameborder="0" width="300" height="75" src="http://www4.cbox.ws/box/?boxid=4100717&boxtag=ebc39c&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4100717" style="border:#FFFFFF 1px solid;border-top:0px" id="cboxform4-4100717"></iframe></div> </div> <!-- END CBOX --><br /><br /><br /><div style="text-align:center"> <span style="float:right; color:#000000;">Get this <a target="_blank" href="http://christiantatelu.blogspot.com/2012/03/cara-membuat-buku-tamu-auto-hide-di.html"> widget! </a></span><br /></div> </center> </div> <script type="text/javascript">var gb = document.getElementById("gb"); gb.style.right = (50-gb.offsetWidth).toString() + "px"; </script><br /><br /></div>



Caranya :

1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
2. Masukkan kodenya di kotak yang di sediakan.
3. Klik Save 

Tambahan :

Ganti kode yang berwara biru
dengan kode buku tamu milik sobat. Sobat yang belum punya buku tamu
silahkan buat terlebih dahulu di cbox ( seperti blog ini) , fibox, shoutchamp atau pada penyedia chatbox gratisan lainnya.

Widget Melayang

Widget Melayang


Contoh widget melayang yang ada di blog ini
langkah-langkahnya berikut ini :

1. Loginlah dulu di Blogger > Tata Letak > Elemen Laman > Klik Tambah Gadget>HTML/Java Scripts..

2. Jika sudah buatlah nama pada widget yang baru ini... lalu Copy-Paste kode dibawah ini ke dalam widget HTML/Java Scripts tadi...

<style type="text/css">#gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:150px; width:30px; float:left; cursor:pointer; background:url('http://i466.photobucket.com/albums/rr22/wong284/GuestBook.png') no-repeat; } .gbcontent{ float:left; border:2px solid #FAFD02; background:#FAFD03; padding:10px; } </style><br /><br /><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><br /><br /><div id="gb"> <br /><div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <br /><!-- Begin ShoutMix - http://www.shoutmix.com --><br /><iframe scrolling="auto" width="190" frameborder="0" src="http://www6.shoutmix.com/?ecaknyo" height="700" title="ecaknyo"><br /><a href="http://www6.shoutmix.com/?ecaknyo">View shoutbox</a><br /><!-- End ShoutMix --></iframe><br /><br /><script type="text/javascript">var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script></center> </div> </center> </div> </div> </div>

Pada Contoh di atas adalah Widget Melayang Shoutmix...

Lihat Contoh Jadi kLik urL ini => ecak2nyo


Keterangan :

Merah = Gantilah dengan kode Scripts Widget yang akan kamu tampilkan Misalnya kode Scripts Widget Shoutmix..

Biru = Gantilah dengan URL Gambar Tab kamu (atau pakai saja url gambar tab diatas tdi) .. Gambarnya bisa kamu buat dengan Program seperti Photoshop.. lalu kamu Upload/simpan gambar tsb di Photobucket ..baru kamu bisa mendapat kode url Direct Link gambar tdi..

Pink = Aturlah Tinggi & lebarnya sesuai ukuran Gambar Tab kamu..

.gbtab{ = Ini kode scripts untuk pengaturan tampilan gambar tab

Orange

gbcontent = Ini kode scripts untuk mengatur tampilan kontennya

float:left; = Ini utk mengatur posisi widgetnya melayang di kiri / kanan / atas / bawah

border:2px solid #FAFD02; = Memberi warna pada border konten...aturlah/ubahlah warnanya jika mau.. misalnya FAFFFF (sebaiknya gunakan pencari kode warna Photoshop)

background:#FAFD03; = Memberi warna pada isi konten.. disini saya menggunakan warna kuning

4. Simpanlah Widget Melayang ini... Selesai.. namun sebaiknya posisi widgetnya di Bagian Tata letak di letakan paling bawah lalu klik simpan.

Membuat Buku Tamu Dengan Light Effect

Links

klinik-blogger christiantatelu

Untuk
membuatnya sangat simple, kita tidak perlu mengutak-atik kode pada
template kita, karena kalian tinggal memasangnya pada widget di
Elemen Halaman. Untuk lebih jelasnya silahkan ikuti tahap-tahap
pemasangannya dibawah ini:

1. Login Ke Blogger kalian

2. Pilih Rancangan ---> ELEMEN halaman

3. Tambah Gadget ---> Pilih HTML/Java Script

4. Simpan kode berikut dalam konten HTML/Java Scriptnya

<!-- Start Shoutbox light effect by Han --><br /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script><br /> <script> $(document).ready(function() { //select all the a tag with name equal to modal $('a[name=modal]').click(function(e) { //Cancel the link behavior e.preventDefault(); //Get the A tag var id = $(this).attr('href'); //Get the screen height and width var semahHeight = $(document).height(); var semahWidth = $(window).width(); //Set heigth and width to semah to fill up the whole screen $('#semah').css({'width':semahWidth,'height':semahHeight}); //transition effect $('#semah').fadeIn(1000); $('#semah').fadeTo("slow",0.8); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); //transition effect $(id).fadeIn(2000); }); //if close button is clicked $('.window .close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#semah').hide(); $('.window').hide(); }); //if semah is clicked $('#semah').click(function () { $(this).hide(); $('.window').hide(); }); }); </script><br /><br /> <style>a {color:#ffffff; text-decoration:none} img { border: none; } #semah { position:absolute; left:0; top:0; z-index:9000; background-color:#000; display:none; } #wadah .window { position:fixed; left:0; top:0; width:440px; height:200px; display:none; z-index:9999; padding:20px; } #wadah #kid53 { background:url(http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png) no-repeat 0 0 transparent; width:272px; height:460px; padding:56px 0 20px 5px; } #tutupan { padding:2px 0 0 0; } </style><br /><br /> <ul><center> <a href="#kid53" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul> <div id="wadah"> <!-- Start Shoutbox --><br /> <div id="kid53" class="window"> <br /> SIMPAN SCRIPT Cbox KALIAN DISINI<br /><br /> <div id="tutupan"> <input type="button" value="Close" class="close" /><br /> </div> </div> <!-- End Shoutbox --><br /> <div id="semah"> </div> </div> <!-- End of Shoutbox light effect by Han--><br /> </div>

5. Jangan lupa disimpan

Catatan

• Untuk ukuran shoutbox/shoutmix/cbox kalian bisa kalian sesuaikan dengan background gambar.
• Untuk Shoutmix ukurannya Height: 380px dan Width: 261px
• Untuk Cbox ukurannya height:300px width:250px , untuk width yang bawah samakan dengan width pertama, karena di cbox ada 2 width
• untuk ukuran tidak harus terpaku pada punya saya diatas, kalian boleh menyesuaikannya sendiri.

untuk
background gambar bisa kalian ganti dengan gambar kalian sendiri,
namun jika ingin gambar buatan saya bisa menggunakan gambar dibawah
ini :

	http://i809.photobucket.com/albums/zz15/yuda03/GUESTBOOKRED.png
	http://i809.photobucket.com/albums/zz15/yuda03/gbRED.png
	http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png
	http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png

TAMBAHAN :



Tampilan
button shoutbox diatas letaknya didalam sidebar, dan karena ada
permintaan salah satu sahabat blogger, yang meminta untuk memasang
buttonnya disamping,



gan saya mau nanya ni, bisa gak bmbrnya di tempel di kanan gtu atw di kiri? mohon bntuannya ya :)

Supaya gambar berada melayang disamping silahkan kalian ganti kode ini:

<ul><center>
<a href="#kid53" name="modal"><img
src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png"
border="0" width="158" height="58" /></a> </center>
</ul>

dengan kode ini :

<ul><div style='display:scroll; position:fixed; top:5px; right:3px;'>

<a
href="#kid53" name="modal"><img
src="http://lh3.ggpht.com/_MvLBi88bM_I/TKBi6-LLyiI/AAAAAAAABgo/mXUIjU7ayaY/NiceGB.png"
width="158" height="58" /></a>

</div>

</ul>

Untuk gambarnya juga saya sudah buatkan, dan silahkan tinggal digunakan.