Como colocar Barra Ultimas Novidades no blogger | Quero Dicas


Como colocar Barra Ultimas Novidades 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. Agora 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!

Beijinhos

Créditos de código Christian Tatelu
COMPARTILHE :  

Comentários
2 Comentários

2 comentários

avatar
admin
quarta-feira, 15 fevereiro, 2017 ×

Queria como cara que mexe também com site o que leva a pessoa a fazer um site explicando algo que leve conteúdos para copiar (códigos) e coloca bloqueio para copiar os códigos. É a mesma coisa que oferecer bala a criança e na hora que a criança vai pegar ai puxa a bala e diz "não ia te dar mesmo!" Lamentável.

Resposta
avatar
admin
quarta-feira, 15 fevereiro, 2017 ×

Desculpas não percebi aonde copiava os códigos, e no <>. Retiro o que escrevi. Vou testar os scripts.

Resposta


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por seu comentário e por sua presença!

Apenas peço que leia:

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 palavras de baixo calão, não serão publicados ou respondidos.

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

4 - Comente a vontade, deixe sua opinião, crítique, esclareça suas dúvidas e dê suas sugestões ou dicas sobre o assunto referente à postagem.


Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

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