Cara membuat 3-in-1 Box Floating

Oleh Syafdillah

02 Januari 2016

Cara Buat 3-in-1 Box Floating, kira-kira seperti itu judulnya. Widget ini untuk menampilkan tiga box/kotak secara bergantian yang merapat ke sisi kanan dengan tiga susun kotak/box yang gunanya untuk menempatkan widget seperti misalnya Blogger Connect,  Twitter, dan  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 widget yang satu ini, cukup mudah kok. Masuk ke Dashboard > Rancangan > Tambah HTML/Javascript, lalu isikan kode berikut di bawah ini lalu simpan selesai.

Selamat mencoba.

<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZOywwvGTi2wqaJpCgzrbdEZBxg9avcJUGoF-lFfP8NKQVC5DLKn_qN7R4JjE7YF99EPudIBXWlWCQuEBaqXxHVG4tMgCFFOudfwmV0TDuATzZSFMtAWl8JF6ostvWghW0gg0s34CtEKQY/');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/AVvXsEhpX8F5e4u2t-KOI_ARYlAqnRbfry0luNhmrpCwtyIkc8EnpQEa2X0ogl39yflsSPF9Hgh3HIrKpwHFVgg7zEi4SMRzdDScyl5gEQh_bWW_bFWTLLBpJz99vDWSMTpRgzYkGwe01jNLIDmp/');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/AVvXsEgOgAa-pDZ2_n6bAuGvb0QpgTgSFCkOCySRqesisbh-4ks_h06JQQX_Jf99M7JtMv-qQNz9EbKjDGTjQaemwYspCWh7JdVA-W2Uc0TjeR1ne4S4qXNhk9g7wFTEP8R60alD2ALaQeZm5FNR/');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/AVvXsEissuv338z89TB7inS2vkXHR3GittvLSqwjdAl1FKjsFN9N1SkbebaHRkM4WGghbQm58haKZIEpw386AkTBctmL4qac3uD8wzXQczMrlSCARFes9Knaxk_vvuwn0TlBI-3QWIjdOy34rIBj/');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/AVvXsEiZoygmyUCxhgSVfFA22J3SP64YEIYlfbemjCk7rmzcgQWyNcHE5R0KuTzSNNdMblYpZ4lHtxlEY18BD74iR2ZD-VqvUABvbFvtbzptUXBhWRO5AC8Z8gfINntJcATmYdHjjU7QDrNpqIA9/');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/AVvXsEiSQdS6VHqcMGe6ZjKb-M0TCGZqahVZdd33BdyYnfSnCZo4-kqsiWI-3lg8ccipcyelQkrUZv_qWIDtprV0xp4g95AcL6qrCf4lxmxc9kFX9biQc1D5EpHl-Qd1RB9Ilis942L4sW0HTsyl/');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;">
TEMPA KODE FACEBOOK
</span>
</div></div>

Ayo Like Facebooknya

Tag : Blogging