quinta-feira, 21 de abril de 2011

Colocando barra do g1.globo.com no seu blog

G1Já que mostramos como colocar a barra do R7.com no seu blog,  a barra do G1.globo.com (Portal de notícias da globo) não poderia ficar de fora. Essas duas barras são bem semelhantes, e possuam links que ao clicar o usuário vai para suas respectivas páginas. Eu testei as duas barras aqui no cblogger.net, e pude perceber que elas dão um certo aspecto de profissionalização na página, deixando o template mais profissional e atraente. Claro que não iria deixar nenhuma dessas barras no cblogger.net, até porque não tem nada a ver com nosso tema. Mas enfim, se o seu blog é de notícias, coloquem essa barra e você se surpreenderá.

G1 - O portal de notícias da Globo

Para colocar a barra em seu blog, vá em “Editar HTML” do seu blog, procure por <body> e acima dessa tag cole o seguinte código:


&lt;div id=&quot;glbbarrawidget&quot; style=&quot;min-height:42px;_height:42px&quot;&gt;&lt;style type=&quot;text/css&quot;&gt;#glb-barra-widget {background-color:#F3F3F3;margin:0 auto; z-index:99999; position:relative; }
#glb-barra-widget #glb-barra-logo {float:left;height:18px;margin:10px 7px 0 10px;width:74px;}
#glb-barra-widget #glb-barra-logo a {color:#06d;display:block;font-size:.83em;height:100%;position:relative;text-decoration:none;}
#glb-barra-widget #glb-barra-logo a:hover {color:#09f;}
#glb-barra-widget #glb-barra-logo a strong {background:url(http://barra.globo.com/media/img/logo-glb.gif) no-repeat;cursor:pointer;display:block;height:100%;position:absolute;width:100%;}
#glb-barra-widget #glb-barra-logo a:hover strong {background-position:0 -18px;}
#glb-barra-widget #glb-barra-menu {float:left;}
#glb-barra-widget #glb-barra-menu .glb-item-menu {background:url(http://barra.globo.com/media/img/separador-menu.gif) no-repeat left 15px;display:inline;float:left;position:relative;}
#glb-barra-widget #glb-barra-menu .glb-item-menu a {border-top:.2em solid #F3F3F3;color:#06d;display:block;font-size:1.3em;letter-spacing:-0.02em;font-weight:bold;margin-left:1px;padding:6px 7px 12px;}
#glb-barra-widget #glb-barra-menu .glb-item-menu a:hover {border-color:#06d;}
#glb-barra-widget #glb-barra-menu li #menu-noticias {color:#a80000;}
#glb-barra-widget #glb-barra-menu li #menu-noticias:hover {border-color:#a80000;}
#glb-barra-widget #glb-barra-menu li #menu-esportes {color:#3e831e;}
#glb-barra-widget #glb-barra-menu li #menu-esportes:hover {border-color:#3e831e;}
#glb-barra-widget #glb-barra-menu li #menu-entretenimento {color:#f90;}
#glb-barra-widget #glb-barra-menu li #menu-entretenimento:hover {border-color:#f90;}
#glb-barra-widget #glb-barra-menu li #menu-videos {color:#005cef;}
#glb-barra-widget #glb-barra-menu li #menu-videos:hover {border-color:#005cef;}
#glb-barra-widget #glb-barra-og, #glb-barra-widget #glb-og-contexto strong {text-transform:lowercase;}
#glb-barra-widget #glb-barra-og {background:url(http://barra.globo.com/media/img/separador-menu.gif) no-repeat left 15px;display:inline;float:left;position:relative;}
#glb-barra-widget #glb-barra-og a {border-top:.2em solid #F3F3F3;color:#06d;display:block;font-size:1.3em;letter-spacing:-0.02em;font-weight:bold;margin-left:1px;padding:6px 7px 12px;}
#glb-barra-widget #glb-barra-og a:hover {border-color:#06d;}
#glb-barra-widget #glb-barra-og img {margin:-4px 3px 0 0;_margin-top:0px;vertical-align:middle;border:0;}
#glb-barra-widget #glb-og-contexto {background:url(http://barra.globo.com/media/img/separador-menu.gif) no-repeat left 15px;display:inline;float:left;margin-left:3px;}
#glb-barra-widget #glb-og-contexto #menu-og-contexto {border-top:.2em solid #f3f3f3;color:#06d;display:block;font-size:1em;margin-left:0;padding:6px 0 12px;position:relative;z-index:98;}
#glb-barra-widget #glb-og-contexto #menu-og-contexto strong {padding:6.5px 7px 12px;}
#glb-barra-widget #glb-og-contexto #menu-og-contexto:hover {background:#fff url(http://barra.globo.com/media/img/separador-menu.gif) repeat-y left 15px  !important;border-color:#06d;}
#glb-barra-widget #glb-og-contexto #menu-og-contexto:hover strong {background:url(http://barra.globo.com/media/img/separador-menu.gif) repeat-y right 15px !important;}
#glb-barra-widget #glb-og-contexto #menu-og-contexto {display:none;}
#glb-barra-widget #glb-subcontextos {background-color:#fff;border:1px solid #dddddd;display:none;margin-top:-1px;position:absolute;padding:7px 0 15px 1px;}
#glb-barra-widget #glb-subcontextos li {display:inline;float:none;white-space:nowrap;}
#glb-barra-widget #glb-subcontextos li a {border:none;color:#595959;display:block;font-size:1em;font-weight:normal;padding:2px 30px 0 5px;position:relative;}
#glb-barra-widget #glb-subcontextos li a:hover {border:none;color:#005cef;text-decoration:underline;}
#glb-barra-widget #glb-barra-servicos {float:right;margin-right:3px;}
#glb-barra-widget #glb-barra-servicos .glb-item-servicos {background:url(http://barra.globo.com/media/img/separador-menu.gif) no-repeat left 15px;display:inline;float:left;position:relative;}
#glb-barra-widget #glb-barra-servicos .glb-item-servicos a {color:#666666;font-size:.92em;display:block;font-weight:bold;margin-top:2px;padding:11px 7px;}
#glb-barra-widget #glb-barra-servicos .glb-item-servicos a:hover {text-decoration:underline;}
#glb-barra-widget #glb-barra-servicos .central-globocom {background:none;}
#glb-barra-widget #glb-barra-servicos #menu-globomail {float:left;margin-top:-2px;position:relative;}
#glb-barra-widget #glb-barra-servicos #menu-globomail .glb-mail {border-top:.2em solid #F3F3F3;color:#666666;display:block;font-size:.92em;margin-top:2px;position:relative;padding:11px 0 13px 25px;z-index:99}
#glb-barra-widget #glb-barra-servicos #menu-globomail .glb-mail:hover {background:#fff url(http://barra.globo.com/media/img/separador-menu.gif) repeat-y left 14px !important;border-top:.2em solid #06d;text-decoration:none;}
#glb-barra-widget #glb-barra-servicos #menu-globomail .glb-mail strong {background:url(http://barra.globo.com/media/img/separador-menu.gif) no-repeat right 14px;padding:11.3px 7px 13px;}
#glb-barra-widget #glb-barra-servicos #menu-globomail .glb-mail:hover strong {background:url(http://barra.globo.com/media/img/separador-menu.gif) repeat-y right 14px !important;}
#glb-barra-widget #glb-barra-servicos #menu-globomail .glb-mail img {margin-left:-16px;position:absolute;top:13px;*top:26px;border:none}
#glb-barra-widget #glb-barra-servicos  #menu-globomail #globomail-subcontexto {background-color:#fff;border:1px solid #ddd;display:none;margin-top:-1px;padding:7px 0 15px 0;position:absolute;z-index:98}
#glb-barra-widget #glb-barra-servicos  #menu-globomail #globomail-subcontexto li {background-image:none;border:none;display:inline;float:none;margin-bottom:2px;white-space:nowrap;}
#glb-barra-widget #glb-barra-servicos  #menu-globomail #globomail-subcontexto li a {border:none;color:#595959;display:block;font-size:1em;font-weight:normal;padding:5px 30px 0 7px;*padding:6px 30px 0 7px;position:relative;}
#glb-barra-widget #glb-barra-servicos  #menu-globomail #globomail-subcontexto li a:hover {border:none;color:#005cef;text-decoration:underline;}
#glb-barra-widget .glb-oculto {display:none !important;}
#glb-barra-widget {background-color:#F3F3F3;display:table;font:12px arial,helvetica,freesans,sans-serif;min-width:960px;width:100%;}
#glb-barra-widget .conteudo-barra {margin:0 auto;width:80em;}
#glb-barra-widget .glb-barra-escopo * {margin:0;outline:0;padding:0;}
#glb-barra-widget li {list-style:none;}
#glb-barra-widget a {text-decoration:none;}
.glb-barra-conteudo {margin:0 auto !important;text-align:left;width:960px;}&lt;/style&gt;
&lt;div id=&quot;glb-barra-widget&quot;&gt; &lt;div class=&quot;glb-barra-conteudo&quot;&gt; &lt;div class=&quot;glb-barra-escopo&quot;&gt; &lt;div id=&quot;glb-barra-logo&quot;&gt; &lt;a href=&quot;http://www.globo.com&quot; title=&quot;globo.com&quot; target=&quot;_top&quot;&gt;&lt;strong&gt;&lt;/strong&gt;globo.com&lt;/a&gt; &lt;/div&gt;&lt;!--glb-barra-logo--&gt; &lt;ul id=&quot;glb-barra-menu&quot;&gt; &lt;li class=&quot;glb-item-menu&quot;&gt;&lt;a href=&quot;http://g1.globo.com&quot; title=&quot;not&iacute;cias&quot; accesskey=&quot;n&quot; id=&quot;menu-noticias&quot; target=&quot;_top&quot;&gt;not&iacute;cias&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;glb-item-menu&quot;&gt;&lt;a href=&quot;http://globoesporte.globo.com&quot; title=&quot;esportes&quot; accesskey=&quot;e&quot; id=&quot;menu-esportes&quot; target=&quot;_top&quot;&gt;esportes&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;glb-item-menu&quot;&gt;&lt;a href=&quot;http://entretenimento.globo.com&quot; title=&quot;entretenimento&quot; accesskey=&quot;t&quot; id=&quot;menu-entretenimento&quot; target=&quot;_top&quot;&gt;entretenimento&lt;/a&gt;&lt;/li&gt; &lt;li class=&quot;glb-item-menu&quot;&gt;&lt;a href=&quot;http://video.globo.com&quot; title=&quot;v&iacute;deos&quot; accesskey=&quot;v&quot; id=&quot;menu-videos&quot; target=&quot;_top&quot;&gt;v&iacute;deos&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;&lt;!--glb-barra-menu--&gt;&lt;ul id=&quot;glb-barra-servicos&quot;&gt;&lt;li id=&quot;menu-globomail&quot;&gt;&lt;a href=&quot;#&quot; title=&quot;globomail&quot; class=&quot;glb-mail&quot;&gt;                                   &lt;img height=&quot;11&quot; width=&quot;16&quot; alt=&quot;e-mail&quot; src=&quot;http://barra.globo.com/media/img/ico_globomail.gif&quot;&gt;&lt;strong&gt;e-mail&lt;/strong&gt;&lt;/a&gt; &lt;ul id=&quot;globomail-subcontexto&quot;&gt; &lt;li&gt;&lt;a href=&quot;http://login.globo.com/login/1&quot; title=&quot;globomail pro&quot; accesskey=&quot;p&quot; target=&quot;_top&quot;&gt;Globomail Pro&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;http://login.globo.com/login/1948&quot; title=&quot;globomail free&quot; accesskey=&quot;f&quot; target=&quot;_top&quot;&gt;Globomail Free&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;http://cadastrofree.globo.com/resources2/panfletos/comparativo_globomail/comparativo_globomail.html&quot; title=&quot;criar um e-mail&quot; accesskey=&quot;c&quot; target=&quot;_top&quot;&gt;Criar um e-mail&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt;&lt;/li&gt;&lt;li class=&quot;glb-item-servicos central-globocom&quot;&gt;&lt;a href=&quot;http://atendimento.globo.com&quot; title=&quot;central globo.com&quot; accesskey=&quot;r&quot; target=&quot;_top&quot;&gt;central globo.com&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;glb-item-servicos&quot;&gt;&lt;a href=&quot;http://atendimento.globo.com/Portal/ISP/assineja/panfletos/panfleto_home_globo&quot; title=&quot;assina j&aacute;&quot; accesskey=&quot;a&quot; target=&quot;_top&quot;&gt;assine j&aacute;&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;glb-item-servicos&quot;&gt;&lt;a href=&quot;http://www.globo.com/Globo.com/sites/0,,5623,00.html&quot; title=&quot;todos os sites&quot; accesskey=&quot;s&quot; target=&quot;_top&quot;&gt;todos os sites&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;!--glb-barra-servicos--&gt;&lt;/div&gt;&lt;!--glb-barra-escopo--&gt;&lt;/div&gt;&lt;!--glb-barra-conteudo--&gt;&lt;/div&gt;&lt;!--glb-barra-widget--&gt;&lt;/div&gt;

Marcadores: , , , , ,

7 Comentários:

Às 22 de abril de 2011 16:33 , Blogger Priscila Miranda disse...

NÃO DEU CERTO, NOMEU BLOG NAO TEM A TAG, TENTO ENCONTRAR MAS MOSTRA 00, QNDO TENTEI COLOCAR O PASSARINHO DO TWITTER TB ACONTECEU A MSM COISA, PQ SERA?

 
Às 22 de abril de 2011 21:43 , Blogger Códigos Blogger disse...

@Priscila Miranda Todos os templates têm a tag <body>, caso não encontre tente procurar por <body (sem fecha-lá).

 
Às 14 de maio de 2011 17:38 , Blogger Thobias disse...

boa tarde vcs sabem como cria uma propria barra tipo essa ? gostaria de criar uma mais não tenho nem ideia por onde começar,Obg.

 
Às 14 de maio de 2011 22:35 , Blogger Códigos Blogger disse...

@Thobias No entendi, seja mais específico, mande um e-mail para codigosblogger@hotmail.com para maiores ajuda.

 
Às 19 de julho de 2011 11:59 , Blogger igor disse...

Nao consegui colocar aparece isso Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
Mensagem de erro em XML: The entity "iacute" was referenced, but not declared.

Error 500

Alguem ajuda

 
Às 30 de julho de 2011 17:30 , Blogger Editor disse...

Tem um modo mais fácil:

Adicione o código seguinte antes de </body> :

<link href='http://barra.globo.com/nova/css/barra-globocom.min.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
var glb = glb || {};
glb.barra = {

exibeAssineJa: true,
exibeCentral: true
};
(function() {
var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;
s.src = "http://barra.globo.com/nova/js/barra-globocom.min.js";
var ss = document.getElementsByTagName("script")[0]; ss.parentNode.insertBefore(s, ss);
})();
</script>

 
Às 31 de julho de 2011 23:28 , Blogger Códigos Blogger disse...

@Editor Olá Matheus, obrigado pela sugestão, e já criei um post disponibilizando o código. Abraços!

Barra G1 no seu blog - 2

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial