Olá lindinhos, como vocês estão?
Voltei com mais um tutorial, bom pediram que eu ensinasse várias coisas pelo meu face e eu fiquei tão feliz em saber que de alguma forma estou podendo ajuda-los *-*
Mas, o tutorial de hoje é como adicionar um gadget bem prático, aos poucos vou ensinando várias coisas pra vocês. Ah, quem tiver curiosidade em ver todos os tutorias, pode clicar na barra de pesquisas e escrever "tutoriais" ou pode também clicar na aba aqui acima, lá vocês verão a lista com os que eu já fiz.
Vamos começar. Lembrando que você deve fazer um backup do seu template antes de começar a modificar o html, apenas por precaução.
Depois de salvar o seu template, entre nesse site http://www.linkwithin.com e preencha a caixa que aparece ao lado, com seu e-mail, endereço do seu blog, e na "Platform" clique em "others" caso contrário, não funcionará.
Na opção "Width" escolha quantas caixas você quer que apareça, com no máximo 5, por exemplo:
Se o seu blog tiver um fundo mais escuro, você precisa selecionar a caixa My blog has light text on a dark background. Agora basta clicar em Get Widget. Vai abrir uma nova página com um código.
Após isso você vai precisar abrir o seu painel de controle do blog, e clicar em Modelo e depois em Editar HTML, depois marque a opção Expandir modelos de widget. Clique em Ctrl+F e procure por:
<div class=’post-footer’>Antes desse código cole o código obtido no site Linkwithin. Visualize, se estiver tudo certo, salve.
E voilá, está feito!
Espero ter ajudado.
Muito obrigada! Deu super certo! Pode ensinar como pôr opções de compartilhamento nos posts, tipo: "Tweet" e "Curta", ocisas do tipo.
ResponderExcluirMUITO OBRIGADA!
maravilhosomundodetinta.blogspot.com.br
Claro flor, o próximo tutorial farei isso *-* Obrigada pela dica.
ExcluirFico muito feliz que tenha dado certo.
Beijocas!
Adorei e apliquei no meu novo Bestinho... rsrsrs Adoro tutoriais para incrementar as informações! Adorei amiga!
ResponderExcluirBeijos,
Celle
Best Therapy
HAHAHA'
ExcluirQue bom que você gostou Celle *-*
Quero só ver esse novo "Bestinho" hahaha
Eba!!
ResponderExcluirAdorei, sua linda!
Obrigada!
Beijão!
Que bom que gostou, flor *-*
ExcluirÉ um gadget muito útil. Eu já usava no meu blog e fico feliz que você esteja ensinando os outros blogueiros a fazer isso, Kéziah!
ResponderExcluirhttp://desbravandolivros.blogspot.com.br/
Ow, obrigada Vagner *-*
ExcluirKeeeeeeeh, amei amei amei, muito útil, muito bom, eu já tinha tentado colocar, mas não tinha conseguido!
ResponderExcluirAdorei!
Beijos : *
Fraaaaan
Que bom que você conseguiu Fran, linda *-*
ResponderExcluirBeijocas!
Este gadget me seria muito útil se eu estivesse com o antigo layout!! Mesmo assim, obrigado por nos ensinar... Futuramente eu posso colocar ele (gadget) no blog e uso o seu tutorial como Help.
ResponderExcluirBeijinhos e Feliz 2013!
Show de bola! Não imagina quanto tempo estou querendo adicionar isso no meu blog; mas, como sou nova nesse mundo, estava encontrando muita dificuldade. Muito obrigada por compartilhar seu conhecimento!
ResponderExcluirBeijos.
Patrícia Fagundes
Aw querida, fico muito feliz que tenha sido útil de alguma forma pra você *-* obrigada pela visita, beijos!!
ExcluirDeu super certo!!!
ResponderExcluirMuitissimo obrigada!!!
Imagina, fico feliz que tenha dado certo *-*
ExcluirComo eu faço para esse gadget ficar abaixo da assinatura, como está no seu? Obrigada.
ResponderExcluirOi querida, ai provavelmente você precisa mexer na posição da sua assinatura, agora que mudei de Lay a assinatura foi pra baixo dele. Beijos!
ExcluirEi, eu segui todos os passos indicados por você. Salvei e tudo mais. Mas, quando entro no meu blog, que clico em um nos quadradinhos do "Poderá também gostar de:", não vai.. Apenas carrega, e dá um código assim ''http://simplismeenteviver.blogspot.com.br/widget6.linkwithin.com/redirect?url=http%3A//blogdalarissab.blogspot.com/2012/09/blog-post_6464.html&vars=%5B%22http%3A//.br/%22%2C%201674585%2C%200%2C%20%22http%3A//simplismeenteviver.blogspot.com/2013/03/acaba-sempre-acaba.html%22%2C%20null%2C%200%2C%20291205957%5D&ts=1362785082122'' Não vai direto sabe? E depois aparece que o post não existe. Socorro! Me ajude.
ResponderExcluirPode ser algum problema no css do blog, ou no html java script ou alguma coisa assim
ExcluirNossa, que estranho, tentou repetir o procedimento? Como o Animes e Tudo mais falou, pode ser algum problema co css ou o próprio html, procure quem fez seu lay, para que possa te dar uma forcinha. Beijos!
ExcluirEsses passos só servem para blogspot? Ou serve para wordpress tbm?
ResponderExcluirFlor, no site indicado você pode escolher a plataforma, tanto blogspot ou wordpress: http://www.linkwithin.com/learn ;) os passos são os mesmos, só muda que eu não sei onde fica o "modelo" no wordpress hahaha beijos!
ExcluirMaaas muuuito obrigada \o/ Finalmente alguém que ensinou beem direitinho =D
ResponderExcluirVeja como ficou > http://thaylorrany.blogspot.com.br/
Aww, ficou lindo *-*
ExcluirNossa, muito obrigada, ficou demais... Você explica tudo tão direitinho
ResponderExcluirObrigada :D
beijos
http://geehzbookshelf.blogspot.com.br/
Aw, obrigada querida... Fico feliz que tenha ajudado <3
ExcluirAdorei! Perfeito! Fácil e certeiro!
ResponderExcluirObrigado!!!
Bjosss!!!!
Imagina, obrigada você <3
ExcluirObrigada , deu certinho !
ResponderExcluirQue booom *-*
ExcluirAmei deu munto certo você me ajudo munto obrigado pelo tutorial
ResponderExcluire é munto fácil
Obrigada pelo comentário querida, fico feliz que tenha ajudado. Super fácil mesmo *-*
ExcluirAgradecido, ficou bom no meu blog, continue dando dicas tão boas quanto essa =D
ResponderExcluirAw, muito obrigada <3
ExcluirComo vc colocou esses coraçoes caindo do cursor do mouse tem como colocar por exemplo umas bolhas
ResponderExcluirOi Gabriel, existem códigos para bolhas, estrelas e corações. Acho que já criei um tutorial sobre. Beijos!
Excluirmuito boa a dica
ResponderExcluiragnesvata.blogspot.com.br
Obrigada :D
Excluirnão consigo achar esse codigo div class=’post-footer’ no meu html, poderia me ajudar?????? http://sevirateen.blogspot.com.br/
ResponderExcluirVocê está procurando certinho da forma como coloquei? Sem tirar nada? Se sim e ainda não apareceu, procura a pessoa que criou teu lay, deve ser algum probleminha ou falta de algum código no html.
ExcluirPerfeito *o*
ResponderExcluirObrigaaaaaada <3
Excluirmuito, muito obrigada aqui de Portugal :)
ResponderExcluirnão imagina há quanto tempo queria ter isto no meu blog!!
Poxa, que feliz saber que alguém de longe gostou <3 muitíssimo obrigada. Beijos!
ExcluirVocê poderia nos ensinar como colocar na forma redonda? Acho a forma redonda mais lindinha...
ResponderExcluirDesde já agradeço.
http://mariaulhoa.blogspot.com.br/
Ah muito obrigada!
ResponderExcluirEu tava tentando adicionar esse widget de novo no blog e não conseguia.
Sua dica deu certo comigo.
Grande Beijo
Muito bacana seu post! Amei seu blog e suas dicas! Beijão linda!
ResponderExcluirqueridasenhorita.blogspot.com
Como vc colocou ele redondo?
ResponderExcluirPra ficar redondo coloque este código aqui:
Excluir/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #5a6989; /* Cor de fundo */
padding: 0 10px;
}
.linkwithin_text {
font-size:18px; /* Tamanho do título do gadget */
color:#e96978; /* Cor do título do gadget */
font-family: 'Dosis', sans-serif;
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none; /* Com isto eliminamos o link */
}
.linkwithin_posts {
width: 600px !important; /* Tamanho do gadget */
}
.linkwithin_posts a {
border: 0!important;
padding-right: 29px !important;
}
.linkwithin_posts a:hover {
background: #e96978 !important; /* Cor de fundo ao passar o cursor */
-webkit-border-radius: 50px !important;
-moz-border-radius: 50px;
border-radius: 50px;
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 { /* Bordas redondeadas */
-webkit-border-radius: 50px !important;
-moz-border-radius: 50px;
border-radius: 50px;
border-style: dashed !important;
}
.linkwithin_title {
color: #5a6989 !important; /* Cor dos títulos das postagens */
font-family: Unica One; !important; /* Tipo de fonte dos títulos das postagens */
font-size: 11px !important; /* Tamanho dos títulos das postagens */
line-height: 12px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #5a6989 !important; /* Cor dos títulos ao passar o cursor */
font-weight: bold !important;
}
Acima de ]]></b:skin
Olá Kéziah, também gostaria de saber como colocar eles redondinhos.
ResponderExcluirBeijoos.
http://nailsfantastic.blogspot.com.br/
Pra ficar redondo coloque este código aqui:
Excluir/* LinkWithin personalizado
----------------------------------------------- */
.linkwithin_div {
background: #5a6989; /* Cor de fundo */
padding: 0 10px;
}
.linkwithin_text {
font-size:18px; /* Tamanho do título do gadget */
color:#e96978; /* Cor do título do gadget */
font-family: 'Dosis', sans-serif;
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none; /* Com isto eliminamos o link */
}
.linkwithin_posts {
width: 600px !important; /* Tamanho do gadget */
}
.linkwithin_posts a {
border: 0!important;
padding-right: 29px !important;
}
.linkwithin_posts a:hover {
background: #e96978 !important; /* Cor de fundo ao passar o cursor */
-webkit-border-radius: 50px !important;
-moz-border-radius: 50px;
border-radius: 50px;
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 { /* Bordas redondeadas */
-webkit-border-radius: 50px !important;
-moz-border-radius: 50px;
border-radius: 50px;
border-style: dashed !important;
}
.linkwithin_title {
color: #5a6989 !important; /* Cor dos títulos das postagens */
font-family: Unica One; !important; /* Tipo de fonte dos títulos das postagens */
font-size: 11px !important; /* Tamanho dos títulos das postagens */
line-height: 12px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #5a6989 !important; /* Cor dos títulos ao passar o cursor */
font-weight: bold !important;
}
Acima de ]]></b:skin
Não consigo acertar ...me ajude a colocar. bjs
ResponderExcluiro meu só aparece You might also like: e nenhuma imagem ou post em miniatura
ResponderExcluir