BlogTariff


Every webmaster have its own ideas in grabbing visitors/readers attention towards subscription buttons to gain more valuable subscribers to their blog. Implementation of various types of bloggertricks and blogger tips on blog makes good sense. Here, BlogTariff brought you a fantastic “Sticky scrolling bar widget” converts visitors/readers attention very easily. This widget have items, Google plus button, Facebook like button, email subscription from,twitter button. The position of this widget is top of the blog which attracts visitors very easily by its eye-catching look. Most of the webmaster recommended this widget on adding to blogs. So, by means of adding widget to blog convert visitors/readers into valuable subscribers for your blog updates. Lets’ start the tutorials for installing the above widget.

How to Add Scrolling Sticky bar widget for blogger?

Method1: Scripts adding
Sign into your blogger account
Click on “EDIT HTML” link tab (Before you do implement this backup your template if any thing goes wrong you can reuse it again)
Now, search for code
<body>
After finding the code copy the below code and paste below to it
<div id='BTF-Bar-Container'>
<div id='BTF-Bar-Content'>
<ul id='BTF-Bar-Left'>
<li class='Home'> <a href='http://www.blogtariff.com/'>Home</a> </li>
<li class='Share'> <div id='share-top'>
<ul>
<li> <a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a> </li>
<li> <g:plusone size='medium'></g:plusone> </li>
<li> <div class='fb-like' data-font='verdana' data-layout='button_count' data-send='false' data-show-faces='false'>
</div></li></ul>
<div style='clear:both;'></div></div></li>
</ul>
<ul id='BTF-Bar-Right'>
<li class='Subscribe'> <div class='BTF-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=BlogTariff&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' style='padding:3px;text-align:center;' target='popupwindow'>
<input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = "";}' placeholder=' Enter Your Email Address :)' type='text' value=''/> <input name='uri' type='hidden' value='BlogTariff'/><input name='loc' type='hidden' value='en_US'/> <input class='BTF-emailsubmit' type='submit' value='Subscribe'/> </form>
<a href="http://www.blogtariff.com/" title="Blogger Widgets" ><img src="http://img1.blogblog.com/img/blank.gif" /></a> </div></li>
<li class='btt'> <a href='#top' title='Back to top'>Slide to Top &#8593;</a> </li>
</ul></div></div>

Customization:

  • Replace the http://www.blogtariff.com/ with your blog URL as highlighted in Red color
  • Replace the BlogTariff with your Feedburner username as highlighted in Pink Color

Method 2: Scripts Adding
Search for code
</body>
After finding the code copy the below code and paste above to it
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
var b = $("#BTF-Bar-Container");var c = b.css("top");$(window).scroll(function (){if ($(this).scrollTop() > 50){b.stop().animate({top: "0px"}, 0)}else{b.stop().animate({top: "-100px"}, 0)}});
//]]>
</script>
<script>
$(document).ready(function(){// fade in .btt
$(function () {$(window).scroll(function (){});// scroll body to 0px on click
$('.btt a').click(function () {$('body,html').animate({scrollTop: 0}, 350);return false;});});});
</script> 
<script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs)}(document, 'script', 'facebook-jssdk'));</script>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
Method 3: Bar Styles Code Adding
Now search for code
]]></b:skin>
After finding the code copy the below code and paste above to it
#BTF-Bar-Container {
background-color:#f6f6f6;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
}

 #BTF-Bar-Container , #BTF-Bar-Left .Home a, #BTF-Bar-Right .btt a,.BTF-emailsubmit {
 box-shadow: 0 5px 5px -5px #999;
 -webkit-box-shadow: 0 5px 5px -5px #999;
 -moz-box-shadow: 0 5px 5px -5px #999;
 }

 #BTF-Bar-Container{
margin: 0px 116px;
 top:-100px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
 text-align:center;
 border-bottom: 1px solid #aaa;
 z-index:999;
padding:4px;
 height:33px;
  position:fixed;
  vertical-align: baseline;
  }

#BTF-Bar-Container *{
padding:0;
}

#BTF-Bar-Container a {
text-decoration:none;
}

#BTF-Bar-Content{
width:1024px;
margin:0 auto;
}

#BTF-Bar-Content li{
list-style:none;
float:left;
}

#BTF-Bar-Left{
float:left;
width:45%;
}

#BTF-Bar-Right{
float:right;
width55%;
}

#BTF-Bar-Left li{
margin-right:1%;
margin-top:-7px;
}

#BTF-Bar-Right li{
margin-top:-7px;
}

#BTF-Bar-Left .Home a, #BTF-Bar-Right .btt a,.BTF-emailsubmit{
font-size:9pt;
font-family:cambria;
font-weight:Bold;
text-transform:uppercase;
color:#fff;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
letter-spacing: 1px;
padding:6px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

#BTF-Bar-Left .Home a:active, #BTF-Bar-Right .btt a:active,.BTF-emailsubmit:active{
position: relative;
top: 1px;
box-shadow:none;
}

#BTF-Bar-Left .Home a{
background:#143eb4;
}

#BTF-Bar-Left .Home a:hover{
background:#1556fa;
}

#BTF-Bar-Right .Subscribe{
margin-top:-14px;
}



#BTF-Bar-Right .btt a{
background:#00810b;
margin-left:3px;
}

#BTF-Bar-Right .btt a:hover{
background:#06b421;
}

.BTF-emailsubmit{
background:#ce1527;
cursor:pointer;
border:none;
height:26px;
width:90px;
}
.BTF-emailsubmit:hover{
background: #f02a37;
}
.textarea{
border:1px solid #aaaaaa;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
resize:none;
font-size:8pt;
font-family:verdana;
width:170px;
height:25px;
color:#000000;
}

#share-top{
background: #f9f9f9;
border:1px solid #dddddd;
line-height: 1;
margin: -4px 0 0 60px;
padding: 10px 0 2px 5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

#share-top li {
display: block;
margin-right: 0;
}

#facebook-widget,#google-widget,#twitter-widget {display:none; }
@media only screen and (min-width : 768px) and (max-width : 1050px),only screen and (min-device-width : 768px) and (max-device-width : 1024px){
#BTF-Bar-Container{
display:none;
}
}

  • Final method after Adding the above code after successful customization and corrections.
  • Now “Save the Template” and preview your blog to test your experiment.
  • If you feel any difficulty in adding the above codes bring to us we try for you.

Appreciation

If you enjoyed this article and we helped you a little bit then favor us on Subscribing to US and Like our Facebook Page.
For Live Tutorials Watch this video for better adding “Scrolling Sticky bar for blogger”.

Posted by
Share to:

Post a Comment Gmail ID

Do not Try to Add Spam Comments

Subscribe to: Post Comments (Atom)
 
Top