How to Add Menu bar to Blogger with Social Profiles

After launching our WinBlogTem, a responsive blogger template one of our reader request us to share only top header menu bar of that theme for her BlogSpot.com blog. The main feature of this menu is to link social profiles at the right side of the menu bar besides the menu at the left side.

So, I am here to share with all of you the menu bar widget to be added at the top of your blogger blog with social media profiles link.

Table of Contents

Step-1:

Step-2:

Click on Edit HTML text button from the template window for computer.

Step-3:

Now, click anywhere in the template editor and search for closing ]]></b:skin> tag. Copy and paste these CSS codes just above/before the ]]></b:skin>

.swtHeaderMenu {/* SWT Top Header Menu by Showeblogin START */
  font-size: 13px;
  font-family: Arial;
  margin: 0 auto;
  height: 38px;
  background: #0f100f;
  border-top: 3px solid #c10049;
  border-bottom: 3px solid transparent;
  overflow: hidden;
  padding: 0 25px;
  font-weight: 600;
}
.swtHeaderMenu:hover {
  border-top: 3px solid transparent;
  border-bottom: 3px solid #92d050;
}
ul.swt-nav-menu {
  list-style-type: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul.swt-nav-menu li {
  display: block;
  float: left;
  line-height: 38px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
ul.swt-nav-menu li a {
  background: #0f100f;
  color: #fff;
  display: block;
  padding: 0 12px;
}
ul.swt-nav-menu li a:hover {
  background: #c10049;
  border-top: 3px solid #92d050;  
  color: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px; 
  border-radius: 5px;
  -webkit-transition: all .1s ease;
  -moz-transition: all .1s ease;
  -ms-transition: all .1s ease;
  -o-transition: all .1s ease;
  transition: all .1s ease;
}
ul.swt-nav-social {
  height: 38px;
  margin: 0 0 0 0;
  padding: 0 0;
  float: right;
}
ul.swt-nav-social li {
  display: inline-block;
  list-style-type: none;
  float: right;
  margin: 0 0;
  padding: 0 0;
  border-right: none;
}
ul.swt-nav-social li,ul.swt-nav-social li {
  float: left;
  margin-right: 0px;
  margin-bottom: 0px;
  padding: 0px;
  display: block;
  width: auto;
  background: #0f100f;
}
ul.swt-nav-social li a, ul.swt-nav-social li a, a.swtFollow {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 40px;
  height: 40px;
  margin-bottom: 2px;
  text-indent: -9999px;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
a.swtFollow.facebook {
  background-position: 0 0;
}
a.swtFollow.googleplus {
  background-position: -41px 0;
}
a.swtFollow.linkedin {
  background-position: -82px 0;
}
a.swtFollow.pinterest {
  background-position: -123px 0;
}
a.swtFollow.twitter {
  background-position: -164px 0;
}
a.swtFollow.facebook:hover {
  background-color: #39558f;
  background-position: 0 -40px;
}
a.swtFollow.googleplus:hover {
  background-color: #d94a39;
  background-position: -41px -40px;
}
a.swtFollow.linkedin:hover {
  background-color: #0377ae;
  background-position: -82px -40px;
}
a.swtFollow.pinterest:hover {
  background-color: #cd1a3b;
  background-position: -123px -40px;
}
a.swtFollow.twitter:hover {
  background-color: #02a7e6;
  background-position: -164px -40px;
}
a.swtFollow {
  background: url(http://img.superwebtricks.com/files/swtFollow.png) no-repeat 0 0;
/* SWT Top Header Menu bar tutorial at http://www.superwebtricks.com/?p=788 */}

Note: You may download CSS codes for more styles.

Step-4:

Search for opening <header> tag and paste these HTML codes just above/before <header>

<div id='TopSectionBar'>
 <div class='swtHeaderMenu'><!-- SWT Header Menu button START -->
 <ul class='swt-nav-menu'>
 <li id='swtnav1'><a href='#'>About</a></li> 
 <li id='swtnav2'><a href='#'>Advertise</a></li>
 <li id='swtnav3'><a href='#'>Contact Us</a></li>
 </ul><!-- SWT Header Menu button END --> 
 <ul class='swt-nav-social'><!-- SWT Header Menu Social Profile button START -->
 <li><a class='swtFollow facebook' href='#' title='Facebook'></a></li>
 <li><a class='swtFollow twitter' href='#' title='Twitter'></a></li>
 <li><a class='swtFollow googleplus' href='#' title='Google Plus'></a></li>
 <li><a class='swtFollow linkedin' href='#' title='Linkedin'></a></li>
 <li><a class='swtFollow pinterest' href='#' title='Pinterest'></a></li>
 </ul><!-- SWT Header Menu Social Profile button END -->
 </div><!-- SWT Header Menu Tutorial at http://www.superwebtricks.com/?p=788 -->
</div>

Step-5:

Finally, replace # with your respective blog page name and social profile URL and save the template. Enjoy!