How To Add Together Card Bar To Blogger Alongside Social Profiles

  • Share

After launching our WinBlogTem, a responsive blogger template i of our reader request us to percentage entirely pinnacle header carte du jour bar of that theme for her web log. The main feature of this menu is to link social profiles at the correct side of the card bar as well the menu at the left side.

So, I am hither to percentage amongst all of yous the menu bar widget to live added at the top of your blogger weblog amongst social media profiles link.

Table of Contents


Login to your blogger account and navigate Template tab of your web log.


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


Now, click anywhere inwards the template editor as well as search for closing ]]> tag. Copy too paste these CSS codes only in a higher place/earlier the ]]>

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

border-top: 3px solid transparent;
border-bottom: 3px solid #92d050;

ul.swt-nav-bill of fare
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-bill of fare 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;

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;

background-position: 0 0;

background-position: -41px 0;

background-position: -82px 0;

background-position: -123px 0;

background-position: -164px 0;

background-color: #39558f;
background-position: 0 -40px;

background-color: #d94a39;
background-position: -41px -40px;

background-color: #0377ae;
background-position: -82px -40px;

background-color: #cd1a3b;
background-position: -123px -40px;

background-color: #02a7e6;
background-position: -164px -40px;

background: url( no-repeat 0 0;
/* SWT Top Header Menu bar tutorial at */

Note: You may download CSS codes for more than styles.


Search for opening

tag as well as paste these HTML codes simply higher up/before


Finally, supplant # amongst your respective weblog page name as well as social profile URL in addition to save the template. Enjoy!

  • Share