BoxDicasHot Galeria Para Blogger

Nesta postagem compartilho com vocês mais um código para deixar o Design do seu blog cada vez melhor. Dessa vez, trago para vocês uma Box Galeria. Você pode fazer o que quiser, como por exemplo, adicionar banners de sites parceiros ou até mesmo adicionar as postagens mais conhecidas do seu site ou as que você quer destacar, enfim.

Para colocar em seu blog... Entre em "Modelo" - "Editar HTML" e procure pela tag

]]></b:skin>

Tendo encontrado a tag, cole ACIMA dela o seguinte código

/*----------- BoxDicasHot Gallery -----------------*/
#BoxDicasHot {
height: 230px;
overflow: hidden;
margin: 0px;
width: 1060px;
background: none repeat scroll 0% 0% rgb(38, 41, 44);
border: 1px solid rgb(51, 51, 51);
padding: 5px 5px 25px 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: 0px 2px 7px rgb(102, 102, 102);
}
#BoxDicasHot ul{ margin-left: 23px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }
#BoxDicasHot ul li{ overflow: hidden; float: left; width: 180px; height: 220px; border-top:0px solid #333; margin-right:14px; padding:2px 0px 4px 0px; }
#BoxDicasHot ul li:hover{ border-bottom:1px solid #6BB400; }
#BoxDicasHot img{width:150px;height:100px; padding:2px; border: 1px solid #A3A3A3; border-radius:10px; -moz-border-radius:10px;  margin-top:0px;}
#BoxDicasHot img:hover{border: 1px solid #c5c5c5; }

Tendo colado o código, salve e feche a parte de edição html.

Agora, entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código:

<div id='BoxDicasHot'>
<div style='visibility: visible; overflow: hidden;width: 100%; '>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Gadget by <a href="http://dicashot.blogspot.com/" target="_blank">DicasHot</a></span></div>
<ul>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='LINK'>
<img alt='DicasHot' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWKWtSTy-saWcqgzrPtXDXLuGQPiHOyH3G0rsxS2ojNK6XWGfEs5ExBpl3v-cBm0W82sIOIZvDhnBQj38uQwMuc_Jd3MI7VC3JBtPzoGBr99sy74zPbdH8oCUYPPFOT7Jp8MBP5d4DkFU/s1600/DicasHot+Compartilhe.png' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='LINK'>DicasHot</a></h3>
<p>Aqui você escreve uma breve descrição do conteúdo!!!</p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='LINK'>
<img alt='DicasHot' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWKWtSTy-saWcqgzrPtXDXLuGQPiHOyH3G0rsxS2ojNK6XWGfEs5ExBpl3v-cBm0W82sIOIZvDhnBQj38uQwMuc_Jd3MI7VC3JBtPzoGBr99sy74zPbdH8oCUYPPFOT7Jp8MBP5d4DkFU/s1600/DicasHot+Compartilhe.png' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='LINK'>DicasHot</a></h3>
<p> Aqui você escreve uma breve descrição do conteúdo!!!  </p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='LINK'>
<img alt='DicasHot' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWKWtSTy-saWcqgzrPtXDXLuGQPiHOyH3G0rsxS2ojNK6XWGfEs5ExBpl3v-cBm0W82sIOIZvDhnBQj38uQwMuc_Jd3MI7VC3JBtPzoGBr99sy74zPbdH8oCUYPPFOT7Jp8MBP5d4DkFU/s1600/DicasHot+Compartilhe.png' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='LINK'>DicasHot</a></h3>
<p>Aqui você escreve uma breve descrição do conteúdo!!!</p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='LINK' rel='nofollow'>
<img alt='DicasHot' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWKWtSTy-saWcqgzrPtXDXLuGQPiHOyH3G0rsxS2ojNK6XWGfEs5ExBpl3v-cBm0W82sIOIZvDhnBQj38uQwMuc_Jd3MI7VC3JBtPzoGBr99sy74zPbdH8oCUYPPFOT7Jp8MBP5d4DkFU/s1600/DicasHot+Compartilhe.png' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='LINK' rel='nofollow'>DicasHot</a></h3>
<p>Aqui você escreve uma breve descrição do conteúdo!!!</p>
</div>
</li>
<li>
<div class='mbtbody'>
<a class='Fadein3' href='LINK'>
<img alt='DicasHot' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWKWtSTy-saWcqgzrPtXDXLuGQPiHOyH3G0rsxS2ojNK6XWGfEs5ExBpl3v-cBm0W82sIOIZvDhnBQj38uQwMuc_Jd3MI7VC3JBtPzoGBr99sy74zPbdH8oCUYPPFOT7Jp8MBP5d4DkFU/s1600/DicasHot+Compartilhe.png' width='170'/>
</a>
<div class='clear'></div>
<h3><a href='LINK'>DicasHot</a></h3>
<p>Aqui você escreve uma breve descrição do conteúdo!!!</p>
</div>
</li>
</ul>
</div>
</div>

Personalize a partes destacadas no código.

Tendo feito isto, está pronto!!!

Veja muito mais postagens vendo vendo o Índice:

http://dicashot.blogspot.com/p/indice.html