Confiram o tutorial em video ou post >
Olá gurias e guris!
hoje eu vim aqui com um tutorial de como colocar um menu fixo com barra de pesquisa então bora lá com o tutorial.Para começar vá em modelo e click em editar html,depois de um ctrl+f e quando aparecer a barrinha de pesquisa escreva isso ]]></b:skin> ,agora cole isso em cima desse negocio que você acabou de pesquisar na barrinha :E uma coisa antes de começar esse tutorial faça beckup do blog ,porque se alguma coisa der errado ja viu né.
/*--- Menu ---*/
#NavbarMenu {
background: #ce4238; /*-- Cor do fundo --*/
margin-top: -3 px; /*-- Margem do topo, só mude se for necessário --*/
height: 40px; /*-- Altura, mude se for necessário --*/
display: block; position: fixed; z-index: 9999; width: 100%; font-weight: none; text-transform: capitalize; }
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; /*-- Cor do link --*/
font-size: 16px; /*-- Tamanho da fonte do link--*/
padding: 9px 15px 5px; /*--Margem interna, formato: TOPO DIREITA BAIXO (mude se necessário) --*/
display: block; font-weight: normal; text-transform: capitalize; margin: 0; }
#nav li a:hover {
color: #333; /*-- Cor do link Hover --*/
text-decoration: none; }
/*--- Não mude nada ---*/
#NavbarMenuleft { width: 100%; float: left; margin: 0; padding: 0; }
#nav { margin: 0; padding: 0; }
#nav ul { float: left; list-style: none; margin: 0; padding: 0; }
#nav li { list-style: none; margin: 0; padding: 0; float: left; }
#nav li:hover { position: static; }
/*--- Caixa em que fica a parte da caixa de pesquisa, não precisa mudar nada ---*/
#NavbarMenuright {
width: 270px;
font-size: 11px;
float: right;
margin-top: -35px;
margin-right: 25px;
text-align: right;
padding: 6px 0 0 0; }
/*--- Caixa de pesquisa ---*/
.search{
margin-top: 6px; /*-- Margem superior, edite se precisar, - sobe e + desce --*/
font-family: Arial; /*-- Fonte, mude se quiser, não é necessario --*/
float: left; margin-left: 0px;
}
/*--- Barrinha onde se digita ---*/
.searchbar{
height: 16px; /* Altura da barrinha */
width: 240px; /* Largura da barrinha */
margin-top: -45px; /*-- Margem superior, edite se precisar, - sobe e + desce --*/
margin-bottom: -18px; /*-- Margem inferior, edite se precisar, - sobe e + desce --*/
background: #fff; /*-- Cor do fundo --*/
color: #333; /*-- Cor da fonte da letra que será escrita quando procurarmos por algo --*/
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*-- Bordas arredondadas, apague se não quiser ou mude o valor dos números --*/
margin-left:0px;
padding:3px 5px;
border:none; }
/*--- Botão, não precisa mudar nada ---*/
.searchbut{
background: url("http://static.tumblr.com/wkafvsi/jcLmsk7dm/teste1pesquisa.png") center no-repeat ;
margin-top: -8px; margin-right: -35px; border:0 !important; float: right; height: 26px; width: 26px; }
*::-moz-selection {
background:#ff6666; /*---Cor de fundo--*/
color:#ffffff; /*--cor da fonte--*/
}
*::selection {
background:#ff6666;/*---Cor de fundo--*/
color:#ffffff; /*--cor da fonte--*/
}
agora de pois de ter colado esse código apague tudo o que esta escrito na barra de pesquisa e procure por <script> ele vai estar embaixo do ]]></b:skin> vejam:
E tudo que estiver escrito dessa primeira setinha no 704 até o 789 apague tudo e cole isso aqui :
<b:template-skin>
<b:variable default='960px' name='content.width' type='length' value='1000px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='0px'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='300px'/>
<![CDATA[
body {
min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
.main-inner .columns {
padding-left: $(main.column.left.width);
padding-right: $(main.column.right.width);
}
.main-inner .fauxcolumn-center-outer {
left: $(main.column.left.width);
right: $(main.column.right.width);
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');
}
.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}
.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);
}
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
#layout {
min-width: 0;
}
#layout .content-outer {
min-width: 0;
width: 800px;
}
#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
</b:template-skin>
<b:include data='blog' name='google-analytics'/>
</head>
<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<div class='fecha_dia'>"+da[0]+"</div>";
mes = "<div class='fecha_mes'>"+da[1].slice(0,3)+"</div>";
anio = "<div class='fecha_anio'>"+da[2]+"</div>";
document.write(dia+mes+anio);
}
</script>
<body><div id='NavbarMenu'><div id='NavbarMenuleft'><ul id='nav'>
<li><a href='LINK DA PAGINA'>NOME DA PAGINA</a></li>
<li><a href='LINK DA PAGINA'>NOME DA PAGINA</a></li>
<li><a href='LINK DA PAGINA'>NOME DA PAGINA</a></li>
<li><a href='LINK DA PAGINA'>NOME DA PAGINA</a></li>
<li><a href='LINK DA PAGINA'>NOME DA PAGINA</a></li>
</ul></div>
<div id='NavbarMenuright'>
<form action='/search' class='search' method='get'>
<input class='searchbar' id='s' name='q' type='text' value=''/>
<input class='searchbut' type='submit' value=''/>
</form>
</div></div><div style='clear:both;'/> expr:class='"loading" + data:blog.mobileClass'>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
<b:includable id='main'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener('load',
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
if (gapi.iframes && gapi.iframes.getContext) {
gapi.iframes.getContext().openChild({
url: 'https://www.blogger.com/navbar.g?targetBlogID\075680535014164635088\46blogName\75bbnjklm\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75DISABLED\46layoutType\75LAYOUTS\46searchRoot\75http://bbjbbsjjjjjndnn.blogspot.com/search\46blogLocale\75pt_BR\46v\0752\46homepageUrl\75http://bbjbbsjjjjjndnn.blogspot.com/\46vt\75-2153922249118546338',
where: document.getElementById("navbar-iframe-container"),
id: "navbar-iframe"
});
}
});
</script><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</b:includable>
</b:widget>
E só mude onde esta escrito link da pagina e coloque obviamente o link da pagina e onde esta escrito nome da pagina ,o nome da pagina ok?
muito bom.. porem nao entendo muito rs..
ResponderExcluirsucessoo
http://tipsofci.blogspot.com.br/
Eu entendo você quando comecei a mexer com html n entendia quase nada .Beijos.
Excluirbem legal seu post!
ResponderExcluirEstou aprendendo mexer no meu, cada dia aprendo uma coisinha diferente!
http://thoryramos.blogspot.com.br/
Muito obrigado.Eu também ,mas ainda quero fazer algumas modificações no meu blog .Beijos.
ExcluirAmeii!
ResponderExcluirAntes não conseguia mas agora consegui!
Obriaga,mt sucesso...
Olha como ficou no meu blog:http://meninagz.blogspot.com.br/
De nada ,fico muito feliz que você ter conseguido.Um Beijo...
Excluiroi bruna ! sera q tinha como vc me fala como eu faço para colocar o link das paginas ? principalmente do da pagina de inicio ?sabe para eu aberta e ja aparecer eu n to conseguindo.é parabens pelo trabalho.
ResponderExcluirOi Marcella ,então no próprio html tem como modificar isso.No vídeo eu explico isso.
ExcluirBeju..
Este comentário foi removido pelo autor.
ResponderExcluirPode disponibilizar os códigos, mas sem a barra de pesquisa.
ResponderExcluirPor favor
Adoro o seu blog.
Bjs
me manda seu email por aqui mesmo que te mando,pq per aqui o sistema do blog não permite.Beju...
ExcluirEste comentário foi removido pelo autor.
ResponderExcluirIsso não funcionou no blog teste, dar erro por apagar a parte que tem o .
ResponderExcluirNão deu certo também em meu blog onde eu quero estes tutorial, assim como a minha não está abaixo da ]]> conforme vai colocando códigos vai mudando de lugar, infelizmente não consegui, mas obrigado