Home / Template Customization / Mybloggertricks professional menu bar for Blogger

Mybloggertricks professional menu bar for Blogger

Posted by Unknown Selasa, 15 Oktober 2013 0 komentar

MBT Professional Menu Bar: We have recently teach you How to add Glowing Horizontal Menu bar to Blogger, and simple black Horizontal Menu bar to blogger. But today we come over here with totally unique and professional stuff. Yeah, We are going to teach you How to add MBT Professional Menu bar to Blogger. We all know that MBT is a very professional website and peoples are very inspired of it!
So looking at the trend, I have think of creating this Menu bar. So let me teach you how to do this Tutorial.

How To Add MBT Professional Menu Bar To Blogger

First of all Go To Blogger Dashboard.
Now click on the Template>> Edit HTML tab as shown below.

Proceed in the Template coding and search for the ]]></b:skin> tag.
Now copy the below code and paste it below ]]></b:skin> tag.

#Main-Menu {
float:right;
width : 1018px;
height : 70px;
margin : 0 auto;
padding : 0px 0px 0px 0px;
}
#Main-nav {
margin : 0px 0px 10px 15px;
padding : 10px;
}
#Main-nav ul {
float: left;
list-style: none;
margin: 10px auto;
padding: 0;
}
#Main-nav li {
list-style: none;
margin: 17px -10px 0px 0px;
padding: 0;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQbmX3tysnJhpYpnk-fJ75QgpuBpffgCyF7PHuI-hHGCIG0MUJSWxaJrzB9_S2rikuhd-ptfxSRinhQO487k0jYRwahAj_Bnypy0IBKyK9trC7Mq5jsRwZ5e07nl5VIeVgBUggVBfKdMQ4/s320/menu-bg.png) no-repeat;
background-position: 0px 0px;
width:169px;
height:42px;
float:left;
}
#Main-nav li:hover {
background-position: 0px -52px;
}
#Main-nav li.highlight {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4EQHEcBnvAyLyrtjbDRg9Gt3L07VtDBAxP95NHxgRawoLsiXmKHA2H2kH4UhRwcunTJjlflX-vz9fQ8QKHlpNUZM5v4se9eBOFg9UdGF4XOu_QT3ogUhL740yX2yG633o_qFZqOu7_1os/s400/menu_button_white.png) 0px 0px no-repeat;
}
#Main-nav li.highlight a {
color: rgb(51, 51, 51) !important;
text-shadow: 1px 2px 1px #9E9E9E !important;
font-size: 12px !important;
font-family: arial;
font-weight: bold;
text-transform: none;
}
#Main-nav li a{
color: #FFF;
display: block;
font-size: 12px;
font-family:arial;
font-weight: bold;
text-transform: none;
margin: 0;
padding: 15px 0px 9px 60px;
text-decoration: none;
text-shadow:1px 1px 3px #333;
letter-spacing:0.09em;
}
#Main-nav li a:hover {
color: #333;
text-shadow:1px 2px 1px #9E9E9E;
}

Now save your template!
If you do the above steps, then click on layout.
Click on Add a gadget link.
Now select HTML JavaScript gadget from the gadget list as shown below.

A box will appear, now copy the below code and paste it inside the HTML JavaScript gadget.

<div id="Main-Menu">
<ul id="Main-nav">
<li><a href="#">  Home</a></li>
<li><a href="#"> Make Money</a></li>
<li><a href="#"> SEO</a></li>
<li><a href="#"> Web Hosting</a></li>
<li><a href="#"> Blogging</a></li>
<li><a href="#"> Widgets</a></li>
</ul>
</div>

Customization Before Saving

Now Replace the # with the URL,s you want peoples to recirect.
Also change the Text in green to your desired text you want to show on the menu bar.
Now hit the Save button.
you are done say Bingo.

If you face any problems while adding this widget to your blog ask us we are here to solve your problems!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Mybloggertricks professional menu bar for Blogger
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke https://topandroidnexus7.blogspot.com/2013/10/mybloggertricks-professional-menu-bar.html. Terima kasih sudah singgah membaca artikel ini.