Gadget de avisos/Mural de recados

Oi gente, resolvi dar um alô pra vocês e trazer um tutorial simples. Eu atualizei as páginas e adicionei um novo gadget ~simples de aviso já com um recado pra vocês lerem e/ou "darem uma olhada". Vou ensiná-los a deixar o mural de avisos/recados desse jeito fofinho. Vamos?

Veja o exemplo aqui ou no topo direito da página (1º gadget)

Layout Leave Me

Oi gente! Vim hoje aqui trazer pra vocês um layout free que 'acabou de sair do forno'. Façam um bom proveito. E, por favor, leiam as regras - e o post todo! Beijinhos.

Box de boas vindas

Oi! Olha eu aqui de novo. w/ Hoje vim ensiná-los a montar um box de boas vindas para vocês.  Aquelas 'caixas' que geralmente contém um pequeno texto de apresentação no início da lista dos gadgets. Não entendeu o que eu quis dizer? Veja um exemplo abaixo:

Clique aqui para visualizar o exemplo em uso.

Faça aquele trajeto que você já conhece bem: Painel de Controle > Modelo > Editar HTML e procure por ]]></b:skin> e acima dele cole o seguinte código:

/** by extras-placefame **/
.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; }

Salve e logo em seguida vá até Layout e adicione um novo gadget > HTML/Javascript e cole o código abaixo:

<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. 

Menu Onders

Imagem encontrada em
http://weheartit.com/entry/51526009/via/cileklifalim

   Oi! ❤ Primeiramente quero dizer à vocês que eu não voltei ao blog. O blog está em hiatus, mas isso não me impede de postar algo pra vocês quando eu estiver com vontade ou simplesmente quando me bater uma onda criativa, não é mesmo? Então não se surpreendam quando eu postar simplesmente do nada. 

   Enfim, hoje trouxe para vocês um modelo de menu que eu acho puro amor - e que encontrei o código no Things to help you ♥ (tumblrs de HTML/CSS sempre nos ajudam com coisitas nos nossos blogs!) -, o Menu Onders, o diferencial dele é o efeito giratório, confira um exemplo abaixo:

Início

Página 1

Página 2

Página 3

Página 4

Página 5

Vá até o Painel de Controle e encontre 'Modelo' > Editar HTML (a nova interface confundiu tudo!), e procure por ]]></b:skin> e logo acima dele acrescente:

/******** menu onders by waytolisten **/
.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 **/}

Feito isso é só acrescentar o código seguinte a um gadget HTML.

<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>

Prontinho! Agora é só usar. Os créditos dos códigos já foi citado logo no início do post. Um grande beijo, até logo.