Cara Membuat Box show/hide untuk widget ini sebenarnya cara yang biasa digunakan untuk memasang Buku tamu, namun pada kesempatan ini saya akan berbagi cara bagaimana untuk digunakan pada widget lain seperti untuk widget visitor dari feedjit, Follower, facebook like atau juga buat widget lain. lihat contoh disudut kanan bawah blog ini pada chatbox, follower dan visitor.
Langsung saja ya pada langkah pembuatannya:
Langkah Pertama;
Pada langkah ini kita akan membuat box atau kotak untuk menyimpan widget, script dibawah ini adalah script yang biasa digunakan untuk membuat buku tamu show/hide. sobat perhatikan kode dibawah ini yang berwarna merah. kode tersebut adalah sebagai kode ID widget jadi apabila sobat mau membuat kotak ini lebih dari satu maka kode tersebut harus diganti dengan ID baru, contoh untuk ID widget dibawah ini gb maka seluruh kode yang berwarna merah harus gb. apabila mau membuat kotak widget baru lagi maka sobat copy paste kode yang ada dan ganti IDnya dengan yang baru misal jadi kt, gt atau apa saja yang gampang. jangan lupa untuk huruf berwarna merah dengan huruf besar jangan sampai salah. untuk kode CSSnya sobat sesuaikan saja.
<style type="text/css">itulah kode untuk kotak/box widget.
#gb{
position:fixed;
right:133px;
z-index:+500;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
margin:0;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.gbcontent{
margin-top:140px;
width:260px;
float:left;
border:1px solid #404040;
background:#333;
padding:0px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, -600-w) : moveGB(0-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 35 ? 25 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 1);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div align="center">
<div style="background:#333;height:415px;width:232px;
overflow:hidden;padding-top:10px;">
-------Kode widget disini--------
</div>
</div>
<div align="center"><a href="javascript:void(0);" onclick="showHideGB()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif3woE_aUbFM8hyRz2HgqSqXgT9Rey3_oMkDFppOepKU2jhmVasc8WTzWbZwRek_hBO66uSTFmbERT7rBvyeG2t51IKjzUeti9_ZRhSV6r6J7O7w6L4f-qEGTeaLi2-qoQWfDcY0-w0hda/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.top = (-600-gb.offsetWidth).toString() + "px";
</script>
Langkah Kedua;
Selanjutnya membuat tombol untuk menavigasi box/kotak widget, dimana tombol tersebut bisa sobat letakan dimana saja sesuai dengan keinginan tinggal sobat mengatur kode CSS nya.
<div style='position:fixed;bottom:0;right:0;cursor:pointer;background:#333;border-top:1px solid #444;border-bottom:1px solid #222;font-weight:bold;font-size:14px;padding:3px 16px;'><a href="javascript:void(0);"onclick="showHideGB()"/>kode yang berwarna merah samakan dengan kode berwarna merah langkah pertama.
Judul Widget disini<br/></a></div>
kode warna kuning untuk posisi tombol.
Langkah ketiga;
Untuk langkah ketiga ini sobat bisa gunakan bila sobat mau membuat kotak widget lebih dari satu, caranya sobat buat beberapa kotak widget dengan beda ID (kode berwarna merah) kemudian letakan dalam satu gadget yang ada pada blogger, letakan semua kode menjadi satu dalam tambah gadget HTML/javascript. selanjutnya untuk kode tombol (langkah kedua) sobat hapus kode position:fixed;bottom:0;right:0; dan ganti dengan tabel seperti dibawah ini:
untuk lebih jelas cara peletakan baca Cara Meletakan Widget di Sudut Blog<table style='position: fixed; bottom: 0px; left: 0px;'><tr><td>----kode langkah 2 ke 1 ---------kode langkah 2 ke 2 ---------kode langkah 2 ke 3 -----</table>
</td></tr>
Biar sobat gak bingung karena tutorial ini yang berbelit-belit sobat bisa lihat saja hasil akhir tutorial ini pada blog ini yaitu widget yang berada disamping kanan bawah Chatbox, follower dan visitor.
Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Cara Membuat Box show/hide untuk widget kali ini, semoga bermanfaat bagi Anda.
DAPATKAN ARTIKEL VIA EMAIL
Dipublish oleh :
Abdul Kohar - Jatinangor Rating 5
terima kasih banyak atas info yang menarik ini..
BalasHapustukar link yuk..
#Salam sejahtera
mampir sejenak sambil baca artikel sobat , Tuker link yuk sob sama blog sederhana saya :)
BalasHapusOiya follow blog saya nanti saya akan folback 4 kali . ayoo buruan follow ^_^
mas untuk code 1 itu di gabung sama code 2 , 3 ya? soal nya ,pas saya coba... tidak ada tampil menu seperti mas,widget nya ,memang work ada di bawah kiri,tapi tidak hide/show.... mohon pencerahnya
BalasHapussudah paham mas,tapi saya nemu masalah baru .... pnya saya jadi seperti ini http://completion-animation-3dsmax.blogspot.com,mohon mencerahanya ...
Hapusproblem solve mas ... =D hehee ,,tinggal di poles dikit utk ganti background ,dll @@, **p
Hapussaya dah coba buat seperti anda punya ini tapi masalahnya kotaknya itu penuh dari keri ke kanan, mohon petunjuknya sobat.....!
BalasHapusIni dia yang saya cari.. @@,
BalasHapusMakasih banyak buat infonya, sangat membantu sekali saya buat saya untuk mendapatkan inspirasi baru...
BalasHapussteroid satın al
BalasHapusheets
TCF
https://saglamproxy.com
BalasHapusmetin2 proxy
proxy satın al
knight online proxy
mobil proxy satın al
AE2CP