Box de notícias variadas no seu Blog
Autor: Caiume | Publicado: 2012-12-11T08:45:00-02:00


Olá queridos leitores do Tecnoblog, devidamente como falei o blog poderia vir com posts surpresas durante minha&nbsp;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.&nbsp;Faça login no Blogger

2.&nbsp;Em seguida no menu suspenso, clique em Modelo.

3.&nbsp;Em seguida clique no botão em Editar HTML

4.&nbsp;E procure pela seguinte tag:





]]&gt;&lt;/b:skin&gt;

5.&nbsp;E acima do código Citado acima, adicione o seguinte código:&nbsp;



#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&nbsp;HTML/JavaScript

4. Dê um título ao Gadget

5. E no campo do Gadget adicione o seguinte código HTML:







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





Sendo que:&nbsp;



Logo do header:&nbsp;Nessa parte, você colocará devidamente uma mini-logo para que os outros vejam que as noticias foram publicadas a partir do seu site.



LINKPARAALOGO:&nbsp;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:&nbsp;O nome já explica&nbsp;exatamente&nbsp;o mesmo, daí você coloca o link da notícia desejada para que seus leitores vejam e se interessem.
IMAGEMDEMONSTRATIVADANOTICIA:&nbsp;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:&nbsp;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!&nbsp;
Abraços e um Feliz Natal.
Boas festas..