20.7.14

Menu slide open heart para redes sociais


Ohayou!

Este deve ser um dos poucos tutoriais que terei de facto de reblogar, porque ele estava bastante perfeito: agradeçam ao Bunny Crazy. É um menu para redes sociais, como leram pelo título, que consiste num coração que, ao passar o rato, abre e revela os icones das redes sociais. É um menu que originalmente ocupa pouco espaço mas, como vai alargar, indico que não usem na sidebar nem assim, talvez abaixo do cabeçalho. Além disso, a Bunny criou também um modelo mais neutro, para os rapazes poderem usar, que consiste num ovo. E eu própria tentei criar um modelo meu, mas não consegui >.<


Previa

Modelo 1 - coração

1. Procure por </head> . Abaixo, cole o código seguinte:
<!-- Start Open Heart Bookmarking Gadget From http://www.helplogger.blogspot.com/ -->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- End Open Heart Bookmarking Gadget From http://www.helplogger.blogspot.com/ -->

2. Agora procure por </body> . Abaixo, cole:
<!-- Start Open Heart Bookmarking Gadget From http://www.helplogger.blogspot.com/ -->
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script><a href="http://www.helplogger.blogspot.com/">Blogger Gadgets</a>
<!-- End Open Heart Bookmarking Gadget From http://www.helplogger.blogspot.com/ -->


Prévia

Modelo 2 - ovo

1. Procure por </head> . Abaixo da linha, cole:
<!-- Slide Out Egg Social Bookmarking Widget Starts -->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- Slide Out Egg Social Bookmarking Widget Ends -->
 2. Agora procure por </body> . Abaixo dele cole:
<!-- Slide Out Egg Social Bookmarking Widget Starts -->
<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;
    ,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});
</script>
<!-- Slide Out Egg Social Bookmarking Widget Ends -->



Era isto. Que acharam dos modelos? Não retirem nenhum dos créditos, tá?

Sem comentários:

Enviar um comentário