Menu no topo (Navbar) com redes sociais

O código a seguir deve ser colocado depois do </head>

Menu na esquerda/direita com redes sociais:

01	<div class="bar_top">

02	<div class="bar_topd">

03	<ul class="menu_barrax">

04	<li><a href="http://www.blogger.com/url">Link</a></li>

05	<li><a href="http://www.blogger.com/url">Link</a></li>

06	<li><a href="http://www.blogger.com/url">Link</a></li>

07	<li><a href="http://www.blogger.com/url">Link</a></li>

08	<li><a href="http://www.blogger.com/url">Link</a></li>

09	<li><a href="http://www.blogger.com/url">Link</a></li>

10

</ul>

11	<div class="transit">

12	<a href="http://www.blogger.com/url" target="_blank"><img src="url da imagem" border="0"></a>

13	<a href="http://www.blogger.com/url" target="_blank"><img src="url da imagem" border="0"></a>

14	<a href="http://www.blogger.com/url" target="_blank"><img src="url da imagem" border="0"></a>

15	<a href="http://www.blogger.com/url" target="_blank"><img src="url da imagem" border="0"></a>

16	<a href="http://www.blogger.com/url" target="_blank"><img src="url da imagem" border="0"></a>

17

</div>

18

</div>

19

</div>

Menu centralizado:

01	<div class="bar_top">

02	<div class="bar_topd">

03	<ul class="menu_barrax">

04	<li><a href="http://www.blogger.com/url">Link</a></li>

05	<li><a href="http://www.blogger.com/url">Link</a></li>

06	<li><a href="http://www.blogger.com/url">Link</a></li>

07	<li><a href="http://www.blogger.com/url">Link</a></li>

08	<li><a href="http://www.blogger.com/url">Link</a></li>

09	<li><a href="http://www.blogger.com/url">Link</a></li>

10

</ul>

11

</div>

12

</div>

Agora o seguinte código você escolhe entre o menu centralizado (sem redes sociais), com o menu à esquerda e com o menu à direita.

Menu à esquerda:

01	/* Cabeçalho

02	----------------------------------------------- */

03	.bar_top {width: 100%; height: 45px; background: #c1d6d6; border-bottom: 1px solid #e0eaea;}

04

05	.bar_top img {height: 35px; float: right; margin: 5px 7px 0 0; opacity:0.5; filter:alpha(opacity=50);}

06	.bar_top img:hover {opacity:1.0; filter:alpha(opacity=100);}

07

08	.menu_barrax {float: left; margin: 0; padding: 0;}

09	.menu_barrax li {float: left; list-style: none;font-size: 20px; font-family: 'arial'; text-transform: uppercase; margin: 0 0 0 7px; padding: 10px 0 0 0; letter-spacing: 1px; text-shadow: 1px 1px 0px #b6cfcf;}

10

11	.menu_barrax li a{color: #e7f0f0;text-decoration: none;}

12	.menu_barrax li a:hover {text-decoration: none;color: #fff;}

13	.transit {-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;-moz-transition:all 0.4s ease;transition:all 0.4s ease;}

14

15	.bar_topd {width: 1000px;margin: 0 auto;}

Menu à direita:

01	/* Cabeçalho

02	----------------------------------------------- */

03	.bar_top {width: 100%; height: 45px; background: #c1d6d6; border-bottom: 1px solid #e0eaea;}

04

05	.bar_top img {height: 35px; float: left; margin: 5px 7px 0 0; opacity:0.5; filter:alpha(opacity=50);}

06	.bar_top img:hover {opacity:1.0; filter:alpha(opacity=100);}

07

08	.menu_barrax {float: right; margin: 0; padding: 0;}

09	.menu_barrax li {float: right; list-style: none;font-size: 20px; font-family: arial; text-transform: uppercase; margin: 0 0 0 7px; padding: 10px 0 0 0; letter-spacing: 1px; text-shadow: 1px 1px 0px #b6cfcf;}

10

11	.menu_barrax li a{color: #e7f0f0;text-decoration: none;}

12	.menu_barrax li a:hover {text-decoration: none;color: #fff;}

13	.transit {-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;-moz-transition:all 0.4s ease;transition:all 0.4s ease;}

14

15	.bar_topd {width: 1000px;margin: 0 auto;}

Menu centralizado:

01	/* Cabeçalho

02	----------------------------------------------- */

03	.bar_top {width: 100%; height: 45px; background: #c1d6d6; border-bottom: 1px solid #e0eaea;}

04

05	.menu_barrax {float: center;margin: 0;padding: 0;}

06	.menu_barrax li {float: left; list-style: none;font-size: 20px; font-family: arial; text-transform: uppercase; margin: 0 0 0 7px; padding: 10px 0 0 0; letter-spacing: 1px; text-shadow: 1px 1px 0px #b6cfcf;}

07

08	.menu_barrax li a{color: #e7f0f0;text-decoration: none;}

09	.menu_barrax li a:hover {text-decoration: none;color: #fff;}

10

11	.bar_topd {width: 1000px;margin: 0 auto;}

Lembrando que: as imagens das redes sociais tem que ter 35x35 pixels, a não ser que vocês aumentem o tamanho da barrinha ou diminuam.