Widget CSS Hello Bar Blogspot
Friday, August 23, 2013
Edit
.png)
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 :
<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