Download!Download Point responsive WP Theme for FREE!

SmartBar for Blogger: Increase your subscribers

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:

smartbar for blogger

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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);
// ]]></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(edit button) button which should appear below SmartBar and delete the title.

erase 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.

3 Comments

Add a Comment

Your email address will not be published. Required fields are marked *