Ohayo minna-san, hoje venho trazer um tutorial para vocês e um menuzinho para rede social. Ele é perfeito para quem gosta de economizar espaço no blog, ele fica bem no topo do blog. Ele é muito bonitinho acho que vou usar no meu próximo layout. Também venho agradecer aqueles que seguiram o HOD, obrigada de verdade. O menu e do I love Themes, mas como achei no Kawaii Things dou os créditos a ambos. Então vamos ao tutorial?
Códigos
/***************** Menuzinho Simone (cerejadosundae) **/.caixasm{width:auto;top:-2px;left:5px;position:fixed;z-index: 100;}.navsm img{width:15px;}.navsm{background:rgba(255,255,255,0.4);line-height:16px;height:18px;margin: 1px; display: inline-block;width:18px;font-size:18px;color:#777;padding:4px; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out;float:left; }.navsm:hover {padding-top:20px; margin-top:0px; }
Códigos
<div class="caixasm">
<a href="LINKDOTWITTER" title="follow me"><div class="navsm"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixAsf8k0FojqaP6x2YJ4vo39m0EJw1SLWklqDspQfIB5Je6Dl1_YBJwuUqC0BQMKwYaWjylRIgmaPRsJjLD7u8EnfBGWrlPCgTGUXOiqinaNnYT3OllSmVAAALDCO_5xfXDyuRy8dTEZs/s1600/twitter-letter-logo.png" /></div></a>
<a href="LINKDOFACEBOOK" title="Facebook"><div class="navsm"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCdKz2xC2P4XN4TpwL8Fxzh03R2aJPaMDv6MAZrCSWihkVMf9zsL79TrvopmEXOAP52GVQ6SOgqS9Ytlbs5ManFaVi7KHg63gqWYXQXDboZ7UxIKAbGp6CgHkSBBbh9wsXQfVuF3UvzBs/s1600/facebook-logo.png" />
</div></a>
<a href="LINKDOINSTAGRAM" title="Insta"><div class="navsm"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPrqDE5nZiXKVH2uut39_MewMs2hL5nfkNf6nB1H5r5eu0r8-PAXAgtujoEpXjO30g6VlBCx4ZZiAHkmDFQIZbpwayb3S-zcu-8-UK6oIc_OzBpScVV27segdrnSiJMHSnHmCu24TYiy8/s1600/instagram.png" />
</div></a>
<a href="LINKDOAJUDA" title="help"><div class="navsm"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfb6t_IxCPeWFj6eLd8npnAHwLuxCiJCM0IccraXBC69bp1xMPxI5au9uH7YCclCa4Kt5tmt7rcG77-diLALbPZO_u-0PcZ9JsXsaZH-Q3BMpBcS4qmbIi5YYvGI6wC-3lYeVGLWU0854/s1600/help.png" /></div></a></div>
<a href="LINKDOTWITTER" title="follow me"><div class="navsm"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixAsf8k0FojqaP6x2YJ4vo39m0EJw1SLWklqDspQfIB5Je6Dl1_YBJwuUqC0BQMKwYaWjylRIgmaPRsJjLD7u8EnfBGWrlPCgTGUXOiqinaNnYT3OllSmVAAALDCO_5xfXDyuRy8dTEZs/s1600/twitter-letter-logo.png" /></div></a>
<a href="LINKDOFACEBOOK" title="Facebook"><div class="navsm"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCdKz2xC2P4XN4TpwL8Fxzh03R2aJPaMDv6MAZrCSWihkVMf9zsL79TrvopmEXOAP52GVQ6SOgqS9Ytlbs5ManFaVi7KHg63gqWYXQXDboZ7UxIKAbGp6CgHkSBBbh9wsXQfVuF3UvzBs/s1600/facebook-logo.png" />
</div></a>
<a href="LINKDOINSTAGRAM" title="Insta"><div class="navsm"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPrqDE5nZiXKVH2uut39_MewMs2hL5nfkNf6nB1H5r5eu0r8-PAXAgtujoEpXjO30g6VlBCx4ZZiAHkmDFQIZbpwayb3S-zcu-8-UK6oIc_OzBpScVV27segdrnSiJMHSnHmCu24TYiy8/s1600/instagram.png" />
</div></a>
<a href="LINKDOAJUDA" title="help"><div class="navsm"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfb6t_IxCPeWFj6eLd8npnAHwLuxCiJCM0IccraXBC69bp1xMPxI5au9uH7YCclCa4Kt5tmt7rcG77-diLALbPZO_u-0PcZ9JsXsaZH-Q3BMpBcS4qmbIi5YYvGI6wC-3lYeVGLWU0854/s1600/help.png" /></div></a></div>
OBS: O código estava dando contrito então modifiquei ele um pouquinho...mas os créditos continuam para o blog/site original. Ao colocar o código cuidado para não criar div repetidos tipo: </div></div></a>, se isso ocorrer ele vai descer não ficar no topo.
Se deseja fazer modificações na imagem, você pode criar ou procurar icons pela web. Então hospede e troque o url no código, apenas isso.
Que lindo ♥
ResponderExcluirnovajuventudexxi.blogspot.com.br vou usar no próximo lay :3
world--paradise.blogspot.com.br
^^ Thanks, usa sim
ExcluirFica super cute esse menuzinho *---*
ResponderExcluirObrigada pelo tutorial Wendy >.<
Kissu «3 || Pankax&Pankadax
Yo yo Rafa não foi nada! :3
ExcluirOlá,
ResponderExcluirLegal o menu, pena que não tenho redes sociais para o blog e muito menos para mim, rs'
Se algum dia precisar, eu uso!
Desculpe a ausencia, ma estou meio ocupada com a vida e prometo aparecer mais por aqui
Beijos~ semprefuiestranha.blogspot.com
Haha somos duas, também não tenho rede sociais para o blog, tenho preguiça ate de entrar nas pessoais rs' Mas da mesma forma já fico contente em saber que gostou.
ExcluirAhh Ammy que isso tudo bem, eu compreendo bem isso porque também estou passando por isso, então compreendo muito bem. Beijokas lindas
Esse menu é mto fofo *--* amo ele, hehe' Ty pelos creditos Wendy..
ResponderExcluirHihi verdade é muito fofo, que isso não foi nada. Apenas fiz o meu dever ^^
ExcluirEu já tinha visto este tutorial, mas esse menu é tão kawaii que ver de novo nao tem problema srrsrsrsrs
ResponderExcluirUma Borboleta Laranja
Haha entendo, entendo realmente vale a pena ver de novo. Obrigada pelo recadinho Nami
Excluirnoss, eu adorei *3* confesso que gostei >//////<
ResponderExcluir-kissus-
Nyaa que bom Naka fico contente por isso.
Excluirawn, que lindinho, adorei esse menu *-*
ResponderExcluirxoxo :3
Verdade e bem mimoso, obrigada pela visita Alisson
ExcluirSuper fofinho, e o bom é que economiza bastante espaço.
ResponderExcluirBeijoos!
sensatasonhadora.blogspot.com
Uhum isso que gosto nele, beijos Hi-chan
ExcluirAmei , vou usar para o meu blog do Luan Santana , dá uma passadinha lá o blog é novo e está em reforma . Beijos
ResponderExcluirhttp://luanjo-oficial.blogspot.com.br/
Yo usa sim, pode deixar faço sim uma visitinha.
ExcluirEu segui o passo-a-passo e coloquei no meu blog, mas ficou torto ;-;
ResponderExcluirSó o twitter ficou certinho, os outros ficaram longe pra direita e um pouco mais baixos.
Isso tem acontecido bastante ultimamente, mas experimente colocar o código abaixo do .mobile e no gadget colocar ele sobre todas as outras coisas se isso não funcionar, me diga para poder avaliar melhor o que esta acontecendo ^^
ExcluirObrigado (:
ResponderExcluirEntão, coloquei o código abaixo de .mobile e o gadget sobre todas as outras coisas. Os botões ficaram em cima do header um pouco a esquerda, mas não ficaram colados no topo super a esquerda como aqui http://static.tumblr.com/lluyi5e/BWumf1c4r/botaozinhotop.html
ficaram flutuando
Entendo, acho que ja sei como resolver, me diz é só a do tt que fica direito não é? Farei um teste aqui para ver se consigo resolver isso e deixo aqui para você. ^^
ExcluirOiee, desculpe a demora para arrumar o código mas consegui dar um jeitinho agora. E esta funcionando direitinho, só tome cuidado para não repetir os divs não repetirem como, porque se não eles vão descer novamente (leia o OBS da post para entender melhor). Espero que possa ter ajudado :3 E obrigada por me avisar o erro no menu.
ExcluirAgora foi! Muito obrigado mesmo :)
ResponderExcluirAhh que booooom!!! Que booom!!! *----* Que isso não foi nada, eu que peço desculpas pela demora e agradeço por comentar alertar que estava dando erro. =3
ExcluirMuito lindinho ele :3 Aonde posso por esse gadget? eu coloquei ela na lateral, mas fica uma barrinha sem nada :(
ResponderExcluirEle fica automaticamente na lateral superior do blog. Leia a observação da postagem vai lhe ajudar com essa barrinha torta,caso não seja tortamaissim vazia basta remove-la. ^^
ExcluirObrigada por gostar. Ele fica automaticamente na lateral superior do blog, mas caso esteja torto leia observação da postagem que explico melhor. Caso só esteja vazia e não sabe o que por é só remover. ^^
ResponderExcluir