Cara Buat 3-in-1 Box Floating

Cara Buat 3-in-1 Box Floating, kira-kira kaya gitu judulnya. Widget ini untuk menampilkan gadget Blogger Connect, gadget Twitter, dan gadget Facebok dalam satu kotak, makanya diberi judul 3-in-1 Box, dan Floatingnya itu ditempelkan pada sisi kanan template secara vertical, seperti yang ada pada blog ini.

Mau coba yang satu ini, ayo ikuti langkahnya berikut ini:

1. Dashbord > Rancangan > Tambah Gadget
2. Lalu tambahkan HTML/JavaScript
   
   
   
   
   
3. Kemudian letakkan kode berikut ini:
   

   <style type="text/css">
   
   .barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Tq9j6wVxUJYkjEDjqwpm5Ikx5ECP2WzjHvLNMj4nNiyd_VnABq9DfGuhrcF-rha71dV8QbZE6kKwd0fxx4VMg_IP-bwNUmHfmr5Wc71h6yCE0HC_RKazQf7TPLuvawI37KlM10_SKxHT/');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/AVvXsEhs3aehI-nKFH1BSpjP9k3-eta7re9EoUjtfehB10_CT80enIzjqX79CpdGTLo9RechKj6iY0cHStUDGjw5JkgYxeldEbJfhjTjF-Mb7BdO9oDmdJhn6AAqEIOhGe-59HGhusZ_Gb_Fih4H/');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/AVvXsEg6M253tWQe0BSIw7Kdx1iG1O2b9-791KwRoqnS0INErbmFvc_jeYZn6pGq1FQG0Q_991v18x0tGeu-F6lBixFiztd8eeiVdbv-I0tFBQjBz3rjC5-ABCQvUO6t5USY0uGb_SUGw3pBrE_a/');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/AVvXsEifGvEl6NZhLSK4aHeLpcLo5vpJ4-hO26NN7w0hR92PmPrK_f7uvBRwQuxefbMBUMAFlwJB76MBwc1Zxfi4cgqCLqkW0E67cItQHsw-N0GQmZuFAT7jGoswLhqfMD9y61rD1vrxOtjdSFwL/');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/AVvXsEi9i7xPv0Hotob51w3PcrFWZJaHssn9jBwMFBeyyZ6KL1PendKFqHyxeimPztsFS9CqHjwq2yN62NHXcINQjfUWNgzmwyQ_jZrTqeZfOuQkCrbbsVilthktkH_OXohWK1OLCGm4YX8W6nH5/');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/AVvXsEj_J9wAW8aS41wIZ_sNKggn8uV3Qgkrj5GS044W14mqeEdWvYxJn4bal2f0PnZ2cS1OOHEaXi2aC_QzDz1APzSuF_8QeUmHb3cy5B_tesxn4glxrPQE34_hc0XUH8UvWSy3NXkktI0vxpoP/');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">
   <span style="color: red;">
   
   TEMPAT KODE BLOGGER CONNECT
   
   </span>
   </div>
   </div>
   <div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
   <div class="barcontetwitter"><br />
   <span style="color: red;">
   
   TEMPAT KODE TWITTER
   
   </span>
   
   </div>
   </div>
   <div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
   <div class="barcontefacebook">
   <span style="color: red;">
   
   TEMPAT KODE FACEBOOK
   
   </span>
   </div></div>

4. Simpan, selesai. Selamat mencoba

Demikian Cara Buat 3-in-1 Box Floating, semoga bermanfaat.