MintShare – Pure CSS & HTML Based Social Share Widget

Existem centenas de plugins de social bookmarking (widget para compartilhar em redes sociais) espalhados pela internet. Então surge a pergunta: "Porque mais um?".

Mas vou mostrar para vocês um widget muito legal que encontrei no site BloggerMint, um blog, em inglês, muito interessante sobre web design e desenvolvimento. Dando uma olhada em seus tutoriais, encontrei esse plugin que é muito fácil de implementar tanto no Blogger, Wordpress  ou mesmo em um site pessoal HTML.

Desenvolvido com base em CSS e HTML sem usar qualquer Javascripts, estes botões são realmente rápidos em seu carregamento e pequeno em tamanho.
Efeitos de CSS3 como border-radius e box-shadow foram usados na criação desse widget e também os ícones das redes sociais...

Como instalar

Para o Blogger

1. Entrar no Blogger> Design> Editar HTML.Marque a opção "Expandir modelos de widgets" no canto superior direito do editor.

2. Clique no link "CSS" abaixo para obter o código CSS do botão que você deseja usar. Copie o código CSS e cole pouco antes da tag </ b: skin>  de fechamento no seu Template Blogger.

Segue o código CSS do widget:

/* ================================================================ 
This copyright notice must be untouched at all times.

* MintShare button comes under a Creative Commons license. Get MintShare 
button from ( http://www.bloggermint.com/2011/01/mintshare-social-bookmarking
-sharing-button-widget ).
* Copyright (c) 2009-2011 Bloggermint. All rights reserved.
Please you must keep the credit links intact which provides 
credit to its author.
=================================================================== */

#mintshare_mini, #mintshare_mini ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url("http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfjG3P4w7I/AAAAAAAAB3k/yjkmCOax0yc/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
}

#mintshare_mini {width:100px; height:30px; border:1px solid #888; padding: 0 15px;
-o-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

#mintshare_mini a.sharetext {
display:block; width:100px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; font-size:13px; font-weight:bold;
background: url("http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfjIshr9pI/AAAAAAAAB3w/UnosHLVx3co/s1600/plus.png") no-repeat scroll 0 center transparent;
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:url("http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfjG3P4w7I/AAAAAAAAB3k/yjkmCOax0yc/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
list-style:none;
position:absolute; 
left:-1000px; 
top:-27px; 
width:365px; 
height:30px; 
border:1px solid #888; 
border-left:0; 
padding-right:10px;
z-index: 500;
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;
-o-border-radius: 0 15px 15px 0;
-icab-border-radius: 0 15px 15px 0;
-khtml-border-radius: 0 15px 15px 0;
-moz-border-radius: 0 15px 15px 0;
-webkit-border-radius: 0 15px 15px 0;
border-radius: 0 15px 15px 0;
}

#mintshare_mini:hover .flyout ul{
left:50px;
}

#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;}
#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 > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}


/* For IE6 */

#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);}

/* Get MintShare */

#mintshare_mini .get_mintshare {
    font-size: 10px;
    margin-left: 5px;
    position: relative;
    top: 2px;
}

Existem vários modelos desse plugin, aqui vou mostrar o MintShare Mini:

3. Copie o código HTML do botão que você deseja usar clicando em um dos links HTML abaixo.

<! - Mini MintShare ->
<div id='mintshare_mini'>
<a class='sharetext'> <b> Share This </ b ><!--[ if gte IE 7 ]><!--></ um ><!--<![ endif] ->

<!--[ If lte IE 6]> <table> <tr> <td> <[endif] ->
<div class='flyout'>
<ul class='icons'>
<li class="drop-li"> <a expr: href = "" http://www.facebook.com/sharer.php?u = "+ data: post.url +" title = & "+ data: post.title" class = "gota-a"> <img alt = "" gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://twitter.com/share?url = "+ data: post.url +" & title = "+ dados : post.title "class =" gota-a "> <img alt =" " gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://www.stumbleupon.com/refer.php?url = "+ data: post.url +" title = & "+ data: post.title" class = "gota-a"> <img alt = "" gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://digg.com/submit?phase=2&url = "+ data: post.url +" title = & "+ data: post.title" class = "gota-a"> <img alt = "" gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr:href=""http://www.technorati.com/faves?add=" + data:post.url" class="drop-a"> <img alt = "" gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://reddit.com/submit?url = "+ data: post.url +" & title = "+ dados : post.title "class =" gota-a "> <img alt =" " gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://myweb2.search.yahoo.com/myresults/bookmarklet?t = "+ data: post.url +" & title = "+ data: post.title" class = "gota-a"> <img alt = "" gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>
<li class="drop-li"> <a expr: href = "" http://delicious.com/post?url = "+ data: post.url +" & title = "+ dados : post.title "class =" gota-a "> <img alt =" " gte IE 7 ]><!--></ um ><!--<![ endif ]--></ li>

<span class="get_mintshare"> <http://www.bloggermint.com/2011/01/mintshare-social-bookmarking a href = "
-Compartilhamento de botão widget / "> Get MintShare! </ A> </ span>

</ Ul>
</ Div>
</ Div>
<! - End Mini MintShare ->

4. Agora, procure <data:post.body/> usando CTRL + F. Cole o código HTML imediatamente após a tag <data:post.body/> e clique em "Salvar".

Para outros modelos desse widget, visite o site oficial aqui.

Muito legal não é??
Eu usarei esse widget em meu próximo blog!! Aguardem...

Abraços

@junim_ramos