Add Auto Scrolling sticky Bar with Close Button

There is no end to creativity every one has its own creativity and wide range of knowledge world wide. Dedication towards blogging and using perfection skill or endeavor to personalization of skills is a good technique. These types of skills execution makes blog readers/visitors attractive and craft boosting of traffic in alternative methods. Continuation of professionalism to create a Sticky Navigation or Scrollable bar spiced up with hid button or cancel button. Instead of discussing about this widget is not makes any sense but when it is executed on your blogger blog makes definite a wonderful sense to attract more visitors/readers towards your blog. BlogTariff works very hard every day with its associated blog in what way to share valuable information to their visitors/readers to educate in easiest manners. Let’s begin the tutorials how to create this widget for your blogger blog.

Advantages by adding BTF Sticky bar:-

It has stylish and sleek Compatible colors. It’s a simple customized interface with ultra tempo technology. Best integration with any blog platform especially Blogger.com

How to Install BTF Sticky Bar with finishing button

In this tutorial we try to educate you precision for adding this widget to your blogger blog.
Sign into your blogger account
Click on “Design (Layout in the new blogger interface)”
Click on “EDIT HTML” (Back up your template before you execute this trick if any thing goes wrong you can reuse it again)
Search for code

]]></b:skin>

After finding code paste the below CSS styling code just above to it.

#btf_bar{
background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYs2XfnGN2MBBxlX71ziVw-5OczyDcmTRI4Lz_JG8dTLUKBcejE_bPHFM_qq18f4Xg3Y6W1Be9NaWnxc1q13sExKfqk_q6hHf9dfXd6p_lXJ4tZa8kaUY3J5Dh_uqC178kv6hYImZ-ptQ/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
  -moz-box-shadow: #666666 0px 1px 3px;
  -webkit-box-shadow: #666666 0px 1px 3px;
  box-shadow: #666666 0px 1px 3px;
  z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#btf_bar a{
text-decoration:underline;
color:#E2E504;
}
#btf_bar a:hover{
text-decoration:none;
}
#btf_bar p {margin:0; list-style:none;}
#btf_bar img {vertical-align: middle;
      margin-right: 6px;}

Now search for code </head> and paste the below code just above to it

<script type='text/javascript'>
//<![CDATA[
var btf_arr = new Array();
var btf_clear = new Array();
function btfFloat(btf) {
btf_arr[btf_arr.length] = this;
var btfpointer = eval(btf_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.btfsrc = document.all? document.all[btf] : document.getElementById(btf);
this.btfsrc.height = this.btfsrc.offsetHeight;
this.btfheight = this.cmode.clientHeight;
this.btfoffset = btfGetOffsetY(btf_arr[btfpointer]);
var btfbar = 'btf_clear['+btfpointer+'] = setInterval("btfFloatInit(btf_arr['+btfpointer+'])",1);';
btfbar = btfbar;
eval(btfbar);
}
function btfGetOffsetY(btf) {
var mtaTotOffset = parseInt(btf.btfsrc.offsetTop);
var parentOffset = btf.btfsrc.offsetParent;
while ( parentOffset != null ) {
btfTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return btfTotOffset;
}
function btfFloatInit(btf) {
btf.pagetop = btf.cmode.scrollTop;
btf.btfsrc.style.top = btf.pagetop - btf.btfoffset + "px";
}
function closeTopAds() {
document.getElementById("btf_bar").style.visibility = "hidden";
}
//]]>
</script>

Now search for code </body> and just above to its paste the below HTML code.

<div id='btf_bar'> This is Blogtariff.com Tested Link - Visit Again
<span style='padding:0px; float:right'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnPnUCZNioJYpcvIYbI0bPbzqX0dxlxUSvpdyfSINepQZ9tu6C8dYOhkFWG0eTVL9GZtHeFVqRg41vi3-NKFna5tOOECdJwekSBXFSDYLtqRbHbcaro64SHVyCfzphmfFG59qKCyuYirs/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/> 

Simple modifications:-

Replace the color code #fff with your choice color code by using our “Color code chart”
If need replace the font size “13px” required font size
Replace the color code #333 with your choice color code by using our “Color code chart”
If need change the height “28px” increase as required size
Change “This Blogtariff.com Tested Link - Visit Again” with the anchor text and links to display your words.
After necessary successful modifications “Save the template” and preview your blog with good finishing effect.
Acknowledgment:-
 If you enjoyed this article let know your view on this article. If you facing any problem in this regard bring to us via comments we try to rectify your problem. We always respect your views and suggestions via comments. Thanks to Omlitech