PR-Blogger: Add A Floating Navigation Menu Bar With Social Buttons In Blogger

Thinking of increasing your visitors or to add a floating a navigation menu with social sharing buttons in blogger. Now add a smooth floating navigation menu bar to your blog. It also includes the social media icons in the bar to engage your visitors. It is defiantly going to attract your visitors attention in a positive way and makes him to subscribe to your blog. It also helps your visitor to navigate your blog fully as it provides shortcuts for the important articles in your blog. First you should add a CSS code to your template and then paste the widget code. Before Implementing the code, check the demo of the widget in our demo blog.

Click Here For Demo

Liked the Floating navigation menu bar, willing to add it to your blog, Then follow the below simple steps to implement.

Steps To Add Floating Drop Down Navigation Menu Bar With Social Buttons

Go To Blogger
Choose Design
Click EDIT HTML
And Find ]]></b:skin>
Just Above The ]]></b:skin> Tag Paste The Following Code

/*--PR-BLOGGER Floating Navigation Bar--*/
#PR-BLOGGER_wrapper .PR-BLOGGER_social_wrapper
{
margin-top: 15px;
}
#PR-BLOGGER_wrapper
{
width: 100%;
margin: auto;
background: #fff;
height: 50px;
border-top: 5px solid #2c2f32;
border-bottom: 1px solid #EBEBEC;
-webkit-box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
-o-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);
position: fixed;
z-index: 999;
}
#PR-BLOGGER_wrapper .topmenu.notice
{
float: left;
width: 500px;
margin-top: 15px;
color: #fff;
}
#top_menu a
{
color: #fff;
}
#top_menu
{
display: block;
float: left;
list-style: none;
margin-top: 12px;
}
#top_menu li
{
display: inline-block;
margin-right: 15px;
font-family: 'Patua One', 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
font-size: 14px;
text-transform: uppercase;
}
#top_menu li ul
{
display: none;
}
#boxed_wrapper
{
width: 980px;
margin: auto;
}
.PR-BLOGGER_standard_wrapper
{
width: 960px;
margin: auto;
}
.PR-BLOGGER_standard_wrapper.wide
{
width: 980px;
}
.PR-BLOGGER_standard_wrapper.header
{
margin-bottom: 0px;
}
.PR-BLOGGER_social_wrapper
{
width: auto;
float: right;
}
#menuforall .PR-BLOGGER_social_wrapper
{
margin-top: 15px;
}
.PR-BLOGGER_social_wrapper ul
{
list-style: none;
}
.PR-BLOGGER_social_wrapper ul li
{
float: right;
margin-left: 5px;
}
.PR-BLOGGER_social_wrapper ul li img
{
width: 24px;
}
#PR-BLOGGER_menu_wrapper
{
width: 930px;
height: 50px;
padding: 0;
margin:auto;
}
.mainmenu.notice
{
float: left;
width: 600px;
padding: 17px 0 10px 12px;
z-index: 999;
}
#PR-BLOGGER_menu_wrapper .nav ul, #PR-BLOGGER_menu_wrapper .nav
{
list-style: none;
display: block;
float: left;
margin: 0 23px 0 5px;
width: 700px;
}
#PR-BLOGGER_menu_wrapper .nav ul li, #PR-BLOGGER_menu_wrapper .nav li
{
display: block;
float :left;
margin: 0;
}
#PR-BLOGGER_menu_wrapper .nav ul li ul, #PR-BLOGGER_menu_wrapper div .nav li ul, .main_nav li ul
{
display: none;
list-style: none;
background: #000;
position:absolute;
padding: 0;
margin-top: 51px;
width: 200px;
height: auto;
z-index: 1000;
padding-top: 5px;
border-bottom: 5px solid #000;
border-left: 0;
}
#PR-BLOGGER_menu_wrapper .nav ul li ul li ul, #PR-BLOGGER_menu_wrapper div .nav li ul, .main_nav li ul li ul
{
margin-left: 200px;
margin-top: 5px;
}
#PR-BLOGGER_menu_wrapper .nav li ul li a, .nav li ul li a, #PR-BLOGGER_menu_wrapper .nav ul li.current_page_parent ul.sub-menu li.current_page_item a, .nav li.current-menu-parent ul.sub-menu li.current_page_item a
{
background: none;
}
.main_nav li ul li
{
width: 100%;
}
#PR-BLOGGER_menu_wrapper .nav li ul li a, #PR-BLOGGER_menu_wrapper .nav li.current-menu-item ul li a, #PR-BLOGGER_menu_wrapper .nav li ul li.current-menu-item a,#PR-BLOGGER_menu_wrapper .nav ul li ul li a, #PR-BLOGGER_menu_wrapper .nav ul li.current-menu-item ul li a, #PR-BLOGGER_menu_wrapper .nav ul li ul li.current-menu-item a
{
color: #fff;
display: block;
width: 188px;
font-weight: bold;
line-height: 1em;
padding: 10px 0 10px 12px;
background: none;
}
.main_nav ul, .main_nav
{
list-style: none;
margin: auto;
width: 600px;
height: 50px;
z-index: 999;
float: left;
border-left: 1px solid #EBEBEC;
}
.main_nav ul li, .main_nav li
{
display: block;
float :left;
margin: 0;
}
.main_nav ul li a, .main_nav li a
{
display: block;
float :left;
margin: 0 0 0 0;
padding: 18px 15px 14px 15px;
color: #2c2f32;
font-family: 'Patua One';
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
border-right: 1px solid #EBEBEC;
}
.main_nav ul li ul li a, .main_nav li ul li a
{
width: 165px;
padding: 7px 19px 7px 16px;
border: 0;
font-size: 12px;
font-weight: normal;
color: #ccc;
font-family: 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
}
.main_nav ul li ul li:last-child a, .main_nav li ul li:last-child a
{
border-bottom: 0;
}
.main_nav ul li a:hover, .main_nav li a:hover, .main_nav ul li a.hover, .main_nav li a.hover, .main_nav ul li a:active, .main_nav li a:active, .main_nav li.current-menu-item a
{
color: #fff;
background: #1bc4de;
}
.main_nav li:last-child a:hover, .main_nav li:last-child a.hover
{
border-right: 0;
}
.main_nav li ul li a, .main_nav li.current-menu-item ul li a,#PR-BLOGGER_menu_wrapper .nav ul li ul li a, #PR-BLOGGER_menu_wrapper .nav ul li.current-menu-item ul li a, #PR-BLOGGER_menu_wrapper .nav ul li ul li.current-menu-item a,
{
display: block;
width: 170px;
line-height: 0.7em;
padding: 5px 0 5px 30px;
}
.main_nav li ul li a:hover, .main_nav li.current-menu-item ul li a:hover, .main_nav li ul li a.hover, .main_nav li.current-menu-item ul li a.hover, #PR-BLOGGER_menu_wrapper .nav ul li.current-menu-item ul li a:hover, #PR-BLOGGER_menu_wrapper .nav ul li ul li.current-menu-item a:hover, .main_nav li ul li:last-child a:hover, .main_nav li ul li:last-child a.hover
}
div
{
margin:0;
padding:0;
border:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
a
{
color: #2C2F32;
text-decoration: none;
-webkit-transition: color .2s linear, background .1s linear;
-moz-transition: color .2s linear, background .1s linear;
-ms-transition: color .2s linear, background .1s linear;
-o-transition: color .2s linear, background .1s linear;
transition: color .2s linear, background .1s linear;
}
/* Font Face ----------------------------------------------- */
@font-face {
font-family: 'Patua One';
font-style: normal;
font-weight: 400;
src: local('Patua One'), local('PatuaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
ul{
margin: 0;
padding: 0;
list-style: none;}

Now Search For <body> Tag And Just Below It Just Paste The Below HTML Code

<div id='PR-BLOGGER_wrapper'>
<div class='PR-BLOGGER_standard_wrapper'>
<div class='menu-main-menu-container'><ul class='main_nav' id='main_menu'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-533' id='menu-item-533'>
<a href='#'>Home</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Advertise Here</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='htto://www.pr-blogger.com'>PR-Blogger</a></li>
</ul></div>
<div id='menu_border_wrapper'></div>
<div class='PR-BLOGGER_social_wrapper'>
<ul>
<li><a href='http://www.facebook.com/officialprblog' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEvtjp-NGdrF8HrIJuhDQKebQleqjzXSB_Ihi_ieQwkZZAkiawnyTaBaAMxY2qn-Hlu2pjU_4-4_Unlq00SCnsSBwDOq4pjRUgUCy3iLHhmXEf8iFm37ah3Lkd3dLNnqk3xAPiFaqdEJJO/s1600/facebook.png'/></a></li>
<li><a href='http://twitter.com/officialprblog' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi52UkuW9EhmkOknPjhg_y7pNXL7jfl7QYUfIAZdWXjsFFbV8bnokQs5JMHnu-p57Svx-YbKrP80lctZ8P39oFBC14I3Yiy1t96_odqFq1s5LS1EunSfmfqUANSmH_kGgBXRDitEXk2Dnir/s1600/twitter.png'/></a></li>
<li><a href='#' target='_blank' title='Flickr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdGCIfcxj4QDJe1ppleHB2sfBuyD7znJu4Eo_cCABRq6cDzBxKd8VWRnlBLMCx3AsVdAzbXBmPoX9gy8zuRrCPVYGnoB5QvBdkRkqlENRdERa8RisNVFGB509ZZtaTEArxuVKnRyZtcyt-/s1600/flickr.png'/></a></li>
<li><a href='#' target='_blank' title='Vimeo'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK5on7bhFx51Lf3OKpOofm-Gf_UpT0_wn1whhL4yHYHxadgYg1axT4ZBs_ga9dvcsPbHZF7BxlYJ9UDXSDlMgpywgdRvVGaMzG1ZTg-ZOA2zofNqTsvVeWGNFxj2V7BmooyyIAZ0ol4lYw/s1600/vimeo.png'/></a></li>
<li><a href='#' target='_blank' title='Tumblr'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDMvd7ht7pnK1U0NH0o1EfLJRfncbfk4oTeGKnvcuqzQemMivMTtH_1Ca1aU4NUA4Zuy_UWIEc7N926Z4a3jaw3wdNlON5KVRBurMhjQftGQNltsP4rh2qWg4MIpPLoJ3O9zaeXuOhpr-F/s1600/tumblr.png'/></a></li>
<li><a href='http://plus.google.com/100909307322622789154' target='_blank' title='Google+'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-eOYysQNgiiGkDSQSmqKrI1CP-CL49Azh2Ci0xAfpQ5w0QrNgtd8H0DQwcqaWAsCHMAZFyS0FvghAG11DKe-TCqb-sXorNZ4Bwi4tCbYEyDfzDjPJVkxegenb51FQ_Whmf17o4udur3Cs/s1600/google.png'/></a></li>
<li><a href='#' target='_blank' title='Dribbble'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBnWU-ZYMa4qyHvQwBVluDRvfGrOfuVO1Y9o1p5B-t8hp4mHrcT2o5T_Kbf6o2st2PAxlcm9Guglzprlyai0eI2PkxI_dQeQ051C6jHXovX_91Pa-MR8WZlHJrFRFSEUv254ANHaUJsP0x/s1600/dribbble.png'/></a></li>
<li><a href='#' target='_blank' title='Digg'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixTeatLrIwx-OczKVcVn5mdfMWJZztuV4E4y7rBaVHupTBOUawaW0w0tGJxjUu3HxDnb-Lfw3b62czN56MvU0zWa9R2vve9QgRY1t9xL6ixAe40o8kWJE-15tyDHmi72DRwmczdFNFr8W6/s1600/digg.png'/></a></li>
<li><a href='http://in.linkedin.com/in/officialprblog' target='_blank' title='Linkedin'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-e-KYI9fu1PEkcnO433u2e3Pt8Viqnt7lS0oDfcxPb3TyfesXsfsJA696VxWvvSSnFME4zHBJrwKPbFF7FuZnJeXPM_yyYKW4ySKRfVYbDf2f_6Io5Y0vzd4L_tgtwqrrLUG4uRnoh35/s1600/linkedin.png'/></a></li>
<li><a href='http://pinterest.com/officialprblog' target='_blank' title='Pinterest'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2VSRsqf5CiGLNYQs9ar6VIdHJ1kTeXQLB4Or1Frzp3Laf6YDAqugqzNJqdeRTg12cVVwvaladxbTkjv25ZN3eK3vGlZYM76OR0AwkLNOrroaiyE44ARARmaPUeaho8r0MzXJZEKd58sBU/s1600/pinterest.png'/></a></li>
<li><a href='http://feeds.feedburner.com/officialprblog' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgihHc6C6U5x22KqOoeJ5-SDYlOywEGapuui_bQ5Rg_z3ALqvx3JCQ2y28Hj_BgMDqMcY-klE-4PknF8ecf2daW6R136T7YC3QCXM-xPZgWIl2Ini_WxuOvkMETdbfCznH9vPsw5XyK_tK3/s1600/rss.png'/></a></li>
</ul>
</div>
</div>
</div>

NOTE: Change officialprblog To Your Own Usernames.

PR-Blogger

Thursday, 11 April 2013

Add A Floating Navigation Menu Bar With Social Buttons In Blogger

Steps To Add Floating Drop Down Navigation Menu Bar With Social Buttons

No comments:

Post a Comment