Categorias em imagem no blog - Rose gold e dourado

Oi princesas! Como vão?

Faz bastante tempo que eu não posto um tutorial aqui no blog, por isso vim trazer este. Eu usei esses dois modelos de categorias aqui nos layouts do blog, então muita gente já conhece.

Para facilitar a vida de vocês, esse código faz com que a imagem se encaixe perfeitamente em layouts com lateral de todos os tamanhos.

O código já vem quase pronto, basta colocar o nome e o link das outras categorias onde se pede (essas outras categorias são as que ficam na barrinha preta). Mude onde tá escrito "link" e "Nome".

Para adicionar:

Layout > Adicionar gadget > HTML/JavaScript

Rose gold

<center>
<img id="Image-Maps-Com-image-maps-2016-10-26-223526" src="https://i.imgur.com/xAsGuB7.jpg" border="0" width="100%" height="auto" orgwidth="100%" orgheight="auto" usemap="#image-maps-2016-10-26-223526" alt="" />
<map name="image-maps-2016-10-26-223526" id="ImageMapsCom-image-maps-2016-10-26-223526">
<area  alt="" title="Make" href="/search/label/Make" shape="rect" coords="0,4,74,96" style="outline:none;" target="_self"     />
<area  alt="" title="Moda" href="/search/label/Moda" shape="rect" coords="88,6,162,98" style="outline:none;" target="_self"     />
<area  alt="" title="" href="/search/label/DIY" shape="rect" coords="170,11,250,97" style="outline:none;" target="_self"     />
<area  alt="" title="Cabelo" href="/search/label/Cabelo" shape="rect" coords="0,102,76,195" style="outline:none;" target="_self"     />
<area  alt="" title="Dicas" href="/search/label/Dicas" shape="rect" coords="90,98,161,188" style="outline:none;" target="_self"     />
<area  alt="" title="Unhas" href="/search/label/Unhas" shape="rect" coords="167,100,243,194" style="outline:none;" target="_self"     />
<area shape="rect" coords="248,194,250,196" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
</map>
<div class='widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;' style='background: #000 none repeat scroll 0% 0%; color: rgb(255, 255, 255); font-size: 14px; text-align: center; text-transform: uppercase; width: 100%; font-weight: 300; border: medium none; margin: 1px 118px 0px 0px; padding: 7px 4px 10px 0px;'>
<option />Outros assuntos
<option value="link" />Nome
<option value="link" />Nome
<option value="link" />Nome
<option value="link" />Nome
<option value="link" />Nome  </select></div></center>

Dourado

<center>
<img id="Image-Maps-Com-image-maps-2016-10-26-223526" src="http://www.image-maps.com/m/private/0/rvt2osbdgf9r9imvoado56trt6_mah-kemmely.jpg" border="0" width="100%" height="auto" orgwidth="100%" orgheight="auto" usemap="#image-maps-2016-10-26-223526" alt="" />
<map name="image-maps-2016-10-26-223526" id="ImageMapsCom-image-maps-2016-10-26-223526">
<area  alt="" title="Make" href="/search/label/Make" shape="rect" coords="0,4,74,96" style="outline:none;" target="_self"     />
<area  alt="" title="Moda" href="/search/label/Moda" shape="rect" coords="88,6,162,98" style="outline:none;" target="_self"     />
<area  alt="" title="" href="/search/label/DIY" shape="rect" coords="170,11,250,97" style="outline:none;" target="_self"     />
<area  alt="" title="Cabelo" href="/search/label/Cabelo" shape="rect" coords="0,102,76,195" style="outline:none;" target="_self"     />
<area  alt="" title="Dicas" href="/search/label/Dicas" shape="rect" coords="90,98,161,188" style="outline:none;" target="_self"     />
<area  alt="" title="Unhas" href="/search/label/Unhas" shape="rect" coords="167,100,243,194" style="outline:none;" target="_self"     />
<area shape="rect" coords="248,194,250,196" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
</map>
<div class='widget-content'>
<select onchange='location=this.options[this.selectedIndex].value;' style='background: #000 none repeat scroll 0% 0%; color: rgb(255, 255, 255); font-size: 14px; text-align: center; text-transform: uppercase; width: 100%; font-weight: 300; border: medium none; margin: 1px 118px 0px 0px; padding: 7px 4px 10px 0px;'>
<option />Outros assuntos
<option value="link" />Nome
<option value="link" />Nome
<option value="link" />Nome
<option value="link" />Nome
<option value="link" />Nome
  </select></div></center>

Beijos e até o próximo post