Como colocar Barra Ultimas Novidades (Breaking News) no blogger | Quero Dicas | Tutoriais para seu blogs


Como colocar Barra Ultimas Novidades (Breaking News) no blogger

Como colocar Barra Ultimas Novidades
Oi meus amados e minhas amadas. Depois de muito penar consegui melhorar e estou de volta. 

Para quem não soube eu estava dodoizinha (que bonitinho, "dodoizinha") e por isso eu não estava postando, frequentemente, como era habitual eu fazer. Peço desculpas a todos!

Bom, com minha melhora e sem muta enrolação, vamos direto ao que interessa.

A muito tempo me pediram, não lembro mais o nome (Que feio!), para criar uma postagem sobre Como colocar Barra Ultimas Novidades/Noticias (Breaking News) no bloggers. Para quem não sabe o que é Breaking News, vou resumir...

Breaking News , em português,  significa Notícias de Última Hora ou se preferir...Últimas Noticias ou Últimas Novidades. Tem muita gente que gosta de dizer ou escrever Últimas Postagens.
Enfim, creio que já entenderam, não é? =D

Este Breaking News, não mostra imagens e sim uma lista em texto (rolante) das últimas novidades do seu blog/site. Para que você entenda melhor, acesse GALERIA DE BLOGS. Perceba que existe uma barrinha escrito Quero Dicas News, é dessa Breaking News que eu falo.
Gostou? Então vamos ao tutorial.
Como sempre recomendo, faça um backup do seu template, ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog. Ou melhor...dê preferências ao blog de teste! Caso não saiba fazer Backup? Não tem problema, clique em: Como fazer um Backup ou restauração do seu blog.

  Passo 1

1. Acesse o painel do seu blog
2. Vá em "Modelo" e clique em "Editar HTML"
3. Procure por:
 
<div id='header-wrapper'>

4. Cole abaixo o seguinte código:

 
<div class='newspic'>
<div style='float:left;width:979px;padding:1px 0 6px 130px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://www.querodicasde.com.br/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>
</div>

• Onde esta http://www.querodicasde.com.br troque pelo endereço do seu blog
• Caso não encontre o código solicitado (header-wrapper). Coloque onde desejar, por exemplo:

post-header - Acima dos posts
main-outer -  Abaixo do cabeçalho
ou coloque acima de
 <b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
Para ficar acima do cabeçalho

  Passo 2

5. Agora procure por:
 
</head> 

6. Acima dele, cole:

Acesse para pegar o script

Faça as alterações onde eu deixei escritos (cores e tamanho das fontes)

  Passo 3

7. Agora procure por:
 
]]></b:skin>

8. Acima dela, cole:
 
/*Barra Newns*/
.newspic {
background:transparent url(background:#252525 url(http://3.bp.blogspot.com/-GoZGUMDvx8g/T1je4hEa9iI/AAAAAAAAA7E/aOfllbW_qOc/s1600/BRK+NW.png) no-repeat top left;
width:1010px; /*largura */
margin-left:-20px; /*margin*/
padding:0 auto; 
height:25px; 
color:#333;
}
.news {
width: 979px;
margin:0 auto;
padding:0 auto;
line-height: 1.2em;
text-align:left;
font-family:Arial;
font-size:11px;
color:#333;
overflow:hidden;
clear:both;
}
.news a:link, 
.news a:visited {
color:#000000;
text-decoration:none;
}
.news a:hover {
color:#333;
text-decoration:underline;
}

9. Personalizando
• Caso já tenha percebido, existe uma url de imagem. (é a mesma imagem dos créditos da postagem)
http://3.bp.blogspot.com/-GoZGUMDvx8g/T1je4hEa9iI/AAAAAAAAA7E/aOfllbW_qOc/s1600/BRK+NW.png
Personalize ao seu gosto com cores, fonte e estilo. Mas não fuja do tamanho da imagem (122px por 25px).

Caso não saiba hospedar imagens, veja um desses tutoriais:
Como hospedar suas imagens no seu próprio blog
Como hospedar uma imagem gratuitamente na Web para seu blog

• Troque, se desejar, "Transparent" para colocar cor ao fundo.
AQUI TABELA DE CORES

• Altere o largura pelo tamanho do seu layout

• Altere a margin, caso seja necessário.


10. Agora salve e pronto, seu Breaking News está lindo!

Gostou? Então comente! Seus comentários é minha inspiração
Beijinhos

Créditos de código Christian Tatelu


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.