Blogger Navigation
Hy Friends it is my first article on blogger navigation and if here is any mistake please tell me .
today i am going to share a simple css blogger navigation menu with search box
1) login to blogger and open your blog and slect template
2) now search " ]]> </ b: skin> "
now paste the following css above the " ]]> </ b: skin> "
/* ST Menu Bar */
.ST top-wrapper{background:#f1583b;margin:0 auto;width:100%;position:relative;padding:0;}
#ST menubar{width:auto;position:relative;margin:0 auto;padding:0;overflow:hidden}#menubar ul{padding:0 !important;text-align:center;display:block;position:relative;}#menubar li{display:inline-block;margin:0 !important;text-align:left;padding:0 !important;float:left}#menubar li a{display:block;color:#fff;font-size:15px;font-weight:bold;padding:9px 10px;}#menubar li:hover{background:#444}
.mb{color:#fafafa !important;margin:-3px 0 0 !important;padding:0 !important;font-family:Georgian !important;font-style:italic !important;font-size:14px!important;font-weight:normal !important;display:block}
.shadows{position:relative;width:100%}
.shadows:before{
bottom:5px;
content:' ';
height:20px;
left:10px;
width:25%;
position:absolute;
z-index:-1;
-webkit-box-shadow:0 5px 10px rgba(0,0,0,.5);
-moz-box-shadow:0 5px 10px rgba(0,0,0,.5);
box-shadow:0 5px 10px rgba(0,0,0,.5);
-webkit-transform:rotate(-2deg);
-moz-transform:rotate(-2deg);
transform:rotate(-2deg);
}
.shadows:after{
bottom:5px;
content:' ';
height:20px;
right:10px;
width:25%;float:right;
position:absolute;
z-index:-1;
-webkit-box-shadow:0 5px 10px rgba(0,0,0,.5);
-moz-box-shadow:0 5px 10px rgba(0,0,0,.5);
box-shadow:0 5px 10px rgba(0,0,0,.5);
-webkit-transform:rotate(2deg);
-moz-transform:rotate(2deg);
transform:rotate(2deg);
}
/* ST search */
#search-box{width:32%;margin:0;position:absolute;right:10px;top:10px}
#cse-search-box{background:#fff;position:relative;line-height:1.5em;margin:0;padding:0;font-weight:normal;font-weight:normal;}
#search-text{font-size:16px;color:#999;border-width:0;background:transparent}
#search-box input[type="text"]{width:90%;padding:10px 15px 10px 15px;color:#888;outline:none;}
#search-button{position:absolute;top:3px;right:10px;height:42px;width:20px;margin-top:10px;font-size:14px;color:#fff;text-align:center;line-height:0;border-width:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl1XPs0QtJ0X27g-EpvpI0LFDJaMzLlmbtla89L6ju5ZOofypcyDKzjJhnFm2WADieb56xtJSi7MIQz9uE2V7I0BLOFxQY4f-Xj4PBrWBycKYHINuk6asRQL2tCvVvK4xAAEve_FJ7RDM/s1600/search-icon.jpg) no-repeat;cursor:pointer}
2) Copy and paste the following code into widget HTML / Javascript or where you want to add menu
<div class='ST top-wrapper shadows'><div id=' ST menubar' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<ul>
<li><a href='#' itemprop='url' title='Privacy Policy'><span itemprop='name'>Privacy Policy</span><br/><span class='mb'>Rules of blog</span></a></li>
<li><a href='#' itemprop='url' title='About'><span itemprop='name'>About</span><br/><span class='mb'>Me and blog</span></a></li>
<li><a href='#' itemprop='url' title='Contact'><span itemprop='name'>Contact</span><br/><span class='mb'>Contact me</span></a></li>
<li><a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemaps</span><br/><span class='mb'>Archive blog</span></a></li>
</ul>
</div>
<div id='search-box'>
<form action='/search' id='cse-search-box'>
<button id='search-button' type='submit'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-text' name='q' onblur='if (this.placeholder == "") {this.placeholder = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' placeholder='Search...' type='text'/>
</form>
</div>
<div style='clear: both;'/>
</div>