Tutorial - Marcador do blog personalizado


Hola chicos \o

Como eu estava sentindo falta de vocês. Eu tento me afastar um pouco, más não dá mais, bate uma saudade imensa e eu acabo voltando antes do tempo AUSHAUSHAUSA. Como a Laura disse, eu estou postando na página dela e está sendo muito legal, porque é a primeira vez que eu posto em uma página onde o numero de likes é bem grande. É uma responsabilidade e você tem que fazer tudo direitinho se não apanha você apanha -n. Prometo que a partir de hoje estarei voltando com todas as minhas forças e vontades de postar pra vocês até quando vocês enjoarem de mim e do blog. Deixando as minhas bobagens de lado, vamos ao assunto da postagem (:

Faz muito tempo que eu não trago um tutorial para o blog, sempre só utilitários, por isso, com base em um tutorial de um menu, hoje eu trago para vocês o tutorial de como personalizar o próprio marcador do blog. Aquele padrão que quase ninguém usa porque é feio e sempre acaba não se encaixando com o layout do blog, ou simplesmente porque é bastante feio. É bem fácil, e pelo menos pra mim, quando ele está personalizado fica bem melhor, e você não vai ter a obrigação de estar adicionando outros menus para os marcadores. Se quiser ter uma preview, clique aqui.

Como em todo tutorial, vá até o Modelo -> Editar HTML, clique nele aperte Ctrl+f e procure por </b:template-skin> em alguns layout, ele vai estar fechado, então é só você procurar uma flechina preta com os nomes <b:skin>...</b:skin> que é a mesma coisa. Quando achar, cole em cima:
.widget ul, .widget #ArchiveList ul.flat {
list-style: none;
padding: 5px;
}
@font-face {font-family: 'Pf Arma Five'; src: url('http://static.tumblr.com/oqppubz/3LImeo4dp/pf_arma_five.ttf') format('truetype'); font-weight: normal; font-style: normal;}
.widget ul li, .widget #ArchiveList ul.flat li {
display: inline-block; /* Não altere, divide em blocos */
width: 50px; /* Não altere, tamanho dos blocos */
font-family: silkscreen; /* fonte */
font-size: 8px; /* Tamanho da fonte*/
color:#3d4e49; /* Cor da fonte */
text-shadow: 0 1px 0 #8ab0a4; /* Cor da sombra das letras */
text-align: center; /* Centralizado */
background-color: #9ac4b7; /* Cor dos blocos */
margin: 2px; /* Não altere */
padding: 3px; /* Não altere */
-webkit-border-radius: 2px; /* Tamanho das bordas*/
-moz-border-radius: 2px; /* Tamanho das bordas*/
border-radius: 2px; /* Tamanho das bordas*/
}
.widget ul li:hover {
background-color: #cc7987; /* Cor dos blocos em Hover*/
text-shadow: 0 1px 0 #663c43; /* Cor da sombra das letras em Hover */
-webkit-transition-duration: .50s;
}
Está tudo explicado no código. Salve e vá até a parte do Layout, clique em Adicionar Gadget e procure pela Gadget '' Marcadores'', lá você vai selecionar quais marcadores você quer que apareça! E é isso ....

17 comentários

  1. Eu adorei o efeito, Thiado! Aquele "Welcome" ficou super legal, perfeito!

    /MMG, novo layout\

    ResponderExcluir
    Respostas
    1. Ah, tem um tempinho que eu queria falar uma coisa com vocês... A fonte em pixels está distorcida aqui. Acho que é necessário hospedá-la e colocá-la como face-font no skin, porquê para quem não tem a fonte instalada no PC, fica ilegível. No meu computador fica normal, mas no Notebook, onde não tem essa fonte, fica distorcida.

      Excluir
    2. Ah obrigado (:, poderia me mandar um print ou me dizer em quais partes a fonte ta bugada ?

      Excluir
    3. Agora eu estou no PC. Mas eu me lembro algumas partes: Peoples, Winners, Marker e Credits. Tudo o que tem fonte em pixel, :3

      Excluir
    4. *Thiago, IUAHSIAUSHIAUSHIUASH'

      Excluir
    5. Obrigado, assim que der, vou arrumar (:

      Excluir
  2. Amei o marcador,e tao lindo *-*

    kisses!

    Lego House | l-egohouse.blogspot.com

    ResponderExcluir
  3. adoreii o o efeito fica bem legal........bjkas amore suahsuahsuahus

    bom domingo ta..........venha conheçer meu blog

    http://louca-por-html.blogspot.com.br/

    ResponderExcluir
  4. Awnn que ilustração diva, tenho um gatinho igual >.<
    Adorei o tutorial, bem explicadinho ^-^

    ~ Beijos ;*
    cantinhodaslovelys.blogspot.com.br

    ResponderExcluir
  5. Adorei o marcador.Tão fofo esse efeito.
    Eu estou lhe convidando a participar do concurso que tá rolando lá no blog é concurso de Halloween gostosuras ou travessuras.Participe para ganhar vários prêmios
    xoxo
    torrada com nutella

    ResponderExcluir
  6. Anônimo6.10.13

    Muito lindo ><

    just--dont.blogspot.com

    ResponderExcluir
  7. Amei o tuto, é tão fofo o efeito, estou usando no meu blog >.<

    ResponderExcluir
  8. Amei o tuto ficou super lindo brigada vc sempre me ajudando :)

    ResponderExcluir

- Se quiser um post, peça na ask !

- Se não gostou, não use palavras ofensivas. Ninguém precisa rebaixar-se a tanto para expressar a opinião.

- Leio todos os comentários, respondo e retribuo sempre que o tempo deixa.