How to Add Menu widget to Blogger Header with Social Profiles

Insert menu bar at the top i.e. above header section of your BlogSpot blog (including responsive blogger template) along with social profiles icons.

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 blog. The main feature of this menu bar 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.


Login to your blogger account and navigate Template tab of your blog.


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


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 bar 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( no-repeat 0 0;
/* SWT Top Header Menu bar tutorial at */}


Note: You may download CSS codes for more styles.


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 -->


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

Shortlink: Free Technical Help
If you don't want to miss our daily tutorials then you may Subscribe to Showeblogin via Email | Facebook | Twitter | and Google Plus
Home»Blogging»Blogger Blog»How to Add Menu widget to Blogger Header with Social Profiles