Popular Post

Posted by : christiane affonso 09/03/2013





Para quem não personalizar o texto e a posição do LinkWithin, ou seja, como trocar o texto daquele título maior de cima e como colocar o gadget abaixo do rodapé de postagem (pois antes o meu ficava em cima do "Leia Mais" e eu achava super esquisito).
Mas agora vamos aprender de uma forma bem simples como mudar as cores e as fontes desse gadget. Se você souber mexer em HTML pode até mudar outros aspectos, se quiser.
Lembrando que antes de fazer qualquer mudança no HTML de seu blog, recomenda-se que se faça antes num blog de testes ou que você salve seu template atual. 




  1. Entre em Design > Editar HTML ou Modelo > HTML > Prosseguir;
  2. Aperte Ctrl + F ou Editar > Localizar, no seu navegador;
  3. Copie o seguinte código: ]]></b:skin> e cole-o na caixinha que abriu;
  4. Antes do trecho destacado, cole o código seguinte:
.
.linkwithin_text {
    margin: 0px !important;
    border: 0px none !important;
    padding: 10px 5px 8px !important;
    text-align: left !important;
    font-weight: bold !important;
}

.linkwithin_inner {
    margin: 0px !important;
    border: 0px none !important;
    padding: 0px !important;
    width: 477px !important; /*Tamanho do seu LinkWithin*/
    background: none repeat scroll 0% 0% mistyrose !important; /*Fundo do gadget*/

    border-radius: 0.5em 0.5em 0.5em 0.5em !important;
    -moz-border-radius: 0.5em 0.5em 0.5em 0.5em !important;
    -webkit-border-radius: 0.5em 0.5em 0.5em 0.5em !important;
    box-shadow: 0pt 0px 1px rgb(102, 102, 102) !important;
    color: palevioletred !important; /*Cor da fonte do título maior*/
    font-size: 18px !important; /*Tamanho da fonte do título maior*/
    font-family: Coming Soon !important; /*Fonte do título maior*/

}

.linkwithin_img_0 {
    width: 100px !important; /*Largura das imagens dos posts*/
    height: 100px !important; /*Altura das imagens dos posts*/

    margin: 0px !important;
    border: 0px none !important;
    padding: 0px !important;
    box-shadow: 0pt 0px 1px rgb(102, 102, 102) !important;
}

.linkwithin_title.linkwithin_title_0 {
    margin: 0px 0px 0px !important;
    border: 0px none !important;
    padding: 0px !important;
    color: palevioletred !important; /*Cor da fonte dos títulos dos posts*/
    font: 10px arial black !important; /*Tamanho e fonte dos títulos dos posts*/

    text-align: center !important;
}
.linkwithin_posts a {
    border-right: 1px dotted palevioletred !important; /*Borda entre os posts*/
    padding-right: 0px !important;
    background-image: none;
}
.linkwithin_posts a:hover{
   background-color: white !important; /*Cor do fundo dos posts quando passamos o mouse*/
}
.linkwithin_title:hover {
   color: black !important; /*Cor dos títulos dos posts quando passamos o mouse*/
   text-decoration: none !important;
}


Os códigos em negrito são os que você pode personalizar de acordo com seu gosto (as explicações estão ao lado de cada um), só mexa nos outros códigos se você tiver certeza do que está fazendo. Os códigos em verde deixam as bordas redondas e os em azul colocam sombra nos lugares especificados. Se não quiser algum, é só apagar.
Visualize para ver se funcionou e depois clique em "Salvar Modelo".

Espero que vocês tenham gostado!!! Qualquer dúvida, deixe um comentário!!!


{ 5 comentários cutes ... read them below or Comment }

  1. Adorei o tutorial,
    e eu amei essa patinha de gatinho aí ^^
    bjs!


    relicariodasrafleur.blogspot.com.br

    ResponderExcluir
  2. Oi amiga,desculpa a demora depois que deixei a menssagem avisando que vinha no blog o meu Mouse deu pane.. aiiiii que raiva amiga kkkkkk.. acabei comprei outro hihi ^^ rss.. Descupinha

    Bom peo que eu entendi vc deseja deixar o fundo colorido, eu uso as vezes em tabelas.. da uma olhadinha nesse tuto

    http://dany-place.blogspot.com.br/2012/07/tt.html

    coloca os codigos dentro que funcionam ,porem é preciso colocar alguns sinais em codigos ascii para funcionar.

    espero ter ajudado.. beijinhos

    ResponderExcluir
  3. estou seguindo e levei para meu blog espero a visita e me siga obrigada

    ResponderExcluir
  4. Olá gatiinha !
    Tudo bem ?! Olha amei seu blog, ele é muito fofo *♥*
    Já até tô até inscrita no seu Blog !!!!

    Que tal retribuir, se inscrevendo no meu !?

    http://contatudosobrekarinasilva.blogspot.com.br/

    ResponderExcluir

Carinhas......
♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
❝❞✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷
✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡
。◕ ‿ ◕。 ಠ_ಠ ( °٢° ) ʘ‿ʘ ಥ⌣ಥ ಥ‿ಥ (ΘεΘ;) (n˘v˘•)¬ (✪㉨✪) ヽ(๏∀๏ )ノ (╹ェ╹) ╮(─▽─)) ≖‿≖ (ノ◕ヮ◕)ノ*:・゚✧ (⊙ヮ⊙) ᕦ(ò_óˇ)ᕤ ᕙ(⇀‸↼‶)ᕗ ( ಠ◡ಠ ) (•⊙ω⊙•) ‘︿’ ( ´∀`)☆ (≧ω≦) (´ー`) (つд`) ( ̄。 ̄) (*~▽~) ( ^▽^)σ)~O~) (=゜ω゜) (´ω`) (ノ_・。) (-_- )ノ (´ヘ`;) (^^;) ( ´∀`) ((((゜д゜;)))) (=ω=;) (。・_・。) (o´ω`o) (^▽^) (*´д`*) ( ̄□ ̄) ∩(︶▽︶)∩ (✿◠‿◠) (◡‿◡✿) (◕‿◕✿) (✖╭╮✖) (≧◡≦) (¬_¬) (◑‿◐) (◕‿-) ✖‿✖ (-’_’-) (╥_╥) (╯_╰) (╯3╰) (o_-) (¬‿¬) (◣_◢) (∪ ◡ ∪) (≧ω≦) o(≧o≦)o (⋋▂⋌) (॓_॔) (╯ಊ╰) (─‿‿─) ‹(•¿•)› (╯︵╰,) (︶︹︺) (∩︵∩) (。◕‿◕。) (⊙_◎) (~ ̄▽ ̄)~ (︶ω︶) (+_+) (。♥‿♥。) (✿ ♥‿♥) ♥╣[-_-]╠♥ ٩(͡๏̯͡๏)۶ ٩(-̮̮̃•̃)۶ ٩(̾●̮̮̃̾•̃̾)۶ ٩(-̮̮̃-̃)۶ (u_u) (*_*) (º_º) ٩(×̯×)۶ (ñ_ñ) (∩▂∩) (¬▂¬) (╯◕_◕)╯ (╹◡╹)凸 少 ¯\_(ツ)_/¯ (▰˘◡˘▰) (☞゚∀゚)☞ ლ(╹◡╹ლ) ヾ(^∇^)( ✿ ◠‿◠)

- Copyright © 2013 Cute Girl Pink - Date A Live - Powered by Blogger - Designed by Johanes Djogan -