There is No doubt That Every Blogger wants Beautiful design for His/Her Blog,Scrolling sticky bar is one Of the design you need for your Blog
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 buttons 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. bloggerdrug 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 Of Adding The Scrolling 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/AVvXsEhrM0OnGioU2u2p3KyxGEldock4-nrCFHPTwIGNyoqBsMw28-CfcJ5Wohq5aKThhP2wyRhhfRQtDyw3WXoqUGKKLYL-o9bqPtT7LvNYkVnWyWW8rfUKsOBTtbg23N3ltonD4julfHYEIwk/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 bloggerdrug 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/AVvXsEgh4I9WocCvq16FcrZOjDD3JAM975cK1Cqk8_gecYP3eibVzA1OvUYcyuAE5d9xXZSh5qbD3GhtglIaaDfIQh1ZFiV3Yo-sEjmi6UQcOVZ2FTeWeHCjXRa9IKboRSOlWMnDKCviTpnSPuU/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/>
Simple Customization:-
Replace the color code #fff with your choice color code
If need replace the font size “13px” required font size
Replace the color code #333 with your choice color code
If need change the height “28px” increase as required size
Change “This bloggerdrug 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.
If you find This Article Helpful,Share it to your Facebook,Twitter and Google + Page.Thanks
Visit Our Other Blog,Potablenews.com or Naijasimple.com for latest News
Like Our Facebook Page Here and Follow us On twitter
0 comments:
Post a Comment