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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv5ab7aZvHQtmfjM_tHgKfAi85cQrgAQZ9AFLsam-j77Kxs6dEWPLug-ZlXRXfFzN07edx6pkEV89uiyB-6YQPewPIt45xbZoyncv74PH6Z1riE5sm8rb-NawltXKcJLUrW09FJaZ_Y0Yx/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij5fXueTT_G_kZeHkRL_Mx78usPZrUZ-UnWLwJAgIP5rV7DwjvHzxG5SEIXjYFiFkmq6ZMSYScQzwjbWOq_TVYJAfAanixRdddxmX6guh45h9sBpvUmIiZXMZuVLHvsA5uRLXFUrvMUwU/s1600/feed+%25281%2529.png" /> <a href="http://feeds.feedburner.com/TemplatesEAcessrios">Feed Posts</a>  <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwj6MJEFv5oezATKsSgCokf2cp0-gbzcH3YukiheetsYmT_K35kz4HB6pbUHhLruzIENzGRT9Dl5SUYgyOo-R4rbY-IRYaEr3b2EpVtVU9RhvnDIk_TNm-xv7pf4ZRsg_QWCr9QGGOxw4/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYeZzuQDSplFnKrhZoypHR3u_l-BHn1X78Pv3fHeJeJff8Lt-meFH4de0iMZ8adXAnLO8vdMXLWk327KhMtLdKakeNci-wkD_W_EWPFLwXFyfWr8bY4lZJfyXgww3wpWUTOTARYQ8oRPiu/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlk3TfI1Axhg4p0PkcP1jHzz77O8UTnNVy3V2zKhPLMCALBIg6q9u8L-edwQ27CrO3TDuxr-vFKq46Feoe2TD5t8XN-lTdQoszEtwhQ_G2AvPnZ-w8RAJK1Ex5IJM3AfmcwCSu-FKa9r4M/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcKZ1oUG249QKeYXBqKsd-ybzJyHEEZRrdb-JHcUyl53ATeUpAUA_db_nIzK5rqUQbUbqqOvFMqmr8fzie3j-DMDEdq8hQa1wb9EBK8JLk9t3evEJ6kA4pFYbzcDb0XqZP0LRhEhdcHv4T/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPUlJPSQ6oZVVIW8A4GdsbI44LyFF8i-eEwdL_XfeR6RPXC4G-5w7cswGl6KWrwCCaKfMKdgZU0trjgmKxE42EUFjLKYZZip3ELjcJg00rpsSC0UKggvbZ6QhukwVQM32TUG56fegNYXXw/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-q1O751d9n50YggKAjdV6PaTFvP33IxSe76vuKwP2IJYFXS842mX5W5biwocAovFp01qjwzW_qZ1TptSDwZnwARKdvuP6VRku07ZH3KeRcVtf7pgcHh9XYxNZeivjcGWdKCP_EAyQm5b/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIO4LzkJWsaOuv70peLrubaFgu-UzDu_0TvY9t_oiVDgF4bQtd2v5KaSY4wGlDfJHuP2OKu6lN94tCAtQ5bpuZxFyAoCVqDeDa1Bvp9trcxNQBUrUvYXxEc8lNuT4s0inab83Ze7N9_Hiw/s1600/social_balloon-15.png" /></a>
</div>