 |
| Imagem retirada do Google Imagens. Todos os direitos reservados a seu respectivo autor. |
O tutorial de hoje é bem simples e, se você usar a imaginação, pode deixar o seu blog ainda mais bonito. Eu vou ensinar a pôr o cabeçalho no meio de um menu, assim como se encontra o Header aqui do blog. É fácil de fazer e não prejudica nenhum outro código do blog. Então, não tenha medo. Basta seguir tudo direitinho e, com certeza, tudo dará certo.
O código que você deverá apagar é mais ou menos esse:
2 - Cole no lugar do que foi apagado, o seguinte código:
Substitua "CÓDIGO DO MENU" pelo... Código do menu. Lembre-se de não pôr muitos links em cada lado para que fique organizado.
Substitua "SEUBLOG" pelo nome do... seu blog.
Altere as configurações do CSS de acordo com o desejado. Elas ficam na tag "<table", dentro de "style=".
O.K.?
Depois, se der tudo certo, é só salvar.
No próximo tutorial eu ensinarei a fazer um menuzinho básico, desse que uso no blog, para que você também possa utilizar no seu, incluindo neste tutorial, no lugar de "CÓDIGO DO MENU".
Eu espero que tenham gostado e até mais! Beijão!
Dúvidas? Pedidos de tutoriais? Pergunte ou peça pelos comentários, entre em contato ou abra um tópico no Fórum do Aleatorizando.
Encomende seu layout comigo!
SERÁ PRECISO MEXER NO HTML. QUALQUER COISA, APERTE CONTROLZ (CTRL+Z) QUANTAS VEZES FOR PRECISO PARA DESFAZER O ERRO. TUTORIAL MÉDIO.
1 - Primeiro vá em Modelo > Editar HTML. Clique dentro dos códigos e aperte Ctrl+F (controlF) no seu teclado. Digite "<HEADER>" na barra de pesquisas que aparecerá e depois aperte ENTER. Quando achar, selecione o que foi procurado e tudo o que tiver abaixo dele até "</HEADER>", que é o fechamento da tag procurada. Selecionou? APAGUE;O código que você deverá apagar é mais ou menos esse:
<header>
<div class='header-outer'>
<div class='header-cap-top cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
<div class='fauxborder-left header-fauxborder-left'>
<div class='fauxborder-right header-fauxborder-right'/>
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='darer (Cabeçalho)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</header>2 - Cole no lugar do que foi apagado, o seguinte código:
Substitua "CÓDIGO DO MENU" pelo... Código do menu. Lembre-se de não pôr muitos links em cada lado para que fique organizado.
Substitua "SEUBLOG" pelo nome do... seu blog.
Altere as configurações do CSS de acordo com o desejado. Elas ficam na tag "<table", dentro de "style=".
O.K.?
Depois, se der tudo certo, é só salvar.
No próximo tutorial eu ensinarei a fazer um menuzinho básico, desse que uso no blog, para que você também possa utilizar no seu, incluindo neste tutorial, no lugar de "CÓDIGO DO MENU".
Eu espero que tenham gostado e até mais! Beijão!
Dúvidas? Pedidos de tutoriais? Pergunte ou peça pelos comentários, entre em contato ou abra um tópico no Fórum do Aleatorizando.
Encomende seu layout comigo!
Nenhum comentário. Comente primeiro!
Postar um comentário