Sticky Bar With Share Buttons And Text For Blogger

| |


BTH's Stickybar is just a custom version of hello bar but it has no Ads and can easily be styled and customized to blend your blog template. Since it is always better to have your own custom widgets therefore we designed this easy bar which sticks to the top of your blog or website to grab the attention of all visitors. Both these social plugins would help you increase your fan following. The Facebook like button will be linked to your fan page so that any like may turn out into a Fan. You might also like to learn Adding Reply Link To Blogger Comments Lets get to work then!



Adding Sticky Bar With Share Buttons To Blogger.
1. Goto template > edit html.
2. Backup your template.
3. Search For ]]></b:skin>
4. Just below it paste the following code-

/*Blogger Tricks Hut Stickybar*/
#bth_bar{ 
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjwK1VFbvGZAPBkqE6QyW2AJ_4P_hx_gNry6rvtZdnjuH6TkelNGhrf7Q5A1Bf7Ud4wZINshlhGGULGNv2_-P6gk12AedNpUmC3yiFyxvSotW43SDnpySvFp9Hu67ktynMm0KwSdsY77w/s400/stickybar.png') repeat-x; 
width:100%; 
margin:0 auto; 
text-align:center; 
padding:3px 0 0 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:12px; 
font-weight:bold; 
font-family: arial,"Helvetica",sans-serif; 
#bth_bar a{ 
text-decoration:underline; 
color:#E2E504; 
#bth_bar a:hover{ 
text-decoration:none; 
#bth_bar p {margin:0; list-style:none;} 
#bth_bar img {vertical-align: middle; 
      margin-right: 6px;}
5. Now search for </head> and paste the following JS code-

<script type='text/javascript'> 
//<![CDATA[ 
var bth_arr = new Array(); 
var bth_clear = new Array(); 
function bthFloat(bth) { 
bth_arr[bth_arr.length] = this; 
var bthpointer = eval(bth_arr.length-1); 
this.pagetop = 0; 
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body; 
this.bthsrc = document.all? document.all[bth] : document.getElementById(bth); 
this.bthsrc.height = this.bthsrc.offsetHeight; 
this.bthheight = this.cmode.clientHeight; 
this.bthoffset = bthGetOffsetY(bth_arr[bthpointer]); 
var bthbar = 'bth_clear['+bthpointer+'] = setInterval("bthFloatInit(bth_arr['+bthpointer+'])",1);'; 
bthbar = bthbar; 
eval(bthbar); 
function bthGetOffsetY(bth) { 
var mtaTotOffset = parseInt(bth.bthsrc.offsetTop); 
var parentOffset = bth.bthsrc.offsetParent; 
while ( parentOffset != null ) { 
bthTotOffset += parentOffset.offsetTop; 
parentOffset = parentOffset.offsetParent; 
return bthTotOffset; 
function bthFloatInit(bth) { 
bth.pagetop = bth.cmode.scrollTop; 
bth.bthsrc.style.top = bth.pagetop - bth.bthoffset + "px"; 
function closeTopAds() { 
document.getElementById("bth_bar").style.visibility = "hidden"; 
//]]> 
</script>
6. Now search for <body> and just below it paste this code-
<div id='bth_bar'> <span style='padding-right:5px; float:right'> <img align='absmiddle' border='0' onClick='closeTopAdsundefined);return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzKbOwcOnoQ298PQrC4ndW5391nW2WBJV6ug5aSoNjnrdCFV7Ci8D3JVJ9PZwqRuMLl8NDsmv-_9tFJlk0nKD6UsnP7zGL9VeUx70oJKmbfLKiPX9YLZydZ0-GVeI3D0Qi1_NgpOtt7ps/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span><div style='float:left; padding-left:10px;'>Your Text</div> <div style='float:right; padding-right:0px;'> <p style='font:bold 12px arial; float:left; margin:5px;'>Liked us?</p><iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloggertrickshut&amp;send=false&amp;layout=button_count&amp;width=80&amp; show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21' style='border:none; overflow:hidden; width:80px; height:21px;'/> <g:plusone href='http://bloggertrickshut.blogspot.com'size='medium'/> </div> </div>
7. Replace 'your text' with any text.
   Replace 'bloggertricksut' with your Facebook username.
   Replace our blog url with your blog url.  


0 comments:

Post a Comment

Powered by Blogger.