22 janeiro 2019

Personalizar cada gadget da sidebar


Viram como o fundo está de cor diferente? Então vamos ao tutorial.

Primeiro você deve saber o nome do gadget que deseja mudar. No exemplo eu irei mudar o gadget de nome "Menu".

Abra o modelo HTML do seu blog e marque a caixinha "Expandir modelos de widgets"
Dê um clique dentro da janela com o código HTML, aperte Ctrl+F e procure pelo nome do gadget:


(Clique para ampliar)

Onde está em laranja é o nome do gadget que eu pesquisei. Onde está contornado de rosa é a Id do gadget, é desse nome que iremos precisar. Neste caso a Id do gadget é HTML1, anote ela que iremos usar no próximo passo.

Cole o código abaixo antes de ]]>

#ID-DO-GADGET {
background: #fff; /*Cor de fundo do gadget*/
}
#ID-DO-GADGET h2 {
/*Estilos para o título do gadget*/
Font-family: Verdana;
color: #000;
font-size: 14px;
}
Você só tem que substituir a parte em negrito pela Id que pegamos no passo anterior e aplicar os estilos desejados. Eu coloquei apenas o básico do básico neste código, mas você pode adicionar todas as personalizações que quiser. Você fazer isso com vários gadgets do blog, é só pegar a ID e colar o código.

Espero que tenham gostado! Desculpem não estar respondendo muitos comentários. O tempo está curto e também estou tendo uns probleminhas na família... Mas não se preocupem, logo logo tudo vai se acertar

Kissus, Liah

Enfeitar link: Linha ondulada


coloque isso no link que deseja 'enfeitar' sempre dentro das chaves { }

   text-decoration: underline;
   color:#f22;
  -moz-text-decoration-color: #000;
  -moz-text-decoration-line: underline;
  -moz-text-decoration-style: dashed;

No exemplo acima onde diz: underline pode ser substituido por:

    text-decoration: none → retira o sublinhado;
    text-decoration: underline → coloca sublinhado;
    text-decoration: overline → coloca a linha no topo do texto;
    text-decoration: underline overline →  linha no topo e em baixo do link;
    text-decoration: line-through → coloca a linha no meio do texto.


Exemplos de style, onde diz: dashed no exemplo acima, pode-se usar:

-moz-text-decoration-style: dashed     
-moz-text-decoration-style: dotted 
-moz-text-decoration-style: solid    
-moz-text-decoration-style: double    
-moz-text-decoration-style: wavy  olha que lindinha *-*

Onde diz: color:#f22; é a cor do texto/link
Onde diz: -moz-text-decoration-color: #000; é a cor da linha

Extras:

text-decoration:blink;  O texto pisca.
letter-spacing:3px;  → espaço entre as letras
line-height:2;  → altura entre linhas

Gif no título do Gadget

Pode ser colocado diferentes gifs nos títulos dos gadgets, como fazer isso? é o que vou ensinar..agooora



Mini gif 49Vá em Design    Editar HTML    Marque:  Expandir modelos
                      
Mini gif 49Ctrl F e procure por:   



 Veja na imagem onde fica o nome (título) do gadget

Mini gif 49Cole o código:   entre 

e


Deve ficar assim:
Coloque gifs nos gadgets que quiser procurando pelo nome de cada um, como mostrei na imagem
Veja alguns gifs aqui e aqui
 É só isso.. visualize se tiver tudo ok, salve! 
 Tutorial do blog:
 http://kakajupiter.blogspot.com/p/tutoriais.html


Centralizar título dos Gadgets



Vá em design > Editar HTML > aperte Ctrl F e pesquise por:  /* Headings
mais abaixo você vai encontrar:  .sidebar .widget h2 {



logo depois da chave você deve por o seguinte código:  text-align: center;





Visualize e se tiver tudo ok, salve e prontinho!

Divisória entre post e sidebar


..Vamos ao tuto então..




Vá em Design  > Editar HTML  > Aperte CTRL+F e procure por:
.main-inner .column-center-inner {
E após a chave cole o seguinte código:
border-left: 2px dotted #000000;
Altere da forma que quiser..

Border-left > é a borda do lado esquerdo

Border-right > é a borda do lado direito

2px > é o tamanho da borda (largura)

dotted > é o modelo da borda

e por fim #000000 é a cor da borda

Tabela de cores aqui

Outros modelos de borda (o nome da borda é o que esta em rosa)
border: 2px outset #ff5e9f
border: 3px inset #FFFF99
border: 4px ridge #46c74e
border: 3px groove #eded58
border: 4px double #FF0000
border: 1px solid #ed574c
border: 2px dashed #6a55ed
border: 2px dotted #919191

Qualquer dúvida pergunta aeeee 
Créditos: Other Things Attitude Included

Sidebar "Bad Reputation"

veja o tuto da sidebar ^^

 


VÁ EM:

Design  Adicionar um Gadget  HTML/JavaScript
Mini GifsCola o seguinte código:


Se quer a sidebar igual a do blog não modifique nada, apenas ajuste as margens
Mas se não quer igual modifique à vontade
Não esqueça:

Menu Deslizante

Vamos começar então?


   

#Normal: conteúdo do menu oculto
#Ao Clicar: Conteúdo aparece


Vá em Design > Editar HTML > aperte Ctrl F e pesquise por:
abaixo da tag cole esse código

Visualize se tiver tudo ok, Salve!
Para o código funcionar vá em design > Adicionar um gadget > HTML/Javascript cole o seguinte código no Gadget ou onde você quer que apareça o menu

Conteúdo do menu deslizante 1
Conteúdo do menu deslizante 2
Conteúdo do menu deslizante 3

Pronto é só isso :)