Ola Queridos Leitores do Tecnoblog, por meio desse artigo, venho informado-lhes que ficarei mais ou menos uma ou mais semana sem postar aqui no blog, infelizmente, devido ao motivo que terei provas na minha escola e por esse motivo terei que dar uma "pausa" no blog, mas voltarei com carga total, devido que entrarei de ferias e terei que estudar para uma prova seletiva, a data certa para a volta de mim no blog sera ao dias 17 de dezembro de 2012! Se preparem, qualquer coisa posto algo aqui para o blog nao ficar totalmente "desatualizado" e talvez guests posts sejam postadas aqui! Obrigado pela compreensao. Ate mais. Ola queridos leitores do Tecnoblog, devidamente como falei o blog poderia vir com posts surpresas durante minha ausencia, desde entao "arranjei" um tempinho e vim postar aqui para voces um tutorial bem legal, e sobre a caixa de noticias variadas, mas oque seria ela? Ela e basicamente uma box aonde voce podera colocar noticias anexadas de imagens com efeitos CSS shadow, ao colocar o mouse em cima da imagem o efeito e ativado.Entao vamos ao Tutorial de como instala-lo em seu Blog:1 Passo - Injetando o codigo CSS1. Faca login no Blogger2. Em seguida no menu suspenso, clique em Modelo.3. Em seguida clique no botao em Editar HTML4. E procure pela seguinte tag:]]></b:skin>5. E acima do codigo Citado acima, adicione o seguinte codigo: #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 Blog1. No menu do Blog, clique em Layout2. Em seguida clique em Adicionar um Gadget3. Escolha a opcao HTML/JavaScript4. De um titulo ao Gadget5. E no campo do Gadget adicione o seguinte codigo 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">DESCRICAODANOTICIA</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">DESCRICAODANOTICIA</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">DESCRICAODANOTICIA</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">DESCRICAODANOTICIA</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">DESCRICAODANOTICIA</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">DESCRICAODANOTICIA</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">DESCRICAODANOTICIA</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">DESCRICAODANOTICIA</a></div></div></div>Sendo que: Logo do header: Nessa parte, voce colocara devidamente uma mini-logo para que os outros vejam que as noticias foram publicadas a partir do seu site.LINKPARAALOGO: No "Logo do header" voce sabe que coloca sua mini-logo..