Fiquei quase 3 dias sem internet e isso pra mim é um saco, eu fico entediada sem fazer nada, aff. Enfim, hoje não quero enrolar, como já me expliquei usahashu' vamos lá ~~
Gente, acho que agora criar ou usar botões das redes sociais virou moda na blogofera. Mas cansa muito fazer 8 botões(ou mais) só pra enfeitar o blog. Por isso depois de um pouco pensar fiz um menu(5 menu's {amanhã posto o resto}) que é exatamente a mesma coisa e até dá pra usar com hover, ele é muito massa! Vale a pena ver a preview e acompanhar >3< para ver como aplicar no blog, é só ler mais!
..........................................................................................................................................................................................................................................
1. Vá no Modelo > Editar HTML > Tecle F3 e procure por ]]></b:skin> e acima disso cole:
/*--MENU SOCIAL EXCLUSIVO DO SWEET FLOWER - WWW.SWEEET-FLOWER.BLOGSPOT.COM---*/@font-face {font-family: "social font face"; src: url('http://static.tumblr.com/lq2ha19/0EUmscsjp/social_font.ttf');}#menusocial { font-family: social font face; /* fonte não mexa*/font-size: 32px; /* tamanho da fonte, mude se quiser/precisar */text-align: center; /* centralização do texto */background: #ac98bd; /* fundo, mude se quiser */border-radius: 5px; -moz-border-radius:5px; -ms-border-radius:5px; /* bordas arredondadas, mude o valor de todos se quiser */padding:3px; margin:1px; display: inline-block; /*Não mexa*/border:2px dotted #ccc; /*bordinha pontilhada*/text-shadow: 1px 1px 01px #555; /*sombra no textp, mude a cor se quiser*/-webkit-transition-duration: .9s; -moz-transition-duration: .9s; -ms-transition-duration: .9s; /*tempo de transição, só mexa se você souber*/}#menusocial:hover { /*---Menu Hover---*/cursor:pointer; /*cursor*/background: #928780; /* fundo ao passar o mouse, mude se quiser */-webkit-transition-duration: .9s; -moz-transition-duration: .9s; -ms-transition-duration: .9s; /*tempo de transição, só mexa se você souber*/}#menusocial a{ /*---Cor dos Links// Letra---*/color: #fff; /*Cor da fonte normal*/padding: 3px; /*Não mexa, se não o efeito parece um retangulo ;3*/text-decoration: none; /*Não mexa*/-webkit-transition-duration: .40s;}#menusocial a:hover{/*---Cor dos Links Hover// Letra---*/color: #d5d4d4; /*Cor dos links ao passar o mouse por cima*/ -webkit-transition-duration: .40s;-moz-transition-duration: .40s; -ms-transition-duration: .40s; /*tempo de transição, só mexa se você souber*/text-decoration: none; /*Não mexa*/}/*---Fim----*/
E salve. Depois vá em Layout > Adicionar gadget > HTML/JavaScript > E cole o seguinte:
<center>
<div id="menusocial"><a href="LINK DA PAGE" title='NOME AO PASSAR O MOUSE'>F</a></div>
<div id="menusocial"><a href="LINK DA PAGE" title='NOME AO PASSAR O MOUSE'>T</a></div>
<div id="menusocial"><a href="LINK DA PAGE" title='NOME AO PASSAR O MOUSE'>t</a></div>
<div id="menusocial"><a href="LINK DA PAGE" title='NOME AO PASSAR O MOUSE'>b</a></div>
<div id="menusocial"><a href="LINK DA PAGE" title='NOME AO PASSAR O MOUSE'>g</a></div>
<div id="menusocial"><a href="LINK DA PAGE" title='NOME AO PASSAR O MOUSE'>h</a></div>
<div id="menusocial"><a href="LINK DA PAGE" title='NOME AO PASSAR O MOUSE'>Y</a></div>
Explicações:
Bem, vocês estão vendo as letras em itálico no código acima? Pois bem, cada uma representa um simbolo das redes sociais; Lembre-se: Existem diferenças entre letra minusculas e maiúsculas, tome cuidado!
Por exemplo: b(minusculo) representa o simbolo do Rss/Feed do blog já o B(maiúsculo) representa o simbolo do blogger. Viram? Super simples, agora é só personalizar do jeito que você quiser!
Não reblogue sem créditos ><
Oiie tenha uma bela noite
ResponderExcluirBjs.. Maria
Complicada & Imperfeita* Adolescente*
c=
ExcluirComo seu blog está lindo!
ResponderExcluirAmei bem melhor.
perfectnaiveforever.blogspot.com
:) obrigada, que bom que vos agradastes!
ExcluirSeu blog está simplesmente muito perfeito, e adorei o menu :3
ResponderExcluirBeijocas, Eloísa do Having Cherry
\0/ que bom que gostou do blog, volte sempre.Obrigada!
ExcluirEsse menu é super fofinho, parabéns pela criação, Rafa :33 Usarei no próximo lay >3<
ResponderExcluirMil Beijos ❥
Garotas Atrevidas ❤ ~estou aguardando sua visita!
>3< obrigada Mille!
ResponderExcluirQue legal, tenho certeza de que vai ficar lindo :33
Ficou muito top *^* Faz um tutorial de como fazer esses previews ><
ResponderExcluirObrigada :33 Claro, acho que quarta ou quinta já teremos o tutorial >33<
Excluir