Hello bar is one of the best notification bar for WordPress and also for any web posting system. I really liked their idea and individually that inspired me to create Mintbar an opensource notification bar. Hello Bar is still just HTML and CSS on your website, you can use CSS to management its exposure. Merge this with WordPress customized publish meta and you can management where on your website your Hello Bar shows up on a per-page basis. By default this code snippet will display your Hello Bar enabling you to set a Customized Area value on those webpages you want to cover up your Hello Bar.
This plugins helps you to get a lot of visitors to one desired page. If you are internet hosting service any competition or free gift, this bar will help you get a lot of traffic on that particular page. The Hello Bar looks like it has some really cool features onto it, but to be honest, I can’t imagine myself taking advantage of the split testing options too much on the particular website I was operating on. As I was looking at the bar I really believed, this factor could be quickly regenerated. We have designed a clone of this plugin but without using any JavaScript it is purely based on HTML and CSS. The plugin has many features such as Beautiful Design, Shadow effect, Compacted dimension to get quicker fill time etc. In situation the bar irritates any of your guest, it can be closed just by clicking on a single button. The awesome “Hello Bars” on tons of websites before and always wanted to play with it. The other day I had a scenario where I required it for a website I was operating on so I searched on over to hellobar and to my dismay I saw I needed to pay for it, a monthly fee per impression.
Demo Image:
CSS Hello Bar Clone widget for Blogger
Step-1 Go to Blogger dashboard.
Step-2 Go to Layout.
Step-3 Click on Add Widget.
Step-4 Select HTML/JavaScript.
Step-5 Paste the below code in the HTML/JavaScript box.
<style type="text/css">
/* Hello Bar Clone For Blogger by hackpower.org */
#tob-hotsmain{height:100px;left:0;position:fixed;top:0;width:100%}
#tob-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}
#tob-hotsdata{color:#FFF;font-family:serif;font-size:15px;padding:5px}
#tob-hotshide{cursor:pointer;height:20px;position:absolute;right:12px;top:4px;width:20px}
#tob-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}
.tob-hotsdownarrow{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #CC5200;height:0;width:0}
.tob-hotsblock{background-color:#CC5200;height:10px;width:8px}
.tob-hotsuparrow{border-bottom:10px solid #CC5200;border-left:10px solid transparent;border-right:10px solid transparent;height:0;width:0}
</style>
<div id="tob-hotsmain" >
<center id="tob-hotsshow" onmouseup="document.getElementById('tob-hots').style.display='block'"><div class="tob-hotsblock"></div><div class="tob-hotsdownarrow"></div></center>
<div id="tob-hots" >
<center id="tob-hotshide" onmouseup="document.getElementById('tob-hots').style.display='none'"><div class="tob-hotsuparrow"></div><div class="tob-hotsblock"></div></center>
<center id="tob-hotsdata" >
Add your Text/Links here in HTML Format
</center>
</div>
</div>
Step-6 Change Add your Text/Links here in HTML Format with your desired text/link and remember that you should add it in HTML format.
Step-7 Now Save widget and you are done.
Happy Blogging with Enjoy .............
ليست هناك تعليقات:
إرسال تعليق