Hemat Tempat Di Blog Dengan Widget Ala TeDuWeb


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! ☺☻♦♣•◘

13 Orang Yang Cerewet:

Aeferes / Al Firous mengatakan...

pertamaX

Mbah Qopet mengatakan...

keren jadi simple ya sama ga bikin penuh widget

Farixsantips mengatakan...

numpang promosi ah kesini :D

Unknown mengatakan...

Nice Share ..
Izin coba ya ^_^

Salam Hangat dari Blogger Newbie
Jangan Klik, Bahaya !!!

Berbagi Kreativitas mengatakan...

Nice Tips-Nya gan. Tapi kok ada yang mengganjal yah? :D
Sekedar share saja.. untuk label Anda gan?? blogging itukan seorang Admin blog yang dikatakan Blogger untuk nulis yah? :)

kalo blog kayaknya lebih pas gitu or design.
Salam.

ZONA DOWNLOAD GRATIS mengatakan...

demonya kaya gmn sob?

Unknown mengatakan...

thanx bro...

Anonim mengatakan...

hasilnya kaayak mana sich

Belajar Photoshop mengatakan...

jeren banget kang blognya... itu gelas pesbuk sama twitter uda saiia masukin.. tapi keluar lagi keluar lagi kang...?!?!? kan ada tulisan tutup ya.. tapi malah keluar terus.. ntar airnya pada tumpah dee dari dua gelas tersebut :( *kidding kang :p

Belajar Photoshop mengatakan...

keren* maksudnya kang.. bukan jeren :( hiks hiks hiks

Unknown mengatakan...

nice trik sob, tungguin artikel berikutnya

Jepri Aleski mengatakan...

wah bagus nih, besok ane coba.....

Dicky Rahman Ramadhan mengatakan...

mantab nih simple :D bookmark dlu gan :D

Posting Komentar