segunda-feira, 18 de julho de 2016

Menu com caixa de pesquisa [[Search Box]]


Menu com caixa de pesquisa by bungfranki é o mais inovador tipo de menu, utilizado em Blogs profissionais você pode conferir nosso menu com search Box isso é atrativo e também ajuda na pesquisa sobre algo especifico se deseja criar um menu com search box para seu Blogger siga os passos abaixo.


Adicionando menu com Caixa de pesquisa Search Box no Blogger


Faça login no Blogger em painel procure por modelo então 
Editar >> HTML/JavaScript com as teclas combinadas CTRL+F busque por </body>

<style type='text/css'>
/* Menu and Search */
.menu-wrapper{width:100%;max-width:1000px;margin:0 auto;padding:0;position:relative}
.sticky-menu{font-family: &#39;Open Sans&#39;, arial;background:#2d2d2d;width:auto;padding:0;margin:0;font-size:15px;font-weight:400}
.sticky-menu ul{margin:0 auto;padding:0;float:left}
.sticky-menu ul a {display:block;padding:0 15px;}
.sticky-menu ul li{position:relative;margin:0;}
.sticky-menu ul &gt; li {float:left;}
.sticky-menu ul &gt; li &gt; a {display:block;height:57px;line-height:56px;color:#fff;font-weight:bold;overflow:hidden;transition:all .35s ease;}
.sticky-menu ul &gt; li &gt; a.active {background:#e35959;color:#fff;}
.sticky-menu ul &gt; li:hover &gt; a,.sticky-menu ul li.homex {background:#e35959;color:#fff;}
.sticky-menu ul &gt; li:hover &gt; a.active {background:#e35959}
.sticky-menu ul li a img{vertical-align:middle!important;height:10px;width:14px}
.sticky-menu ul ul {display:none;list-style:none;position:absolute;top:100%;width:190px;z-index:9999;overflow:hidden}
.sticky-menu ul &gt; li:hover ul {display:block}
.sticky-menu ul ul &gt; li {clear:both;overflow:hidden;background:rgba(22,3,48,.6);height:42px;z-index:9999;width:190px;}
.sticky-menu ul ul &gt; li &gt; a {margin:0;color:#fff !important;padding:0 15px;text-align:left;height:42px;line-height:41px;width:190px;z-index:9999}
.sticky-menu ul ul &gt; li &gt; a:hover {color:#fff !important;background:#e35959}
/* Sticky menu */
.makesticking2{position:fixed!important;padding:0!important;top:0;max-width:100%;left:0;right:0;z-index:99999}
</style>
<script type='text/javascript'>
//<![CDATA[
var mql = window.matchMedia('screen and (min-width: 600px)');if (mql.matches){function makemeSticky2(e){function t(){var e=s.getBoundingClientRect();e.top<0?(n.className=a+" makesticking2",n.style.width=i+"px"):n.className=a}var n=document.getElementById(e),s=document.createElement("div");n.parentNode.insertBefore(s,n);var i=n.offsetWidth,a=n.className+" makesticky";window.addEventListener("scroll",t,!1)}makemeSticky2("floating");}
//]]>
</script>




Código do menu para ser adicionado: 

div class='menu-wrapper' id='floating'>
<nav class='sticky-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
 <ul>
   <li class='homex'><a href='/' itemprop='url' title='home'><img alt='Home' expr:title='data:blog.title' height='12' src='http://2.bp.blogspot.com/-eXDzvmiaYcc/VktrFQnAsPI/AAAAAAAAGJQ/ECTgSNQKlzs/s1600/siminihome.png' width='14'/> Home</a></li>
   <li><a href='/search/label/Amazing' itemprop='url' title='Amazing'><span itemprop='name'>Amazing</span></a></li>
   <li><a href='/search/label/Black' itemprop='url' title='Black'><span itemprop='name'>Black</span></a></li>
   <li><a href='/search/label/Speed' itemprop='url' title='Speed'><span itemprop='name'>Speed</span></a></li>
   <li><a href='/search/label/Sport' itemprop='url' title='Sport'><span itemprop='name'>Sport</span></a></li>
   <li><a href='/search/label/Style' itemprop='url' title='Style'><span itemprop='name'>Style</span></a></li>
<li><a href='#' itemprop='url' title=''><span itemprop='name'>Other</span></a>
<ul>
<li><a href='/search/label/Red' itemprop='url' title='Red'><span itemprop='name'>Red Car</span></a></li>
<li><a href='/search/label/Modern' itemprop='url' title='Modern'><span itemprop='name'>Modern</span></a></li>
<li><a href='/search/label/ThankYou' itemprop='url' title='Thank You'><span itemprop='name'>Thank You</span></a></li>
</ul>
</li>
    </ul>
<form action='/search' id='search-wrapper' method='get'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search here...'/></td>
<td class='search-button'><input id='search-button' type='submit' value='Go'/></td></tr></tbody></table></form>
    <div class='clear'/>
</nav>
    <div class='clear'/>
</div>

Salve o template.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner