♦ Tutorial ~ Gadgets Estilo Quadrado do Chá & CupCake

Hey Rilakkumas *aí como é bom estar de pijamas*
  Já que estamos de layout novo, eu irei revelar alguns segredos do nosso lay antigo o Tea in Wonderland, o retardado aqui não tirou print do lay antigo, por isso não tenho como mostra-lo para os novos seguidores, mas os tutoriais estão todos armazenados e a cada dia vamos aprender algo novo.
  Hoje iremos aprender como fazer a nossa sidebar antiga, aquela sidebar quadrada com efeito hover no título, exemplo aqui em baixo.


Então vamos lá aprender? É super fácil.
No seu painel, vá em.
LAYOUT >> ADICIONAR UM GADGET >> HTML/JavaScript
E cole este código:
<style>
/**PERSONALIZAÇÃO DA SIDEBAR BY SOU O BYEL**/
.sidebar .widget {
width:120% !important;
background: #fff; /** COR DO FUNDO DO GADGET **/
margin:30px 0 !important;
padding: 10px;
}
.sidebar .widget h2 {
background: #77DDFF; /*Cor do fundo do título*/
width: 50%; /*Largura do fundo, aumente se precisar*/
font-family: Verdana; /*Fonte do titulo*/
font-size: 14px; /*Tamanho da fonte*/
font-weight: normal;
text-align: center;
color: #fff; /*Cor da Fonte do Título*/
line-height: 14px; /*Altura da linha, coloque o mesmo que o tamanho da fonte*/
margin-top: -20px; /*Quantos pixels o título "sobe"*/
box-shadow: 1px -1px 2px #9a9a9a;
-webkit-box-shadow: 1px -1px 2px #9a9a9a;
-moz-box-shadow: 1px -1px 2px #9a9a9a;
transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;}
.sidebar .widget h2:hover{
font-size:14px /** TAMANHO DO TITULO **/;
letter-spacing: 3px; /* espaço das letras hover */
background: #B5FF00; /*Cor de fundo do Título quando passa o mouse*/
color: #fff; /*Cor do Título Quando Passa o Mouse*/
transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;}
</style>

Ao colar o código, você vai ver que ele está TODO explicado, não mexa no que não tiver explicação.
AQUI temos uma tabela para vocês usarem.
Espero que tenham gostado curtido o tutorial, e bye bye.

Eu vi o coisa de plágio, prefiro não interferir porque sou muito Paz e Amor, e acho que isso não nos interfere nem atinge em nada. Mas plágio é feio.

20 comentários:

  1. Byel descoplicando os códigos pra gente ehueheu
    Paz é amor né Byel -n kPOSKAOPSKPAOSKOASKAOSKAOP
    Bem eu fico tipo DAFUQ, porque não acho o que a pessoa vai ganhar fazendo um blog igual que já tem KSAOPKSPAOKSASAKOPSAK nem comentários tem vei LOL Mas enfim U_U
    Byeeel aquele slide do cabeçalho passa muito rápido fio!! Dá nem pra ler o negócio KAOPKSOPAKSPAOSKOASKOPSKAOPSKAPSASKPAOSKA (sorry mas eu tinha que falar kkkkkkkkk)
    E só eu senti falta do chat? Não posso mais encher o saco de vocês KSOPAKSOPAKSASKASKP XD
    Kissus Kissus

    ResponderExcluir
    Respostas
    1. ^u^ Valeu Miya, eu tento deixar o mais fácil possivel.
      Yes, Peace and Love in the heart.
      A esmagadora maioria dos blogs que plageam se encaixam nesse perfil, por isso eu não me preocupo.
      kkkkkk, era para ser apenas uma amostra, mas vou diminuir a velocidade.
      Eu tambem fiquei com sdds do Cbox, não consigo mais conversar tanto contigo, kkkkkkkkkkkkkkkk.
      kissu

      Excluir
  2. Amei o tuto, sério esse blog caiu do céu!! Nunca vi um blog assim! Eu sinceramente, acho esse blog PERFEITO, e é um dos meus favoritos agora >,< Ah, você quer que eu tire o tuto de como personalizar o tooltip do meu blog?
    bjs Ana

    ResponderExcluir
    Respostas
    1. Não pode deixar, não foi plágio não, afinal, eu peguei ele de outro blog.

      Excluir
    2. ok, mas qualquer coisa do tipo, fala tá?

      Excluir
    3. Nem agradeci por gostar tanto assim do blog, valeu pelos elogios e obrigado por vir aqui no C&C.
      E não seu post estava dentro dos conformes, kkkkkk, não foi plágio não. E qualquer coisa eu aviso sim ta bom?

      Excluir
  3. prints do lay antigo do seu blog:
    http://imageshack.us/scaled/landing/4/checupcake1.png
    http://imageshack.us/scaled/landing/651/checupcake2.png
    http://imageshack.us/scaled/landing/28/checupcake3.png
    http://imageshack.us/scaled/landing/831/checupcake4.png
    http://imageshack.us/scaled/landing/39/checupcake5.png
    estão pequenos mas...

    ResponderExcluir
    Respostas
    1. MUITO OBRIGADO LAURA
      Você salvou minha vida.
      Valeu mesmo, como posso retribuir?

      Excluir
    2. kkkk nã precisa, na verdade eu não tinha conta no blogger, ai eu conheci aqui, gostei tanto que tirei prints (no lay antigo) ai, eu li esse post, lembrei dos prints, criei uma conta no blogger só para poder te passar esse prints!
      bjs

      Excluir
    3. Puxa, valeu ainda mais por isso, gostei muito de ti.
      Tirar prints, criar conta. Valeu mesmo.

      Excluir
  4. Gostei muito desse tuto, já estou certo sobre meu próximo template, o tema será um anime que acabei de assistir, mais vou fazer surpresa, estou aprontando ele já faz alguns dias, acho que vou usar este tuto, mais ainda está incerto, mais se eu usar tenha certeza que vou dar créditos ao seu blog, ok?

    X-Tudo Confissões

    ResponderExcluir
    Respostas
    1. Obrigado ^^, andei lá no seu blog e chuto que seja Kuroshitsuji, acertei?
      Espero que use, ficarei feliz em ver ele em outro blog, com certeza.
      Valeu

      Excluir
  5. Olá, vcs aceitam afiliação ?? aqui meu blog: http://a-preguica-de-um-otaku.blogspot.com.br/ o icon que eu quero é o do Ciel ^^

    ResponderExcluir
    Respostas
    1. Aceito sim a afiliação, mas a imagem será a primeira disponivel atbom? Se não ficará uma bagunça.

      Excluir
  6. Ameii.....isso tuddooo muito perfeitooo.........parabens. Por favor pesso para seguir meu novo blog q apenas tem um dia o link é http://my-heart-kawaii.blogspot.com.br/

    Agradeço, a compreenção ~Kissus de Cat-Sig

    ResponderExcluir
  7. Hua pena que eu tenha de outra forma u-ú mas essa é muito bonita <3

    ResponderExcluir
  8. eu acho bonito mais,talvez não usaria no meu blog,mais é sim muito bonito ;)

    http://paradiseinsummer.blogspot.com.br/

    ResponderExcluir
  9. Byel-san , adorei o tuto, consegui fazer, amei amei amei
    ja nee~

    ResponderExcluir