Postagens Recentes
Mostrando postagens com marcador Menu social. Mostrar todas as postagens
Mostrando postagens com marcador Menu social. Mostrar todas as postagens

8 de out. de 2013

Botões de compartilhamento ao pé do post

Um comentário:


Mais um modelo de botão social para que seus leitores espalhem por aí, sem dó nem piedade suas postagens. É assim mesmo, com todo mundo dando aquela compartilhada que os posts se espalham, seu blog vai ficando mais conhecido e assim sendo  melhor indexado pelos motores de busca.

Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Hack para o template do Blogger, implementado em  abril de 2013.






 Agora vamos procurar por



 Agora que encontrou, clique na seta ao lado do código.

 Pronto. Veja, o código de seu template está todo dividido em partes. Mas para encontrar o código que queremos você precisará abrir a seguinte parte:


<b:includable id='post' var='post'>...</b:includable>


Procure por:

<div class='post-footer-line post-footer-line-1'>

Abaixo dele, cole o próximo código e depois salve.




<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#mintshare_mini, #mintshare_mini ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:#fff;}
#mintshare_mini {width:100px; height:35px;padding: 0 15px;
margin-top: 30px;
margin-bottom: 20px;}
#mintshare_mini a.sharetext {
display:block; width:110px; height:30px; text-align:center; line-height:35px; color:#000; text-decoration:none; font-size:13px; font-weight:bold;
background:#fff;
padding-left:5px;
cursor:pointer;}
#mintshare_mini a.sharetext img {
border: 0 none;
display: block;
margin-left: 10px;}
#mintshare_mini .flyout {
background: none repeat scroll 0 0 #AAAAAA;
height: 113px;
left: 40px;
position: relative;
top: -4px;
width: 0;
transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;}
#mintshare_mini .flyout ul {
background:#fff;
list-style:none;
position:absolute;
top:-27px;
width:420px;
height:35px;
border-left:0;
left:50px;
padding-right:10px;
z-index: 1;
overflow: hidden;
padding-left: 15px;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;}
#mintshare_mini .flyout ul li {float: left;}
#mintshare_mini .flyout ul li a{}
#mintshare_mini .flyout ul a img {}
#mintshare_mini .flyout ul li.drop-li {position:relative; width:35px; height:30px; float:left; z-index:100; margin-top: -2px;padding-left: 15px;}
#mintshare_mini .flyout ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}
#mintshare_mini .flyout ul li.drop-li a.drop-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;}
#mintshare_mini .flyout ul li.drop-li a b {background:lightBlue; padding:2px 0; font-family:arial, sans-serif; display:block; width:100px; margin-top:58px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-o-border-radius:10px;}
#mintshare_mini .flyout ul li.drop-li:hover &gt; a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li:hover &gt; a b {opacity:1; filter: alpha(opacity=100);}
#mintshare_mini .flyout ul li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li a:hover b {filter: alpha(opacity=100);}
#mintshare_mini .get_mintshare {
font-size: 10px;
margin-left: 5px;
position: relative;
top: 2px;}
.relbg h5{
color: #fafafa;
font-weight: normal;}
</style>

<!-- MintShare Mini -->
<div id='mintshare_mini'>
<a class='sharetext'><b>Compartilhe-me</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class='flyout'>
<ul class='icons'>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc-il0py6hcXIU4k8feSTsvGsvIvla1H_kTgIkAwTu5e2MPaLDUg5CIXad1Q1rjNNvE0yFeN5mKOOSxU5x2Zx_ShvQgs6p10xdAT0-A-uEr9jhqX92Hd03WE-V82R3DtLvuaKMqJscA3NX/s0/facebook_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEF4bO5_FQWnYI3eug59BuELcQp3uJbNxxgxGHwYSqh0d9OZbYrVwsPSJSpIuu1Cqlt_l3dWOqo7wT455iwi3eR_jgJqCG_E10B37Jeo3gqBKOpORjk5MxXCVcTvNIDbSBo9_l7SO_5We4/s0/twitter_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yBMC8bcW0DsA66BUp7askSDUmbOpJNqGxyE4Ji5QH2oQQKrSIsFIFlPMpnPGEskNsyrTCmQ6BdQpFRAtOcLtwqNj6N0fYM9nSIdc8z-tjBI57Ivc8xN-99BzpMvOlYR5_r-2utQJ0XK_/s0/stumbleupon_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBxsfXB93vcEDCmLlmZozUQM6fzecLLMvksVEe4Y62uUkqu2TzT9nRomqfPbNkad9zYqZDhPFzhJQizj-g19KcA1yka3nF0JZHyYacrqQnUzfDkfmUdjT3CTV_sVeDycDMa4pMZ1Qs5x3G/s0/digg_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT6GHE6s9BrIIMVBUjRl-NH902-LWVFeSKAjEcF3k_pHVkTYAuwie8ZJx9dvF-HQUco4o7QNhSBTO95M-0xHaC2Qgx_ddxQWVJDyWJaI3b0UHzhjx7oohs9oj8pO9_CY1wxHR5VpDAjo1h/s0/technorati_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1X0hyphenhyphenD0_o1cW9fvUbGJsz4ZhI6wtKbCuQH6VpOELUJAhS89KcY6Ic73NnvJnPp_ChPbqDGgCmLfATUEGyKuDEkvGb3myk5mOVfdd5ZknsqJzBpqfeQp-rKHze3r_rGWss0QpfQoGKqrHN/s0/reddit_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-AlfXIVTW2vyhGM_Y8byK8zdZMsWnQx6qaz6GbMVUZuqeSPtRyoW9dtTUCSFQ_Sn3nRBeY6lrw9MrIpj9B-QiTWfCQrWQdh3cPdkGbst1Fe4PNSc6Om_XCKentQfC5hdIXumptRRHPPCy/s0/yahoo_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class='drop-li'><a class='drop-a' expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjClaId54uQ3qgV1aoXDHEQLU_7i9VfLqv6wqVi7pIfoJ-QlGarV6xxurWajP_omnmgqTS_03TwGduVLmwBRQW5qAlw8SKhymiot7IJgOFzGOPwr8ntvMQ4tDeUR5KvOEU8cWvpSLNQ4TvT/s0/delicious_small.png'/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
</ul>
</div>
</div>
<!-- MintShare Mini End--></b:if>




22 de ago. de 2013

Menu social com efeito tooltip

Nenhum comentário:



Mais um modelo de menu social bem bacana, com efeito tooltip para ajudar seus visitantes a te seguir, te perseguir, te curtir, te pentelhar, etc. Coloque em seu blog este widget importante e com um design bacana e com script enxuto e leve.

Salve. Agora clique em Layout...




Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias.


<div class="container">
<ul class="action-bar clearfix">
<li>
<a href="ENDEREÇO DE SUA PÁGINA NO TWITTER" class="like">
<span class="zocial-twitter"></span>
<span class="tooltip">Siga-me</span>
</a>
</li>
<li>
<a href="ENDEREÇO DE SUA PÁGINA NO GOOGLE PLUS" class="favourite">
<span class="zocial-googleplus"></span>
<span class="tooltip">Meu círculo</span>
</a>
</li>
<li>
<a href="ENDEREÇO DE SUA PÁGINA NO FACEBOOK" class="comment">
<span class="zocial-facebook"></span>
<span class="tooltip">Curta-me</span>
</a>
</li>
<li>
<a href="ENDEREÇO DO BLOG/feeds/posts/default" class="share">
<span class="zocial-rss"></span>
<span class="tooltip">Inscreva-se</span>
</a>
</li>
</ul>
</div>
<style>
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}
/* ---------- GENERAL ---------- */

a { text-decoration: none; }
ul {
list-style: none;
margin: 0;
padding: 0;
}
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after { clear: both; }
.container {
display: block;
height: 64px;
position: relative;
width: 296px;
}
/* ---------- Action Bar ---------- */
.action-bar li {
float: left;
}
.action-bar a {
-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
color: #e7e7e7;
display: block;
font-size: 32px;
height: 64px;
line-height: 64px;
position: relative;
text-align: center;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-ms-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
width: 64px;
}
.action-bar a:hover .tooltip {
margin-top: 16px;
opacity: 1;
}
.tooltip {
border-radius: 3px;
font-size: 14px;
height: 28px;
left: 50%;
line-height: 28px;
margin: 0 0 0 -50px;
opacity: 0;
position: absolute;
top: 100%;
-webkit-transition: margin-top .3s, opacity .3s;
-moz-transition: margin-top .3s, opacity .3s;
-ms-transition: margin-top .3s, opacity .3s;
-o-transition: margin-top .3s, opacity .3s;
transition: margin-top .3s, opacity .3s;
width: 100px;
}
.tooltip:before {
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
}
.like,
.like .tooltip,
.like .tooltip:before { background: #65B1F8; }
.like:hover { background: #65B1F8; }
.favourite,
.favourite .tooltip,
.favourite .tooltip:before { background: #c93037; }
.favourite:hover { background: #b02b32; }
.comment,
.comment .tooltip,
.comment .tooltip:before { background: #43438e; }
.comment:hover { background: #393978; }
.share,
.share .tooltip,
.share .tooltip:before { background: #FF8000; }
.share:hover { background: #FF8000; }
</style>


7 de abr. de 2013

Menu social com efeito circular

5 comentários:


Mais uma bela opção de menu social com efeito hover. Esse da um efeito onde os botões giram, todo no css.

Clique em Layout


Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias.



<style>
#NBT_socialicons img {
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

#NBT_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
/* Spinning Social Icons Widget By www.NewBloggerTips.com */</style>

<center><p id="NBT_socialicons">
    <a href="ENDEREÇO DE SEU FACEBOOK"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAGDwdb5JB9ny0vEY83zmvWLJLgaJ9BZb2Ur3BJOFcsXfZqReSwgtws33C8tkbmOMYpy25pMXA4rGaPFsIBL1A-MRcrbz7DddmEERLL8bQvf6PcxaBgE44O28YLFS1bmExR7dvK5-0-atj/s1600/NBT+facebook+icon.png" /></a>

    <a href="ENDEREÇO DE SEU TWITTER"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpv70dcWX8hQa1w8fjEq4Ob_Nh_S2jQGx3pOzrcjgVFwWB34qKQIWMfp_VG80L-xjg-cUrYZA02JCdxXpGkUB8UblihUhPu0eQFiuG_zMuvMYAtK-fqTMSbReQX7yp0TuUz6lMBpXADXFG/s1600/NBT+twitter+icon.png" /></a>

    <a href="ENDEREÇO DE SUA PÁGINA NO GOOGLE PLUS"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghxim7dbUW4mKBWg8jZz5xHmVWWXabi8AgQKNUnmvVg38TDwepi04NCEaj-SxHxAjulFLeqQdS3nPzz2kSmvQfCgq6BpLSh2uXLDo2UzZSsyFxC8vrK9iy8pAP-qyu-lXGB2XUWDM4ZpoT/s1600/NBT+google+plus+icon.png" /></a>

    <a href="ENDEREÇO DO FEED DE SEU BLOG"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-cZ4SeLLbADPBxRuEVIsPpUzf9m5kI73ALNs8qSrSfZCyZOhhbdMzkwad1LklCoS72now-QimXZPDMqlJ7f0oYlgt6_9sgBHZy3BkxbKApSWYzKff2BAIQjSFJO1H1n7GCwFsrxhbtf5w/s1600/NBT+rss+feed+icon.png" /></a>

    <a href="ENDEREÇO DE SEU CANAL NO YOU TUBE"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjND-qeifXRLKEzzd89JRLJHfAm-9xayuWvDRm3xzyk0jaGLV_jV-5NLttaPMciPkAurtxSlCsIY05ygJt7p0y1u2KpeBAook0li0NQDDPfga7UGTvpePCl0tqVLZ6-xkscUoldHjnJQVFd/s1600/NBT+youtube+icon.png" /></a>
</p></center>


c:

31 de mar. de 2013

Widget com vários botões sociais e buscador

Nenhum comentário:


Widget com links para sus páginas sociais, buscador, e outros links de redes sociais. Bem bonito e profissional. Do excelente blog New Blogger, que recomendo demais que conheçam.

Clique em Layout


Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias.



<!-- Menu social -->
<style type='text/css'>
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}&gt;
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>
<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Buscar...&quot;;}" onfocus="if (this.value == &quot;Buscar...&quot;) {this.value = &quot;&quot;;}" type="text" value="Buscar..." />
<input id="searchsubmit" type="submit" value="Buscar" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/ID DE SEU FEEDBOURNER" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaOqu6HNeyFwRND9Lndel-ege6kw6kmz2ZqIpY_vftWUW_Sb3O4hh5LL5UhVSekX69Y3iy270ei8xp-9xfMlh3jV-Kutxxy0G16IW_ZBZvKsttMNj_TD4J3YSMo_9hhjZR3EYAReNCIRXn/"  alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feeds.feedburner.com/ID DE SEU FEEDBURNER" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=ID DE SEU FEEDBURNER" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ENrbNqMvGZSrHTfKnnx04C-q0Z_1TiKZTAt_6APR6f5ycCqxLJ_NDIo_6SYa32msG79uCd1ZVOFf0_4pnWkmBibULqejSoRBLMBV0T1V05hC1t8TRlk8I81h0Z_OsoLJSbEO05MSTc01/"  alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=ID DE SEU FEEDBURNER" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="ENDEREÇO DE SEU TWITTER" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj711WAtthEUYjSlIyf7ZarAKzjxUamw6zv9GZR8YRGNws21kF-dyrVRdDNMc9SGXOveuH78kiv01XRsQtXfaofukCOYyimM385JBN95GzB1kAcGovzQg43xFGnyLfSNmAupzWUS0AaUqr/"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="ENDEREÇO DE SEU TWITTER" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="ENDEREÇO DE SEU FACEBOOK" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMArEFLF0K_zW0YMJw6x5n_3WeEYtCMr_qqSZBIH4Nl6RhG_7jRhP4zWMaTbnCtCBZvPlOw5Dl6DY2jyxMDG8T_hOVTqjQsPur6oObgYVHD4UmEMIGtsmUvT3j0dt_WloXQD18Ghy2ChdB/"  alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="ENDEREÇO DE SEU FACEBOOK" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.ebloggertricks.com/" target="_blank">Eblogger Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMcEsmvUAwWcXf0ZCP1wIUln9iReiSVcuZKBUQ-kwMHZWbiU-2Osb1ZihCr0l2EijAVtmFX8K_II_Pdk0_2LnzsLSAfsiUnUGhLMPJHJ7qjjQClaldwNYXqt-P30nVwfWPitNETUghntg/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg6r7UcUk69kIluDRXvqcUdYoLuJeWzOlu0lkYQGHgjftsRgip1lx1sgsoHx3OGXBonqcaTdwV0q8RsgnLgYwzXBOnw8pk3ILkUpLqDWbmWHewSREoZI6kig9vl_9Ca088ka_TxbpqkRQ/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJzg2wXtgbHg_j-0DNV__IUVy0a9nbq9eLPsWgHXHP-I2YvvTFDiyt-_MLycgz_H4__q-4puwbcNkRvKWu9XGYO0kc-UgBsl3Pqbu7as36Ji-rPoml7d25vZan0MmUxOX6Z2sL5zwgDX4/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjenfcAaxeOhnltYQuE6acjO1Us2sSyLZB8oUc5TLfmXC-5-tPg8bSH0EMgvIG9QsJGzBrewFnF2JUfTQziibA8k6W49783mPbttjXFsU7xcBM4Cirbch8fH_rYXC-Hap-u1cE2TJ1kzqE/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh__BzODjD3g69yjKQsniGNh7mUz1VGjYuCNcNEJ4fZbWmnnx_cURvVb5unkR6OUIT1mr3maEg9nWKVfGYrnBffit4Ei1W0asKTxO-Ic15k5YurAt5cNo4Q4IemqB59-u60H3nBGxqK8E/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlIo1llID1khVgw9KOUc8qaNTpivC2RuzDrPj-aYuJlX96sMtN6goNeXew5y32_l1MKvXZM0-U30ow989-ydtehoIOKU3Q0YNU_Viu6BA8WXTJ1aFkV_LXIzChawjOjO9dYDWWN0BMidY/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqixCvn2ElICPbdI9LM8zqXD-rxhO5H9_edjNx_EQAH8grgKlFtAcv6TLR2aLgauEsxxgoxIA4EEBUnUgJoWpMbC-Dyga7yLWARAM6fEIJyHMYLj9motNMU27dilhiVtmh9dG_2DdqMFs/' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div></script></div></div>


Crédito: http://www.ebloggertricks.com

29 de mar. de 2013

Menu social para seu Blogger

2 comentários:



Outro excelente menu para suas páginas sociais, mais um modelo incrível do blog Ekletinery, bastando copiar o código e colar no HTML/Javascript em seu Blogger. Facílimo !




Vá até Layout


Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias nos códigos grifados na cor vermelha.



<!-- Menu socail -->

<style>
/*--------eklentileri.blogspot.com hareketli menu ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi56yRMJpFcXUUbMpdyer0x6NsPFG5RvSHMaFdO2iPjQPwPAH9xNs9a5aNRrDXE6uLrwbvF0b6pdXqm2yykyoNKbvhgYM9pufOWXlFrZ5xyqeXiZMpUsiy9u6IGoBRDIL7mOisG_oz9lEbA/s1600/eklentileri.blogspot.com.png) no-repeat;
-webkit-transition: ease-in 0.2s all;  
-moz-transition: ease-in 0.2s all;  
-o-transition: ease-in 0.2s all;  
-ms-transition: ease-in 0.2s all;  
transition: ease-in 0.2s all;
cursor:pointer;
}

.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}

.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}

.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}

</style>

<div class='touchme'>
<!--RSS-->
<a class='rss' href="ENDEREÇO DO FEED" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="ENDEREÇO DO GOOGLE PLUS" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="ENDEREÇO DO FACEBOOK" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="ENDEREÇO DO TWITTER" rel='external nofollow' target='_blank' ></a>

</div>

23 de mar. de 2013

Botões sociais com contador no pé da postagem

3 comentários:



Um bonito menu para colocar ao pé de suas postagens para que seus visitantes compartilhem suas postagens no Facebook, Google Plus e Twitter, principais páginas sociais da atualidade. Vamos implementar ?


Vá até o "Modelo de seu blog", clique em "Editar HTML"



Clique em Ir para um widget ao abrir a janela, clique em Blog1

Clique agora na pequena seta para abrir o código...



Clique novamente na pequena seta ao lado do código


<b:includable id='post' var='post'>...</b:includable>



Procure então por <div class='post-footer'>


Abaixo dele, cole o próximo código.


<b:if cond="data:blog.pageType == &quot;item&quot;">
<style>
.promote_post_bg {
    height: 103px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLuUUem4LNp6hau_TPMFlHPbq9O45rrk9K05HNpt7mAJ0W3sQY6C0C4cQ2k6kpOzo9TIaWuCkgFeF2BrSrrKVyvyaKD3v9TP1WZEztNKc4MiwXuluaZmSPUSZH2ZV81FzqEnx2m5clsilJ/s1600/social-kutucuk.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;}
.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;}
.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;}
 .promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
<div class="promote_post_bg">
<div class="promote_twitter">
<a class="twitter-share-button" data-via="BloggerEklenti" href="https://twitter.com/share">Tweet</a>
<script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");
       
</script></div>
<div class="promote_facebook">
<fb:like action="like" colorscheme="light" expr:href="data:post.canonicalUrl" font="verdana" layout="button_count" send="false" show_faces="false"></fb:like>
<div>
<b:if cond="data:post.isFirstPost">
<script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement('script');
                            js.id = id;
                            js.async = true;
                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
               
</script>
</b:if></div>
</div>
<div class="promote_google">
<g:plusone annotation="none" size="medium"></g:plusone>
<script type="text/javascript">
                (function () {
                    var po = document.createElement('script');
                    po.type = 'text/javascript';
                    po.async = true;
                    po.src = 'https://apis.google.com/js/plusone.js';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(po, s);
                })();
       
</script></div>
</div>
</b:if>



Crédito: Eklentiliery

22 de mar. de 2013

Botões para seu visitante partilhar suas postagens

Um comentário:


Aí está um menu interessante, com um efeito bonito e de muita importância para a divulgação  de seu blog no Facebook, Twitter, Pinterest entre outras páginas sociais. De fácil aplicação, sem necessidade de linkar ou escrever no código.


Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011



Procure agora por </body>



Acima dele, cole o código abaixo:




<!-- Start Shareaholic Sassy Bookmarks HTML (eklentileri.blogspot.com)-->
<div class="shr_ss shr_publisher">

</div>
<!-- End Shareaholic Sassy Bookmarks HTML (helperblogger.com) -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>

<!-- End Shareaholic Sassy Bookmarks script (eklentileri.blogspot.com) -->




20 de mar. de 2013

Colocar widgets sociais do Facebook, Twiiter e Google plus oculto

15 comentários:


Eis aqui um código para implementar os widgets de suas páginas sociais como Google Plus, Facebook e Twitter, onde ficarão escondidos tendo o visitante que clicar em alguns botões na lateral do blog.

Clique em Layout


Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias com os endereços de suas páginas sociais no local grifado em vermelho.



<!-- Menu com widgets sociais -->
<style>
img, a {
border: 0;
}
#on {
visibility: visible;
}
#off {
visibility: hidden;
}
#facebook_div {
width: 196px;
height: 340px;
overflow: hidden;
}
#twitter_div
{
width: 246px;
height: 240px;
overflow: hidden;
}
#google_plus_div {
width: 290px;
height: 250px;
overflow: hidden;
margin-left: 5px;
margin-top: 1px;}
#NBT_div {
width: 300px;
height: 97px;
overflow: hidden;
}
/* right side style */
#facebook_right {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff; width: 196px;
height: 353px; position: fixed;
right: -200px;
}
#facebook_right img {
position: absolute;
top: -2px;
left: -35px;
}#facebook_right iframe {
border: 0px solid #3c95d9;
overflow: hidden; position: static;
height: 360px;
left: -2px; top: -3px;}#twitter_right {
z-index: 10004;
border: 2px solid #6CC5FF;
background-color: #6CC5FF;
width: 246px;
height: 240px;
position: fixed;
right: -250px;
}#twitter_right_img {
position: absolute;
top: -2px;
left: -35px;
border: 0;
}
#google_plus_right {
z-index: 10003;
background-color: #F2F2F2;
border: 2px solid #006ec9;
border-top: 2px solid #0056a0;
border-bottom: 2px solid #0056a0;
border-right: 2px solid #0056a0;
border-left: 2px solid #0056a0;
width: 290px;
height: 250px; position: fixed;
right: -294px;
}
#google_plus_right_img {
position: absolute; top: -2px;
left: -33px;
border: 0;
}
#NBT_right {
z-index: 10003;
border: 2px solid #303030;
background-color: #fff;
width: 300px;
height: 97px;
position: fixed;}#NBT_right img
{ position: absolute;
top: -2px; left: -101px;
}/* left side style */
#facebook_left {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 250px;
position: fixed;
left: -200px;}#facebook_left img {
position: absolute;
top: -2px;
right: -35px;
}
#facebook_left iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
right: -2px;
top: -3px;}
#twitter_left {
z-index: 10004;
border: 2px solid #6CC5FF;
background-color: #6CC5FF;
width: 246px;
height: 250px;
position: fixed;
left: -250px;
}
#twitter_left_img {
position: absolute;
top: -2px;
right: -35px;
border: 0;
}
#google_plus_left {
z-index: 10003;
background-color: #006ec9;
border: 2px solid #006ec9;
border-top: 2px solid #0056a0;
border-bottom: 2px solid #0056a0;
border-left: 2px solid #0056a0;
border-right: 2px solid #0056a0;
width: 290px;
height: 250px;
position: fixed;
left: -294px;}
#google_plus_left_img {
position: absolute;
top: -2px;
right: -33px;
border: 0;
}
</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script>
<script type="text/javascript">jQuery(document).ready(function ()

{ jQuery("#facebook_right").hover(function ()
{ jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#facebook_right").stop(true, false).animate({ right: -200 }, 500); }); jQuery("#twitter_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#twitter_right").stop(true, false).animate({ right: -250 }, 500); }); jQuery("#google_plus_right").hover(function () { jQuery(this).stop(true, false).animate({ right: 0 }, 500); }, function () { jQuery("#google_plus_right").stop(true, false).animate(
{ right: -294 }, 500); });});</script><br /><div id="on"> <div id="facebook_right" style="top: 12%;">


<div id="facebook_div">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwV7O_Bx438DsVXCzDvkvZ9HSOvEaT86twSZz1mRWCjRfbu86uk7tvUxI6lNzju-Wxi9UoEykznCp80WhllWd_5frC9iKbwpQW39vn4jI5kMlLbuYWWNq3qvXgfce-FFBQ2CIpWGtaXw42/s1600/NBTfacebook_right.png" />
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=ENDEREÇO DE SUA PÁGINA DO FACEBOOK;
width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false"
style="border: none; height: 346px; overflow: hidden; width: 200px;"></iframe>
</div>
</div>
</div>

<div id="on">
<div id="twitter_right" style="top: 28%;">
<div id="twitter_div">
<img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvxXseVpvL-14e9Fox_Q8TBFK0r8k9eZAQ-PL9BDkndJGr5AKeKb1IQbOcMCpCqvIL2ZX99CgP6dj6R54eilNHh1fDt9Gt8BjXIwe-T8H7BxqQmqqL2sXiLqDRsweQaFHQbTUwRjhDxjH7/s1600/NBTtwitter_right.png" />
<script type='text/javascript'>function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='<iframe name="fbfanIFrame_0" frameborder="0" allowtransparency="true" src="http://s.moopz.com/connect.html?user='+screen_name+'" class="FB_SERVER_IFRAME" scrolling="no" style="width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; "></iframe>';}</script>  <div id="twitterfanbox">  <script type="text/javascript">fanbox_init("NICK DE SEU TWITTER");document.write( unescape( '%3C%73%70%61%6E%20%73%74%79%6C%65%3D%22%63%6F%6C%6F%72%3A%20%23%39%39%39%39%39%39%3B%20%66%6F%6E%74%2D%73%69%7A%65%3A%20%78%78%2D%73%6D%61%6C%6C%3B%22%3E%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%6E%65%77%62%6C%6F%67%67%65%72%74%69%70%73%2E%63%6F%6D%2F%32%30%31%33%2F%30%32%2F%61%64%64%2D%73%6D%6F%6F%74%68%2D%6A%71%75%65%72%79%2D%66%6C%6F%61%74%69%6E%67%2D%74%77%69%74%74%65%72%2D%66%61%6E%2E%68%74%6D%6C%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%3E%47%65%74%20%54%68%69%73%3C%2F%61%3E%3C%2F%73%70%61%6E%3E' ) );</script>
</div>

<div id="twitterfanbox">
<script type="text/javascript">fanbox_init("NICK DE SEU TWITTER");</script>
</div>
</div>
</div>


<div id="on">
<div id="google_plus_right" style="top: 45%;">
<div id="google_plus_div">
<img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJPnaUQlUXj5HOko-ZNI_piUuSLt5Nk1FLwVdj0UVFVESbanRZvv6-8mO0LM4HmPvaPDBksAT1R2wOTH_35NHkJUQCUfuOiIojTpLLbFTA1qZANJs2KcxCjdxHkq6SLjPToDmbPbOIKfs/s1600/NBTgoogle_plus_right.png" />
<div style="float: left; margin: 10px 10px 10px 0;"> <a href='http://newbloggertips.com'>
<img alt='Tips Tricks And Tutorials' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdAmfj7VABeObtOD4FGIvARUUUjt-jVW9Fq2bzEC7y4sWwW2KZuYrDUOf5fQbv2Epkw9eyQ96N0jSGvL9uIqeDxJtBv7I86ebHdfIgOMudrqMCeVqvhaJ2a6A4bCXLR756-orPs9YCXO_V/s1600/best+blogger+tips.png'/></a>
<div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/NUMERO DO ID DE SEU GOOGLE PLUS"
data-source="blogger:blog:followers" data-width="270">  </div>  <script type="text/javascript">      
(function() {          window.___gcfg = {'lang': 'en'};          var po = document.createElement('script');          po.type = 'text/javascript';        
po.async = true;          po.src = 'https://apis.google.com/js/plusone.js';          var s = document.getElementsByTagName('script')[0];        
s.parentNode.insertBefore(po, s);        })();      </script>   </div> </div>
</div>
</div>
</div>


19 de mar. de 2013

Botões do Facebook, Google+ e Twitter com efeito no Blogger

11 comentários:

Outro modelo bem bonito de menu social para colocar em seu blog com o Facebook, Twitter e Google Plus para que seus visitantes lhe encontrem não apenas no Blogger.Tem um belo efeito hover o que lhe confere um aspecto elegante.



Vá até Layout


Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias colando os endereços de suas páginas no local assinalado com vermelho.



<!-- Menu social com efeito -->
<style type="text/css">
#buttonbg {width: 260px;margin: 10px 20px;padding: 0;} #buttonbg li {cursor: pointer;
height: 48px;position: relative;list-style-type: none;
}
#buttonbg .icon
{background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW3jIeokmNyUHuz8b80y-wHu8w7uR0BbzCCmWvKL7Y4aHB4ky2dtxPUjC6LuqEy-eqnxJaJc0ujiSL8yWfVz2-73XQ4wiXlQI8q8Ly7la0IIBb_4RUw-8gg52NDIm55-m9bu-ZbqbJSTI/s1600/blsocial12.png') 0 0 no-repeat; background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block; color: #141414;float: none;height: 48px;line-height: 48px; margin: 5px 0;position: relative;text-align: left;text-indent: 90px; text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5; -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out; -o-transition: width .25s ease-in-out, background-color .25s ease-in-out; transition: width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px; box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; text-decoration: none;}
#buttonbg span:hover {visibility: hidden;}
#buttonbg span {display: block;top: 15px;position: absolute;left: 90px;}
#buttonbg .icon {color:
#fafafa;overflow: hidden;}
#buttonbg .fb {background-color: rgba(45,118,185, .42); background-position: 0 -382px;} #buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;}
#buttonbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;} #buttonbg .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}
#buttonbg .linked {background-color: rgba(0, 87, 114, .42); background-position: 0 -574px;} #buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;}
#buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;} #buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;}
#buttonbg li:hover .icon {width: 250px; } #buttonbg li:hover .icon {background-color: #d91e76; }
#buttonbg li:hover .fb {
background-color: #2d76b9;background-position: 0 2px;}
#buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; }
#buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#buttonbg li:hover .pint {background-color: #C00;background-position: 0 -142px; } #buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;}
 #buttonbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;}
#buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; }
#buttonbg li:hover .rss {background-color: #EC5601;background-position: 0 -334px; }
#buttonbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>
<ul id="buttonbg">
<li ><a href="ENDEREÇO DE SEU FACEBOOK" class="icon fb">Facebook >>></a><span>Encontre-me no Facebook</span></li>
<li ><a href="ENDEREÇO DE SEU TWITTER" class="icon twit" >Twitter >>></a><span>Siga-me no Twitter</span></li>
<li ><a href="ENDEREÇO DE SEU GOOGLE PLUS" class="icon google" >Google+ >>></a><span>Adiciona-me no Google+</span></li>
</ul>


Widget com suas páginas sociais

Um comentário:


Você a essa altura já sabe da importância para a indexação de seu blog pelas suas páginas sociais. Eis então mais um widget com seus principais endereços sociais. Fácil de instalar e com um design bem moderno.


Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011









Agora procure por: ]]></b:skin>  



Acima dele, cole o código abaixo:

ul#m-soc2{   
margin: 18px 0 0 10px;padding: 0;width: 220px;height:50px;} 
ul#m-soc2 li{ 
list-style: none;margin: 7px;padding: 0;float:left;border: none;} 
ul#m-soc2 li a{ 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxrvJHCu3mhjQToI26suRuwMwh1NYSPHNTHKVjkxTDsOFbRMfhEQrxakX1tkG-2kwcYltfLtdC0wkWJax5XWmB2GotNkWVbk2RIk2tyOQRvOO9bm9ggEEw7T_lcbioYJYO2mcolaD0ccnh/s132/sosyal-butonlar.png) no-repeat 0 0; 
margin:0;padding:0;display: block;position:relative; 
width: 33px; 
height: 33px; 
overflow: visible; 

ul#m-soc2 li a.twitter{ 
background-position: 0 0; 

ul#m-soc2 li a.facebook{ 
background-position: -33px 0; 

ul#m-soc2 li a.google{ 
background-position: -66px 0; 

ul#m-soc2 li a.rss{ 
background-position: -99px 0; 

ul#m-soc2 li a.twitter:hover{ 
background-position: 0 -33px; 

ul#m-soc2 li a.facebook:hover{ 
background-position: -33px -33px; 

ul#m-soc2 li a.google:hover { 
background-position:-66px -33px; 

ul#m-soc2 li a.rss:hover{ 
background-position:-99px -33px; 

ul#m-soc2 li a span{ 
background: #555;position:absolute; 
top:-10px;left:-10px;width:auto;height:auto;opacity:0; 
padding:3px;text-align:left; 
color:#fff;filter:alpha(opacity=0); 
white-space:nowrap;border-radius:3px;font-size:12px; 
-webkit-transition: all 0.25s ease-in-out; 
-moz-transition: all 0.25s ease-in-out; 
-o-transition: all 0.25s ease-in-out; 
-ms-transition: all 0.25s ease-in-out; 
transition: all 0.25s ease-in-out;} ul#m-soc2 li a:hover{text-decoration:none} 
ul#m-soc2 li a:hover span{ 
opacity:.7; 
filter:alpha(opacity=70); 
top:-23px}





Salve.

 Agora clique em Layout


Clique em Adicionar um Gadget




Ao abrir, clique em  HTML/Javascript




Cole então o próximo código fazendo as modificações necessárias.



<ul id="m-soc2">

<li><a class="twitter" href="ENDEREÇO DO TWITTER">
<span>Twitter</span></a></li>

<li><a class="facebook" href="ENDEREÇO DO SEU FACEBOOK">
<span>Facebook</span></a></li>

<li><a class="google" href="ENDEREÇO DO SEU GOOGLE PLUS">
<span>Google+</span></a></li>

<li><a class="rss" href="ENDEREÇO DO FEED DE SEU BLOG">
<span>RSS</span></a></li>

</ul>


Créditos: Eklentilery

Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube