Box de notícias variadas no seu Blog

► +A +/- -A
Olá queridos leitores do Tecnoblog, devidamente como falei o blog poderia vir com posts surpresas durante minha ausência, desde então "arranjei" um tempinho e vim postar aqui para vocês um tutorial bem legal, é sobre a caixa de notícias variadas, mas oque seria ela? Ela é basicamente uma box aonde você poderá colocar notícias anexadas de imagens com efeitos CSS shadow, ao colocar o mouse em cima da imagem o efeito é ativado.

Então vamos ao Tutorial de como instala-lo em seu Blog:

1° Passo - Injetando o código CSS

1. Faça login no Blogger
2. Em seguida no menu suspenso, clique em Modelo.
3. Em seguida clique no botão em Editar HTML
4. E procure pela seguinte tag:


]]></b:skin>
5. E acima do código Citado acima, adicione o seguinte código: 


#boxW{width:268px; height:786px; background:#FFF; display:block; position:relative; border:1px solid #000000; padding:0; margin:0; }.paddingW{ padding:2px; margin:auto;}.headerW{ float:left; width:268px; height:40px; background:#c50512; margin:0 0 10px 0; box-shadow:0 0 15px #c50512; border-bottom:1px solid #c50512; }span.tiHeW{ text-align:left; font:18px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#fff; float:left; margin:8px 0 0 15px; }.headerW img.imgHeaderW{ float:right; border:0; margin:0 10px 0 0; }.linksW{ width:124px; height:175px; background:none; margin:2px 4px; float:left; }.linksW img.imgW{ width:120px; height:120px; box-shadow:0 0 10px #ccc; padding:2px; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in;-moz-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; border-radius:3px; }.linksW img.imgW:hover{box-shadow:0 0 20px #585858;}.linksW a.tilW{ font:11px Arial, Helvetica, sans-serif; font-weight:bold; color:#000; text-align:center; float:left; margin:4px 2px 2px; text-decoration:none; -webkit-transition: all 0.1s ease-in; transition: all 0.1s ease-in;-moz-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; } .linksW a.tilW:hover{ color:#FF7575; }

2° Passo - Adicionando HTML e utilizar em seu Blog

1. No menu do Blog, clique em Layout
2. Em seguida clique em Adicionar um Gadget
3. Escolha a opção HTML/JavaScript
4. Dê um título ao Gadget
5. E no campo do Gadget adicione o seguinte código HTML:


<div id="boxW"><div class="headerW"><a href="Logo do header" target="_blank"><img class="imgHeaderW" src="LINKPARAALOGO" /></a></div><div class="paddingW"><div class="linksW"><a href="SITEDANOTICIA" target="_blank"><img class="imgW" src="IMAGEMDEMONSTRATIVADANOTICIA" /></a><a class="tilW" href="/w/805/155" target="_blank">DESCRIÇÃODANOTICIA</a></div><div class="linksW"><a href="SITEDANOTICIA" target="_blank"><img class="imgW" src="IMAGEMDEMONSTRATIVADANOTICIA" /></a><a class="tilW" href="/w/870/155" target="_blank">DESCRIÇÃODANOTICIA</a></div><div class="linksW"><a href="SITEDANOTICIA" target="_blank"><img class="imgW" src="IMAGEMDEMONSTRATIVADANOTICIA" /></a><a class="tilW" href="/w/931/155" target="_blank">DESCRIÇÃODANOTICIA</a></div><div class="linksW"><a href="SITEDANOTICIA" target="_blank"><img class="imgW" src="IMAGEMDEMONSTRATIVADANOTICIA" /></a><a class="tilW" href="/w/958/155" target="_blank">DESCRIÇÃODANOTICIA</a></div><div class="linksW"><a href="SITEDANOTICIA" target="_blank"><img class="imgW" src="IMAGEMDEMONSTRATIVADANOTICIA" /></a><a class="tilW" href="/w/749/155" target="_blank">DESCRIÇÃODANOTICIA</a></div><div class="linksW"><a href="SITEDANOTICIA" target="_blank"><img class="imgW" src="IMAGEMDEMONSTRATIVADANOTICIA" /></a><a class="tilW" href="/w/824/155" target="_blank">DESCRIÇÃODANOTICIA</a></div><div class="linksW"><a href="SITEDANOTICIA" target="_blank"><img class="imgW" src="IMAGEMDEMONSTRATIVADANOTICIA" /></a><a class="tilW" href="/w/977/155" target="_blank">DESCRIÇÃODANOTICIA</a></div><div class="linksW"><a href="SITEDANOTICIA" target="_blank"><img class="imgW" src="IMAGEMDEMONSTRATIVADANOTICIA" /></a><a class="tilW" href="/w/700/155" target="_blank">DESCRIÇÃODANOTICIA</a></div></div></div>


Sendo que: 

Logo do header: Nessa parte, você colocará devidamente uma mini-logo para que os outros vejam que as noticias foram publicadas a partir do seu site.
LINKPARAALOGO: No "Logo do header" você sabe que coloca sua mini-logo.. nesse "LINKPARALOGO" você deve colocar um link para que ao clicarem nessa logo forem redirecionados para um site, ou para a página inicial do seu.
SITEDANOTICIA: O nome já explica exatamente o mesmo, daí você coloca o link da notícia desejada para que seus leitores vejam e se interessem.
IMAGEMDEMONSTRATIVADANOTICIA: Aqui você colocará uma imagem como no exemplo/foto que postei acima, (que foi celulares) desde então a partir da notícia que você pegará, devidamente terá que colocar uma imagem que receie o leitor a visitar a notícia.
DESCRIÇÃODANOTICIA: Na descrição você deve colocar uma descrição da notícia apenas.

Pronto Amigos Leitores, gostaram? Se sim comentem e digam o que acharam! 
Abraços e um Feliz Natal.
Boas festas..
► Postagens Relacionadas:

5 Comentários

André Ferreira disse...

Na moral, amei o tutorial cara, tenho um blog de noticias que só tava precisando disso, eu não encontrava mas achei aqui, valeu mesmo, entra em contato pra nós fazer parceria: infonotice@gmail.com

21 de dezembro de 2012 10:36
Caio Vinicius disse...

Olá André,


Que bom que gostou do tutorial :), Obrigado pelo comentário e participação, infelizmente não estamos fazendo parceria, mas qualquer coisa entrarei em contato informado a realização da parceria!

21 de dezembro de 2012 10:42
André Ferreira disse...

Tem nada não Caio, eu que agradeço, mas ok.. Quando estiver com parceria disponibilizada entra em contato! Obrigado por tudo..

21 de dezembro de 2012 10:48
Caio Vinicius disse...

Certo! Agradeço eu... Fica com Deus e um Abraço.

21 de dezembro de 2012 10:54
André Ferreira disse...

Amém :)

21 de dezembro de 2012 11:01

Postar um comentário

Seu comentário é bem vindo, mas leia antes de comentar...
→ Se os comentários conter palavrões, xingamentos, ofensas ao autor ou qualquer pessoa, não serão publicados!
→ Não Contiver outros sites!
→ Não conversar com comentários!
→ Não conter propaganda!
→ Visite o nosso termos de uso
Obrigado e volte sempre!