Blog Personal tentang tips Blogging dan Internet Marketing

Cara membuat 3-in-1 Box Floating

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

Share this:

Share this with short URL: Get Short URLloading short url

Berlangganan :
Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari langsung di pesan kotak masuk.

feedburner


Anda telah membaca artikel :
Cara membuat 3-in-1 Box Floating
Semoga bermanfaat, Terima kasih.
Cara style text di komentar Disqus:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

Tidak ada komentar

Back To Top