Cara Membuat Box show/hide untuk widget

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Cara Membuat Box show/hide untuk widget dan semoga artikel ini bermanfaat.


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">
#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>
itulah kode untuk kotak/box widget.

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()"/>
Judul Widget disini<br/></a></div>
kode yang berwarna merah samakan dengan kode berwarna merah langkah pertama.
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:
<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 -----
</td></tr>
</table>
untuk lebih jelas cara peletakan baca Cara Meletakan Widget di Sudut Blog
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

Masukan Alamat Email Sobat:

Delivered
feedburner

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 14:56

10 komentar :

  1. terima kasih banyak atas info yang menarik ini..

    tukar link yuk..


    #Salam sejahtera

    BalasHapus
  2. mampir sejenak sambil baca artikel sobat , Tuker link yuk sob sama blog sederhana saya :)

    Oiya follow blog saya nanti saya akan folback 4 kali . ayoo buruan follow ^_^

    BalasHapus
  3. 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

    BalasHapus
    Balasan
    1. sudah paham mas,tapi saya nemu masalah baru .... pnya saya jadi seperti ini http://completion-animation-3dsmax.blogspot.com,mohon mencerahanya ...

      Hapus
    2. problem solve mas ... =D hehee ,,tinggal di poles dikit utk ganti background ,dll @@, **p

      Hapus
  4. saya dah coba buat seperti anda punya ini tapi masalahnya kotaknya itu penuh dari keri ke kanan, mohon petunjuknya sobat.....!

    BalasHapus
  5. Makasih banyak buat infonya, sangat membantu sekali saya buat saya untuk mendapatkan inspirasi baru...

    BalasHapus
Silahkan Tinggalkan jejak sobat, bila mau menggunakan emotion silahkan klik emotionnya kemudian copy dengan ctrl+c dan paste kodenya didalam kotak komentar...

close
GUESTBOOK
Google PageRank Checker Powered by  MyPagerank.Net
backlink
Dashboard
| Copyright © 2012 |
| Belajar Komputer Melalui Internet |
| Desain by: Abdul Kohar | Powered by: Blogger |