Beranda Artikel Blogger

Membuat Show Hide Widget Dari Bagian Atas dan Bawah Blog

Membuat Show Hide Widget Dari Bagian Atas dan Bawah Blog

Credit: OBoss Blog

Salam sejahtera bagi seluruh warga Blogger Indonesia dan Dunia..

Wah kayanya ada beberapa tutorial yang harus diposting ni, karena ada beberapa widget unik yang sudah tidak saya pakai lagi di blog DiEza ini, takutnya suatu hari pengen pake lagi dan lupa caranya.. hehe .. maklum masih newbie banget, jadi semua yang sudah pernah dipelajari harus selalu disimpan dengan rapi agar nantinya tidak kewalahan ketika ingin menggunakannya lagi..

Okedeh langsung saja... dari judul postingan pasti sudah banyak yang tau ya tentang widget unik yang satu ini, yang fungsinya memunculkan dan menyembunyikan gadget .. biasanya banyak digunakan untuk meletakkan buku tamu atau gadget follow agar tidak memakan tempat dalam halaman blog..

Langsung saja kita mulai tutorialnya.. ada dua macam show-hide widget yang akan saya posting disini, hanya berbeda letaknya saja...

SHOW-HIDE WIDGET DENGAN POSISI DIATAS... (Muncul dan menghilang dibagian atas blog)
Langkah-langkahnya sebagai berikut :

Login Ke akun Blogger sobat
Pilih Rancangan dan Elemen Laman
Lalu Add Gadget dan pilih HTML/Java Script
Lalu Copy dan Pastekan Kode dibawah Ini kedalamnya atau anda bisa pastekan ke notepad dulu jika ingin mengedit lagi..
Pada tulisan yang Berhuruf kapital silahkan ganti dengan kode gadget yang anda inginkan
Lalu Save

Kode :

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #999;
background: #000;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="color: #fff; font-size: 20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFdWUGllytgM7wVX5lcGZJyjf8pNIhQReMu3tXUxc1FNs3uUT913Zevd2BuQz7JACwyFZJc6FSwcryGTSpktx0kjmzZ7ce3Srwath0WnXjN49gSyo3poklvJhyphenhyphen7UW5zR6Es2fzI5BSz4/s1600/animated-circles-mobile-wallpaper-240x320.gif) repeat;">

CONTOH SHOW HIDE WIDGET<br/>
DARI BAGIAN ATAS<br/>
MASUKKAN TEKS ATAU<br/>
KODE WIDGET ANDA DISINI

</div></div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiETdHb3u9DhhPLVMJz0Q1ydal_w4qFh6ttyBLV3c57qGlxOVQ7LsPZJXzUbfDlEsDBGzN_y_atQ1pnC428wSnuZLfo1ZJnktLXQ0v_9P4EgtBPqVJ0lkL64aYCi7xPLWmyTsDowQRSZKdQ/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div>

<div align="center">grab this widget <a href="http://www.dieza.web.id/2011/06/membuat-show-hide-widget-dari-bagian.html">here</a></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

<div style='display:scroll; position:fixed; top:20px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://dl.dropbox.com/u/24368183/chatbox.gif"  /></a>
</div></div></div>

Setelah anda selesai lalu save gadget dan lihat hasilnya.....

SHOW-HIDE WIDGET DARI BAGIAN BAWAH BLOG

Langkahnya sama seperti diatas, hanya code-nya saja yang berbeda...

Kode :

<style type="text/css">
#fl{
position:fixed;
left:430px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #999;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUldN2h14cHFayit7uOmUJu25Cm4qW2a2CfhEd_trHcooX2wLjkHDwUGT41QL2fHGxjrkwKKQvLSvqcRTdPAWdLdFqxK23e5m7MaW4s501gGcTAgpW220NXEaWTJnwfPTTO_KghThu0D61/)#000000 repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">

<div style=" font-size:20px; font-color:#fff; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRFdWUGllytgM7wVX5lcGZJyjf8pNIhQReMu3tXUxc1FNs3uUT913Zevd2BuQz7JACwyFZJc6FSwcryGTSpktx0kjmzZ7ce3Srwath0WnXjN49gSyo3poklvJhyphenhyphen7UW5zR6Es2fzI5BSz4/s1600/animated-circles-mobile-wallpaper-240x320.gif) no-repeat center;">

CONTOH SHOW HIDE WIDGET<br/>
DARI BAWAH BLOG<br/>
[ MASUKKAN KODE GADGET SOBAT DISINI ]
 
</div>
<div style="text-align: center;">
<a href="javascript:showHideFL()">.:Close:.
</a></div>

<div style="text-align: center; color: rgb(51, 255, 255);"><font size="2">grab this widget <a href="http://www.dieza.web.id/2011/06/membuat-show-hide-widget-dari-bagian.html"target=_blank">here</a></font></div>

</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>

<div style='display:scroll; position:fixed; top:200px; right:0px;'><a href="javascript:void(0);"onclick="showHideFL()"/><img src="http://dl.dropbox.com/u/24368183/chatbox.gif"  />
</a></div>

Anda bisa menggunakan dua widget menarik ini secara bersamaan sehingga akan sangat menarik ada gadget yang muncul dari atas dan bawah blog anda.. sesuai kebutuhan anda masing-masing...

anda dapat melihat Demonya dengan klik pada gambar dibawah ini :

demo

SELAMAT MENCOBA SEMOGA BERMANFAAT

Daftar Isi [Tutup]

Lebih baru

Lebih lama