...cara membuat 3 widget floating (buka tutup) sekaligus...

Setelah lama mengurusi Template yang sesuai selera saya, sekarang saya akan mencoba berbagi Tips dan Trick lagi nih ....
Bila anda masih belum mengerti tentang judulyang saya berikan maka saya akan coba memberikan contoh berupa gambarnya :

Langsung ajah yuk kita masuk ke cara pembuatannya :

• Login Ke Akun Blogger Anda
• Pilih Rancangan → Tambah Gadget → HTML/Java Script
• Copy semua Kode Dibawah ini : 

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivnQBLHfH02dqkKntqpC8AcaWTx_0I4iiZJUybrfT59BcicjX9ZwBsqRfEvnGOrPC__jE1A5p5c_WU7ZTUeemu4ZgUu7Rn2p42nL2SvnBNqf1k5W6_gy1JdAx6XUjwxblupzuRZIh5UypC/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;} 
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgqVkARBdsCzmOHjij3J3RZuK7RK7HI2zq_HdSql0IjJmuJrPpp21kb6O6n2MBwgs4G7MKCwrsRhTqf9zAhB1HIHy4JVDbkXjn6HVoxeJZedpnT78PN6Gyse-3o1TtTd5KmcC6VheLmssl/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;} 
.barconteblogger{margin:5px 0 0 47px}



.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijmac0GHfjYDNZwaw2LlIfyeEihCJOoFPfiHbG7TnT7HApRJcdy9pWujulZ_ShbH0F53GRiXQsHlhsbTGRXi7sxKihQ3OpXxPTOnRRvFM4vXUR0sMu87DMtaTxUqt_-TYS6B4nM-2Pnh1I/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;} 
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRoApkMQJw9hy12bWuhYIHx9Q_CBMltTshtD5FscONOqGJfWoYWD6RA4lKb4WUG6Qt5xT3IFqDoE143LRTww4Tu5LfV1lUIWo8H7qDu-PDZG-7uP4LfVTU6-x9vC699Efk03jAAybpMswM/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;} 
.barcontetwitter{margin:5px 0 0 47px}



.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHqbOLzzenMQLF2AI6lQEeMLKADvqsTEMzDAQwJw7r5Pm7nM19wXkY27j-jKLYunny-Xgm25HjLDeusAQUb6hBCJOJLB1IC1cbsHki0RFBF4bqFDZ9EsncBYXZjKhop0UnYaheemiYs2gj/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;} 
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjSqMXQoeaNnoqhz02VbgJMVTLuzL6UxegCBO98d2WNKSaKW8dPscB-ajS7iHKGjDBNm20Qis8I_qd7SV9-L8wmrNLlPWiXYrhif6C8g9BPJQFnQ5Ma3GkXmw3HCRp2NVohveqhPg2U2zU/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;} 
.barcontefacebook{margin:5px 0 0 47px} 
</style>


<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'"> 
<div class="barconteblogger">


    KONTEN BLOGGER DISINI


</div>
</div>


<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'"> 
<div class="barcontetwitter">


    KONTENT TWITTER DISINI


</div>
</div>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'"> 
<div class="barcontefacebook">


    KONTEN FACEBOOK DISINI


</div>
</div>

Keterangan :

◄► Kode yang Berwarna  Orange, Aqua, Blue itu adalah kode Gambar, Silakan Anda ganti sesuai selera  anda :)
◄► Kode yang berwarna Hijau Silakan anda isi dengan Konten Facebook, Twitter, Blogger Anda ... Atau bisa anda edit sesuai keinginan anda

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email