![(2) indie | Tumblr](http://data.whicdn.com/images/73331312/large.jpg)
Veja o exemplo aqui ou no topo direito da página (1º gadget)
![]() |
Clique aqui para visualizar o exemplo em uso. |
/** by extras-placefame **/Salve e logo em seguida vá até Layout e adicione um novo gadget > HTML/Javascript e cole o código abaixo:
.boxwelcome {
background: #f5f5f5; /** cor do fundo **/
-webkit-box-shadow: inset 1px 1px 1px 0 #c7c7c7;
-moz-box-shadow: inset 1px 1px 1px 0 #c7c7c7;
box-shadow: inset 1px 1px 1px 0 #c7c7c7;
font-size:85%; /** tamanho da fonte **/
font-family:georgia; /** fonte do texto **/
text-shadow: 0px 1px #DCDCDC; /** sombra do texto **/
color:#707070; /** cor do texto **/
margin:5px; /** espaçamento externo **/
padding:8px; /** espaçamento interno **/
text-align: justify; /** texto alinhado **/
-webkit-border-radius: 5px; /** bordas arredondadas, caso queira retirá-las apague essa e as duas linhas seguintes **/
-moz-border-radius: 5px;
border-radius: 5px;
}
/** links do box **/
.boxwelcome a {
background-color:#EEE0E5; /** cor do fundo do link **/
color:#707070; /** cor do texto **/
text-shadow:0px 1px #fff; /** sombra do texto **/
padding: 2px;
padding-left: 4px;
padding-right:4px;
text-transform:uppercase;
font-size:80%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.2s ease-out;
-webkit-transition-duration:.50s; }
.boxwelcome a:hover {
background-color:#CDC1C5; /** cor do fundo do link ao passar o mouse **/
color:#fff; /** cor do link ao passar o mouse **/
text-shadow:0px 0px #fff;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.2s ease-out;
-webkit-transition-duration:.50s; }
<div class="boxwelcome">Oi! Escreva seu texto aqui nessa caixa, ela se ajustará automaticamente ao tamanho da sidebar do seu <a href="/">blog</a>. Blá, blá, blá.</div>Espero que vocês tenham gostado. Super beijo.
![]() |
Imagem encontrada em http://weheartit.com/entry/51526009/via/cileklifalim |
/******** menu onders by waytolisten **/Feito isso é só acrescentar o código seguinte a um gadget HTML.
.menuonders {
width:60px; /** largura **/
height:60px; /** altura **/
border-radius:60px 60px 60px 60px;
background:#000; /**cor do fundo **/
color:#fff;
text-shadow: 0px 1px 1px #707070;
text-align:center;
font-size:11px; /** tamanho da fonte **/
float:left;
margin:5px;
padding:3px;
-webkit-transition-duration:.99s;}
.menuonders:hover{
background:#f5f5f5; /** cor do fundo ao passar o mouse **/
color:#000;
border:2px dotted #ccc; /** borda do circulo ao passar o mouse **/
-webkit-transform:rotate(360deg);
-webkit-transition-duration:.99s; }
.menuonders a:hover {
color:#000; /** cor do link ao passar o mouse **/}
<div class="menuonders"><br><a href="#">Início</a></div>
<div class="menuonders"><br><a href="#">Página 1</a></div>
<div class="menuonders"><br><a href="#">Página 2</a></div>
<div class="menuonders"><br><a href="#">Página 3</a></div>
<div class="menuonders"><br><a href="#">Página 4</a></div>
<div class="menuonders"><br><a href="#">Página 5</a></div>
Comente com o Facebook: