16 de jun de 2012

Combo: modificar a header e o menu de páginas do novo Blogger

DEMO

 "Vambora" modificar a header de seu blog ? Colocar um menu social, buscador, feed de comentários e posts e costumizar o menu de páginas do Blogger ?

Para dar estilo à header do Blogger, é necessário antes, dividir a header do Blogger, colocando ali um novo widget. Para isso, siga primeiro essa dica. Depois volte aqui e siga o resto da tutorial...









Ao abrir, cole então o próximo código fazendo as modificações necessárias para linkar suas páginas sociais.


<style>
#navbar{display:none;}
body{ background:#808080}
.content-inner {background: transparent;}
.body-fauxcolumn-outer .cap-top { background: url(http://2.bp.blogspot.com/-1gNLt-fo8O0/T9rNpAgPRRI/AAAAAAAAIYM/mCch8oaOHHE/s1600/fundo1.png) repeat-x;}
.main-outer{background: #fff;margin: 8px auto;}
.Header h1 {
  font-size: 40px;
  padding: 40px 2px 20px 2px;
  color: #000;
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
</style>
<style>
/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
 margin: 33px 20px 0 20px;
}

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
  /*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
  background: #808080;
  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.tabs-inner .widget li a {
  display: inline-block;
  margin: 0 1px 0 0;
  padding: 25px 16px 25px 16px;
  font: $(tabs.font);
  color: #000;
  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #000;
  background-color: #fff;
  text-decoration: none;
}

</style>

<style>
#menu-feed{text-align: right;margin: -5px auto;}
#menu-feed a{color: #000;}
</style>
<div id="menu-feed">
<span style="color: white; font-size: x-small;"><b><img border="0" src="http://4.bp.blogspot.com/-M5MySvzxqY8/TkNsWeFoMBI/AAAAAAAAF38/bZXu7xQ4U0A/s1600/feed+%25281%2529.png" /> <a href="http://feeds.feedburner.com/TemplatesEAcessrios">Feed Posts</a>  <img border="0" src="http://2.bp.blogspot.com/-NMh7BEGT644/TkNsZuTEsvI/AAAAAAAAF4A/dfbp32IXTBo/s1600/feed_ballon+%25281%2529.png" /> <a href="http://templateseacessorios.blogspot.com/feeds/8129006636274137536/comments/default">Feed Comentários</a></b></span></div>


<style type="text/css">
#box-procura{
background:url(http://1.bp.blogspot.com/-m9qvY7QQLSM/T9q9L_v157I/AAAAAAAAIXI/wSgEAFvVcxI/s1600/box+procura.png) no-repeat scroll right transparent; width:307px; height:50px;display:block; float: right; margin: 50px 2px 0 0;}
form#box-procura2{display: block;padding: 12px;margin:0;}
form#box-procura2 #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#box-procura2 #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="box-procura">
<form id="box-procura2" action="/search" method="get">
    <input type="text" id="s" name="q" value=""/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

<style>
#menu-social {
  margin: 40px 1px 0 10px;
  float: right;
}
#menu-social ul {
  margin: 0;
  padding: 0;
  margin-top:10px;
}
#menu-social ul li {
  border-right: 1px dashed #808080;
  float: left;
  padding: 5px 2px 0 3px;
  margin-left: 2px;
  list-style-type: none;
}
#menu-social ul li a {
  padding: 4px 0 0 18px;
  height: 22px;
  color: #999;
  text-decoration: none;
  line-height: 1.45em;
}
</style>

<div id="menu-social">

<a href="ENDEREÇO DA PÁGINA INICIAL DE SEU BLOG" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" width="46px" src="http://2.bp.blogspot.com/-D-88XvaRojQ/T9rD-nmauAI/AAAAAAAAIX0/HroSIoCvg-w/s1600/social_balloon-21.png" /></a>
<a href="ENDEREÇO DE SEU FACEBOOK" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" width="46px" src="http://3.bp.blogspot.com/-bqpPE55Q6_8/T9rD9oo83rI/AAAAAAAAIXc/IC_SBOQZPFk/s1600/social_balloon-14.png" /></a>
<a href="ENDEREÇO DE SEU TWITTER" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" width="46px" src="http://3.bp.blogspot.com/-awH5p5H2NKs/T9rD9SmIpmI/AAAAAAAAIXU/CIuL6zrw8rE/s1600/social_balloon-05.png" /></a>
<a href="ENDEREÇO DE SEU GOOGLE" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" width="46px" src="http://1.bp.blogspot.com/-wUSnZESP5L8/T9rD-TVVI-I/AAAAAAAAIXs/a-yaDke5Nh0/s1600/social_balloon-19.png" /></a>
<a href="ENDEREÇO DE SEU FEED" imageanchor="1" style="margin-left: 0em; margin-right: 0em;"><img border="0" width="46px" src="http://4.bp.blogspot.com/-6NKR5fUOWa0/T9rD-CLYVjI/AAAAAAAAIXk/5O-CYh0wb04/s1600/social_balloon-15.png" /></a>
</div>


8 comentários:

  1. Como faz para ficar a caixa de pesquisa e o menu hover?

    ResponderExcluir
  2. Oi, adorei a dica, copiei o código somente do menu social, gosto do meu template.

    Você poderia me ajudar incluindo o ícone do Pinterest na lista? Olha como ficou: http://www.agulhascolhereseafins.com/.

    Abx. Frida Lucia

    ResponderExcluir
  3. Oi, talvez você nem tenha lido meu comentário ainda... eu consegui incluir o pinterest no menu social, as tuas dicas são muito boas. A D O R O!!!!!

    Muito obrigada pela atenção.
    Abs.Frida Lucia

    ResponderExcluir
  4. oie gostaria de saber como postar dentro dos menus...já tentei várias vezes mas nunca deu certo.
    ajude-me por favor

    ResponderExcluir
  5. Onde posso mudar a cor do fundo de cinza para preto ??

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube