SmartBar for Blogger: Increase your subscribers
It’s being a long concern for blogspot users that they cannot enjoy those features which WordPress users can. One of those features is SmartBar, SmartBar is a kind of a bar which appears on the top of the screen with fixed position.
Like this:
Have a demo of this bar first:
DEMO
It helps bloggers to increase their email list rapidly. Because now you have a “subscribe us” option on the top of the screen which will get more attention from your users because of its ideal position.
The Idea of making this SmartBar came in my mind when I was analyzing some WordPress blogs. When I saw Robbie Richard’s blog, the first thing which convinced me to subscribe his newsletter was his cool SmartBar.
So I decided to make the exact same bar for Blogger users too. And here it is:
[php]
.test {
font-family: fantasy, Arial;
color:white;
background-color: #505050;
font-style: normal;
width:100%;
height: 50px;
border: 4px outset;
position: fixed;
font-size: 15px;
z-index: 9999999999999;
}
.test span {
font-size: 20px;
font-weight: bold;
}
.twitter-follow-button {
margin-left: 450px;
position:relative;
bottom:8px;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-address {
width: 20%;
height: 22px;
font-size: 13px;
border: 4px inset;
position: relative;
bottom: 91px;
left: 400px;
}
.FollowByEmail .follow-by-email-inner .follow-by-email-submit {
width: 57px;
margin: 0;
margin-left: 7px;
border: 0;
border-radius: 2px;
-moz-border-radius: 2px;
background: #000;
background: #FF9966;
color: #fff;
cursor: pointer;
font-size: 13px;
font-weight:bold;
height: 29px;
z-index: 0;
position: relative;
right: 510%;
top: -90px;
}
.test br {
position:relative;
bottom:4000px;
}
#FollowByEmail1 title{
display:none;
}
[/php]
Just copy this code and move to
Blogger>YourBlog>Templates>Edit Html
Now Search for
[php][/php]
tag and just before it paste the whole code which is given above.
Now search for
[php][/php]
tag and just above it, paste this code:
[php]</pre>
<div class="test"><a style="margin-top: 5px; margin-left: 7px; color: #666666; float: left;" href="https://articlesteller.com" target="_blank"><img src="https://articlesteller.com/wp-content/uploads/2015/05/HTML5.png" alt="" /></a>Welcome
This Blog is Powered By AT<a class="twitter-follow-button" href="https://twitter.com/HusnainMz" data-show-count="true" data-size="medium">Follow @HusnainMz</a><script>// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// ]]></script>
<h2 class="title"></h2>
<div class="widget-content">
<div class="follow-by-email-inner"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow">
<table width="100%">
<tbody>
<tr>
<td><input class="follow-by-email-address" name="email" type="text" placeholder="Email address…" /></td>
<td width="64px"><input class="follow-by-email-submit" type="submit" value="Submit" /></td>
</tr>
</tbody>
</table>
<input name="uri" type="hidden" />
<input name="loc" type="hidden" value="en_US" /></form></div>
</div>
<span class="item-control blog-admin">
</span>
</div>
<pre>
[/php]
After installing the plugin this SmartBar should appear on your screen. Open your blog and check that whether the bar is appearing on top or not. If it is appearing then you have done everything in the right manner. If are having any difficulties then please let me know.
Now you will find that the Subscribe form is appearing after the bar which means that it is not into the SmartBar wrap. To fix this problem just click on the edit() button which should appear below SmartBar and delete the title.
Don’t forget to change the FeedBurner URL, Just replace the default feedburner ID from your original ID if the system has not automatically replaced the ID.
Also search for Follow @HusnainMz in the code and replace @HusnainMz with your original Twitter ID.
NOTE:
Make sure that you do not already have a Follow by Email gadget installed in your sidebar, otherwise the SmartBar will not work perfectly.
Related Posts
-
How to make money with Affiliate marketing from your website?
5 Comments | Jan 22, 2015 -
Facebook widget for blogger
2 Comments | Jan 24, 2016 -
How to secure your WordPress Blog?
No Comments | Dec 17, 2014 -
How to engage your Audience directly(Buzzbundle)?
No Comments | Jan 11, 2015
About The Author
Hasnain Haider Abbas
Hasnain Haider Abbas is a 25 years old web entrepreneur and founder of Articlesteller.com. In the early stage of his life, he fell in love with technology, His expertise is in SEO, Content writing, Social Media, Affiliate Marketing, Web development, and Business promotion.
Hi,
The code which you have mentioned is not working. its simply overwritting all the existing code. I tried in multiple times in many ways, but not luck. Even the demo icon is also not working. Can you please do this by video.
Sure I will, You will be entertained by a video shortly.
It works fine on every single Blog on which I have installed it. Can I have your Blog’s URL?