, , , , Couch Mode Print Story

Add Stickybar with Facebook Like Button to Blogger



You can add stickybar in blogger blogs by showing the bar at the top of header to grab the attention of all visitors. A sticky bar is now used widely by many blogs/websites for notifying
visitors of important updates, offers, latest news etc.
Stickybar is just a custom version of hello bar but it has no Ads. There is a social plugin (Facebook Like Button) added which will help you increase your fan following. View the demo below to see the bar working.





How to Add Stickybar to Blogger



STEP #1: Log on to Blogger

STEP #2: Go to Dashboard>Template

STEP #3: Click on Edit HTML>Proceed

STEP #4: Tick on Expanded Template Widget check box

STEP #5: Take a Backup your template

STEP #6: Find (Ctrl + f) for the code below

]]></b:skin>

STEP #7: Just above it paste the following CSS code,

/*WT Stickybar*/
#wt_bar{ 
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMFY3LJSmLlOMPMZcL-iPehFKSrsNjRsC4bRYrE_53dqmoOZ5K8G4CFvSP-Qy3gvz9nDRCfs0zeicKNaxfHDN94_VKAjO2moE9-CSpZgJd_yUDJ_2-4lmn7Puu8WYUT5rviMUdDABHrjc/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; 
} 
#wt_bar a{ 
text-decoration:underline; 
color:#E2E504; 
} 
#wt_bar a:hover{ 
text-decoration:none; 
} 
#wt_bar p {margin:0; list-style:none;} 
#wt_bar img {vertical-align: middle; 
      margin-right: 6px;}


STEP #8: Next search for </head> and paste the following JavaScript code just above it

<script type='text/javascript'> 
//<![CDATA[ 
var wt_arr = new Array(); 
var wt_clear = new Array(); 
function wtFloat(wt) { 
wt_arr[wt_arr.length] = this; 
var wtpointer = eval(wt_arr.length-1); 
this.pagetop = 0; 
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body; 
this.wtsrc = document.all? document.all[wt] : document.getElementById(wt); 
this.wtsrc.height = this.wtsrc.offsetHeight; 
this.wtheight = this.cmode.clientHeight; 
this.wtoffset = wtGetOffsetY(wt_arr[wtpointer]); 
var wtbar = 'wt_clear['+wtpointer+'] = setInterval("wtFloatInit(wt_arr['+wtpointer+'])",1);'; 
wtbar = wtbar; 
eval(wtbar); 
} 
function wtGetOffsetY(wt) { 
var wtTotOffset = parseInt(wt.wtsrc.offsetTop); 
var parentOffset = wt.wtsrc.offsetParent; 
while ( parentOffset != null ) { 
wtTotOffset += parentOffset.offsetTop; 
parentOffset = parentOffset.offsetParent; 
} 
return wtTotOffset; 
} 
function wtFloatInit(wt) { 
wt.pagetop = wt.cmode.scrollTop; 
wt.wtsrc.style.top = wt.pagetop - wt.wtoffset + "px"; 
} 
function closeTopAds() { 
document.getElementById("wt_bar").style.visibility = "hidden"; 
} 
//]]> 
</script>

STEP #9: Then search for <body> and just below it paste the following HTML code

<div id='wt_bar'> <span style='padding-right:5px; float:right'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxdRuKkzvHcXDiGk6eMkLndFYPuMtxmHlA4uz6jgXknvgYWyRzrMv7c-UKO3ZLQb8rY6dJQZYfQq_Kiz_gnvjK3nHTTELzLGVHAAH9ody7WcImr3FYorgRLJiDTXXKQjpMwDtf2ptC5WA/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span><div style='float:left; padding-left:10px;'>Stickybar with Facebook Like Button</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%2FWIKITECHNOL&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;'/></div> </div>

Customization

  • To change the background color of the bar simply edit #0080ff in STEP #7 with a color of your choice.
  • You can write your message, announcement, anything you like instead of that pink highlighted text.
  • Replace WIKITECHNOL with your Facebook Fan Page Username.



 STEP #10: Save your template and you are done!

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.


{ 0 comments... read them below or add one }


Post a Comment

 
↑