Hemat Tempat Di Blog Dengan Widget Ala TeDuWeb

Tutup Ya!!!

widget saya

Akhirnya Bisa Nyuri Widget Lagi


Bagi Kalian Yang Mempunyai Template Blog Dengan Model Minimalis Mungkin Cara Ini Bisa Dilakukan!

Contohnya Ada Disamping!

Mau Membuatnya?

Ikuti Langkah Dibawah

Langkah 1

Copy Javascript Di Bawah Ini

<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>

Paste Di HTML/Javascript

Langkah 2

Copy CSSnya

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:200px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUn8lv2IVn7YwLAOtkmBn9sg6gxgceC82XDZsAAOnTg9eBW2FefzQlFW14yO_A_A7qqO8lc8Z1dnZPXLjiCkOhqskw5OmGBSRvrtcDod30jdr6_ZzKeVzpLo9xXyB-Nx45TPwTPjtH_x4/s1600/sidebarrrr.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
background:#F5F5F5;
padding:10px;
}

</style>

Paste Di HTML/Javascript Tadi

Langkah Terakhir

Copy HTML Di Bawah Ini

<div id="gb" style="right: -1px;">

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

<div class="gbcontent">

<div class="sidebar">
    <ul>
<a href='alamat fb kamu'><img src='http://icons.iconarchive.com/icons/land-of-web/social-coffee/128/facebook-icon.png'></img></a>
<a href='alamat fb kamu'><img src='http://icons.iconarchive.com/icons/land-of-web/social-coffee/128/twitter-icon.png'></img></a>



   </ul>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>

</div>

</div>

Paste Di HTML/Javascript Tadi

Selesai Deh!

Sebagai Ucapan Terimakasih DiFollow/DiComment Juga Boleh! ☺☻♦♣•◘