Make Navbar Bar with FB Like Button and Google Plus Button

Friday, December 23, 2011

Make Navbar Bar with FB Like Button and Google Plus Button

Make a Navbar for blogger with Facebook Like Button and a Google Plus Button. You can also show your Notifications and updates on it.

Live Demo

Follow steps:

Go To Blogger > Design > Edit HTML
Backup your template
Search for this

]]></b:skin>

4. Just above it paste this code.

/Navbar/
#mbt_bar{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZrwDEidkeJ329DAzKsUOnrnFTwpFbQjFu8-ehJ6MtafxAyEfrXpZ5XCiNi-LrJhsGEqGevsAmmp5kMNqP50dLQmAQn_dgeqbn09La-jXJHrUD3SWvXafq1s9aCcdTnHFhBHlhxhAL88I/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;
}
#mbt_bar a{
text-decoration:underline;
color:#E2E504;
}
#mbt_bar a:hover{
text-decoration:none;
}
#mbt_bar p {margin:0; list-style:none;}
#mbt_bar img {vertical-align: middle;
margin-right: 6px;}

5. Search for </head> and paste this code above it.

<script type='text/javascript'>
//<![CDATA[
var mbt_arr = new Array();
var mbt_clear = new Array();
function mbtFloat(mbt) {
mbt_arr[mbt_arr.length] = this;
var mbtpointer = eval(mbt_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt);
this.mbtsrc.height = this.mbtsrc.offsetHeight;
this.mbtheight = this.cmode.clientHeight;
this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]);
var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);';
mbtbar = mbtbar;
eval(mbtbar);
}
function mbtGetOffsetY(mbt) {
var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop);
var parentOffset = mbt.mbtsrc.offsetParent;
while ( parentOffset != null ) {
mbtTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mbtTotOffset;
}
function mbtFloatInit(mbt) {
mbt.pagetop = mbt.cmode.scrollTop;
mbt.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px";
}
function closeTopAds() {
document.getElementById("mbt_bar").style.visibility = "hidden";
}
//]]>
</script>

6. Search for <body> and paste this code below it.

<div id='mbt_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/AVvXsEjLDAjXNVJ9NRvkK2Glo7qPgLpA7mB6c7P4W_7JbEufPWeKotInSdcsZj6H1elHmoI4ETv9T3qdA6F6d_yQqnCQs362nio_Y_RoKf-mHlUUsrBYz0_xBVdgyW6_3Oj2HY0R5u2FtbGVmdk/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span><div style='float:left; padding-left:10px;'>Navbar with social Plugins</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%2FCOMPUTERS.TRICKS&send=false&layout=button_count&width=80& show_faces=false&action=like&colorscheme=light&font&height=21' style='border:none; overflow:hidden; width:80px; height:21px;'/> <g:plusone href='http://www.fblatest.in' size='medium'/> </div> </div>

You can write your message, announcement, anything you like instead of that purple text.

Replace blogger tricks with your Facebook Fan Page Username and replace our blog link with yours.

7. Note: Skip this step if you have already added google+ button somewhere already in your blog.

Paste the following code just below ]]></b:skin>

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>

Thanks to :----

Mohammad

For More www.fblatest.in visit here

Posted By:Hemant Verma Admin and Author

Hemant Verma is the founder of Widget Generators. Graduate in Computer Applications in 2012, Love to Make Blogger Hacks and Like to Play with HTML and a Business Man.

Become a Blogger

Demo 1 - WG 91481

Ad 468 X 60

Friday, December 23, 2011