Add a Pro Blue Splashish Horizontal Menu

Having a Professional Menu on your blog that indicates the professionalism of any blog and it's way of look and feel and on this time blogging is going beyond on the limits of professionalism just be'coz a kid which is hardly 13 years old that can design anything in the blogging so, we have to do something new be'coz blogging is having very tough competition which is also depend on the design, content, data, privacy etc. So, Our MOTO is very simple Make Your Blog Like a Pro. Our team always ready to provide you best and professional things. Today you will get a Professional Blue Splashish Horizontal Menu which is simply made by the PURE CSS.

Live Demo

Install Codes of Pro Blue Splashish Horizontal Menu

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• Paste below code in it.

<style>

#RWGmnuqw {
font-family:'Open Sans', Helvetica, Arial, sans-serif;
right:0;
border-top:2px solid #000;
border-bottom:2px solid #000;
width:100%;
overflow:hidden;
padding:0;
}

#RWGmnuqw ul {
list-style:none;
margin:0;
padding:0;
}

#RWGmnuqw ul li.kiri {
-moz-border-radius:0 0 0 3px;
-khtml-border-radius:0 0 0 3px;
-webkit-border-radius:0 0 0 3px;
border-radius:0 0 0 3px;
}

#RWGmnuqw ul li.kanan {
-moz-border-radius:0 0 3px;
-khtml-border-radius:0 0 3px 0;
-webkit-border-radius:0 0 3px 0;
border-radius:0 0 3px 0;
}

#RWGmnuqw ul li {
font-weight:700;
width:11%;
float:left;
text-align:center;
border-right:1px solid #333;
background:#04BDFA;
border-left:none;
}

#RWGmnuqw ul li a {
display:block;
color:#FFF;
line-height:18px;
font-size:15px;
padding:19px 0;
text-decoration:none;
}

#RWGmnuqw ul li a:hover {
text-decoration:none;
color:#fff;
cursor:pointer;
background:#005C91;
}

#RWGmnuqw ul li.home {
float:left;
height:56px;
background:#005C91;
width:11.1%;
border-right:1px solid #333;
-moz-border-radius:0 0 3px 3px;
-khtml-border-radius:0 0 3px 3px;
-webkit-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
}

#RWGmnuqw ul li.home a {
color:#FFF;
padding:18px 0;
}

#RWGmnuqw ul li.home a:hover {
color:#fff;
background:#04BDFA;
-moz-border-radius:0 0 3px 3px;
-khtml-border-radius:0 0 3px 3px;
-webkit-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
}

#RWG-ioio {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDylD4qXIVs3vZ-ZsBHNnG3xj8BAbhyQHrxSh4bHe9_AyWGRJC0dbW-HH2zAHfsU1gsxP3FEdE9g7vIc0o5OtOdTKuoHLko3TP_cf4eSjh4AuNo1Fg3wY3vFO-QbWtlixL1-VzE3yKpTXM/s1600/bg-RWG.png) repeat scroll top left;
max-width:1150px;
width:1150px;
margin:0 auto;
}

</style>





<div id='RWG-ioio'>
<div id='RWGmnuqw'>
<ul>
<li class='home'><a href='http://www.widgetgenerators.com'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZMJrulZwNQ1OSuJvclvPTrU4LIni7CvhdSdvJhXdiI0IrjCjoGZtlxjP2Yp7-yb_i4qVSI447eBdbtq0XT0CrENMC4fWl3iWKI8mQkRmkZXK4Cl5oAOCVwvOqohXoOKWLLX8ebWkoC9x0/s1600/homeRWGmnu.png' style='margin-right:10px'/>HOME</a></li>
<li><a href='#'>Business</a></li>
<li class='kanan'><a href='#'>Technology</a></li>
<li><a href='#' target='_blank'>Application</a></li>
<li><a href='#'>Entertainment</a></li>
<li><a href='#'>Economy</a></li>
<li><a href='#'>Social Media</a></li>
<li><a href='#'>Sports</a></li>
<li class='kiri'><a href='#'>Lifestyle</a></li>
</ul>
</div></div>

• Save Your Widget and You are Done.

 

 

 

Make Changes....!

• Replace it # with your link.
• Replace it Orange background with your tab names.
• Replace it 1150 with your own blog's width in pixels (Optional)

Final Words...!

This Horizontal Menu is simply made with the Pure CSS codes without using any jQuery OR any other JavaScript, we just used 2 images for black background and for home tab respectively. This is very awesome and professional looking navigation menu be'coz it contains some kind of special features but most effective and important reason is that this is very simple and Pure CSS created menu. So, I think you should use it, Tell your experience in comments.