Xivanki Share !!: Widget CSS Hello Bar Blogspot

Widget CSS Hello Bar Blogspot - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Widget CSS Hello Bar Blogspot !! Semoga tulisan dengan kategori widget !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Widget CSS Hello Bar Blogspot ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

Widget CSS Hello Bar Blogspot - Sobat semua pasti sudah tahu apa itu Widget Hello Bar. Widget yang biasanya terdapat pada Wordpress ini, posisinya berada diatas sebuah blog ketika kita mengunjungi blog tersebut, dan ketika mouse kita scrool kebawah widget ini akan tetap berada diatas, alias fixed. Widget hello bar ini bisa sobat pergunakan untuk mempromosikan link-link jagoan sobat supaya bisa mendapatkan banyak klik dari pengunjung.

Widget Hello Bar ini bisa sobat pasang di blogspot dengan cara sangat mudah. Sobat tiggal masukan HTML di bagian  layout blogspot. Untuk lebih jelasnya bisa sobat lihat demo nya dibawah ini :

DEMO

Cara menambahkan kedalam widget, silahkan masukkan kode dibawah ini :

<style type="text/css">
/* Hello Bar Clone For Blogger by AllBloggerTricks.com */
#abt-hotsmain{height:100px;left:0;position:fixed;top:0;width:100%}
#abt-hots{background-color:#EB593C;border-bottom:2px solid #FFF;height:30px;left:0;position:fixed;top:0;width:100%;box-shadow:3px 3px 3px 3px;z-index:10000}
#abt-hotsdata{color:#FFF;font-family:serif;font-size:15px;padding:5px}
#abt-hotshide{cursor:pointer;height:20px;position:absolute;right:12px;top:4px;width:20px}
#abt-hotsshow{background-color:#EB593C;border-bottom:3px solid #000;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-left:3px solid #000;border-right:3px solid #000;cursor:pointer;height:25px;padding-top:5px;position:absolute;right:5px;top:0;width:30px}
.abt-hotsdownarrow{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #CC5200;height:0;width:0}
.abt-hotsblock{background-color:#CC5200;height:10px;width:8px}
.abt-hotsuparrow{border-bottom:10px solid #CC5200;border-left:10px solid transparent;border-right:10px solid transparent;height:0;width:0}
</style>
<div id="abt-hotsmain" >
<center id="abt-hotsshow" onmouseup="document.getElementById('abt-hots').style.display='block'"><div class="abt-hotsblock"></div><div class="abt-hotsdownarrow"></div></center>
<div id="abt-hots" >
<center id="abt-hotshide" onmouseup="document.getElementById('abt-hots').style.display='none'"><div class="abt-hotsuparrow"></div><div class="abt-hotsblock"></div></center>
<center id="abt-hotsdata" >
Add your Text/Links here in HTML Format
</center>
</div>
</div>

Cara setting :

Ubah tulisan  Add your Text/Links here in HTML Format dengan kata-kata sobat sendiri.

Okey, cukup sekian Widget CSS Hello Bar Blogspot. Semoga bermanfaat



Source : www.allbloggertricks.com