Candy Cherry: Coluna da Câah : Criando um Layout Básico Parte ||

Hey MORANGOS

Olha a parte 2 do Layout Básico *-*

Já aprendemos a : Colocar Leia mais personalizado , Colocar Blockquote , Colocar ribbon no título dos gadgets , vamos colocar um Menu Marshmallow para deixar mais ''Kawaii''

Peguei esse tutorial no Rainha de Paris

1° Vá no MODELO >>> EDITAR HTML >>> CTRL + F

Procure pela tag

]]></b:skin>

Logo acima cole

@font-face {font-family: 'Pixelade';src: url('http://static.tumblr.com/ig73lmp/FNdmcixx3/pixelade.ttf');}

Lembre-se está é a fonte do seu MENU . Após isso cole acima de ]]></b:skin>

/* Menu Marshmallow por Pequena Garota*/marsh{color: #949494; /*cor da fonte*/text-align:center;font-family: Pixelade; /*não altere*/font-size: 13px;background: #FEF2F1; /*fundo do menu*/padding: 2px;float: left;margin: 2px;width: 22%; /* tamanho do menu */-webkit-transition-duration: .80s;box-shadow: inset 0 0 18px #ffe4e1, 0 0 3px #FFD1CC; /* sombra interna */border-radius: 3px; /*bordas arredondadas*/}marsh:hover{background: #f0f8ff; /*fundo do menu ao passar o mouse*/color: #949494; /*cor da fonte ao passar o mouse*/-webkit-transition-duration: .80s;box-shadow: inset 0 0 18px #D7ECFE, 0 0 3px #afeeee; /* sombra interna */border-radius: 3px; /*bordas arredondadas*/}

Este é o modelo junto as cores , como podem ver é super simples . ATENÇÃO

box-shadow: inset 0 0 18px #D7ECFE, 0 0 3px #afeeee; /* sombra interna */

Agora para aplicar ao blog é super simples ! Vá no Layout >>> ADD UM GADGET
HTML/JAVA SCRIPT , e cole o seguinte código

<div><a href=" LINK "><marsh> NOME</marsh></a><a href=" LINK "><marsh> NOME </marsh></a><a href=" LINK "><marsh> NOME </marsh></a><a href=" LINK "><marsh> NOME </marsh></a>

Vamos aos afiliados :3

2° Como colocar efeito de afiliados no blog

Outro tutorial fantástico do Rainha de Paris

PREVIEW

MODELO >>> HTML >>> CRTL + F

]]></b:skin>

Acima cole

.spineffect{max-width:85px;-moz-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;-ms-transition: all 0.5s ease-out;transition: all 0.5s ease-out;} .spineffect:hover{-webkit-animation-name: spin; -webkit-animation-duration: 400ms; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternate;}@-webkit-keyframes spin {from {opacity: .99; -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -moz-transform: rotate(0deg);} to {opacity: .30; -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -moz-transform: rotate(360deg);}}