Pure CSS & HTML Based Social Share Widget

Hundreds of social bookmarking plugins / widgets available on the Internet. So you may ask, why do we need another. Ok, let me tell you why we made MintShare in a simple way. Mint Share is one of the few CSS and HTML based widget. At our Bloggermint lab, we spend good time to come up with this widget. Made based on CSS & HTML without using any Javascripts,  these buttons are really fast-loading and small in size. Thanks to Paul Robert Lloyd for the beautiful social media icons.

We’ve used some CSS3 effects such as border-radius, box-shadow and transition. These CSS3 effects are only visible in Mozilla Firefox, Google Chrome, Safari and other CSS3 supporting browsers except IEs and the transition/animation effect is only visible in Webkit browsers.

View Live demo

For Blogger

1. Sign into Blogger > Design > Edit HTML. Check or tick [/] the ‘Expand Widget Templates‘ at top right corner of editor.

2.  Click on any of the ‘CSS‘ link below to get the CSS code of the button that you wish to use. Copy the CSS code and paste it just before </b:skin> closing tag in your Blogger Template.

CSS

#mintshare_fl { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKRB_hr6LYfH-H67SrZWxC32yfvg1zQDjZDpDsw9sxo6NPACFRTQ-LGkzWIrI2QYDw4S9tpTXsn-Oiais3BQIhGQ-DY6QjbrqgSHMXHT2cwp82O4kp7X3NM3Qj72nIhLn77YIardYxDeF7/s1600/btn-grey-hori.gif") repeat-y scroll 0 0 #EAEAEA; border: 1px solid #888; float: left; height: 100px; padding: 5px 0; position:fixed; left:0; z-index:1001; width: 35px; -moz-border-radius:0 5px 5px 0; -webkit-border-radius:0 5px 5px 0; -o-border-radius:0 5px 5px 0; border-radius:0 5px 5px 0; top:100px; } #mintshare_fl a.sharetext { display: block; float: left; line-height: 30px; text-decoration: none; cursor:pointer; } #mintshare_fl a.sharetext img { border: 0 none; display: block; margin-left: 10px; } #mintshare_fl .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_fl .flyout ul { background:#FFF; list-style:none; position:absolute; left:-570px; top:-5px; width:440px; height:85px; border:1px solid #888; border-left:0; padding-right:10px; z-index: 500; padding-left: 5px; overflow: hidden; 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 5px 5px 0; -icab-border-radius: 0 5px 5px 0; -khtml-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; -o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -icab-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -khtml-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); } #mintshare_fl:hover .flyout ul{ left:-4px; } #mintshare_fl .flyout ul li { float: left; } #mintshare_fl .flyout ul li a{ } #mintshare_fl .flyout ul a img { } #mintshare_fl .flyout ul li.drop-li {position:relative; width:65px; height:65px; float:left; z-index:100; margin-top: 3px;} #mintshare_fl .flyout ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;} #mintshare_fl .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);margin-left:20px; 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_fl .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_fl .flyout ul li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);} #mintshare_fl .flyout ul li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);} /* For IE6 */ #mintshare_fl .flyout ul li.drop-li a:hover img {filter: alpha(opacity=50);} #mintshare_fl .flyout ul li.drop-li a:hover b {filter: alpha(opacity=100);} /* Get MintShare */ #mintshare_fl .get_mintshare a img { border:none; margin-left: 35px; margin-top: 7px; }

3.  Copy the HTML code of the button you wish to use by clicking on the ‘HTML‘ link placed next to ‘CSS’ link.

4.  Now, search for <data:post.body/> using CTRL+F. Paste that HTML code immediately after <data:post.body/> tag

HTML

<!-- MintShare Classic Float Left www.rnhckr.com --> <div id='mintshare_fl'> <a class='sharetext'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU1_nTkVF8v8y-nTmgV_1e_A83RamrKvmQCw1XMO7QvC9eep-3fNu6MC-Vf9QvYzvUkhUz8Y1I5FO1jh9sfGVEOQPKniNSwt6gHTGilPupcdhnQd4R_vmhnDj9C_ME1Y6O3mmaTx4tINck/s1600/share_text.jpg'/><!--[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 expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvmGQldghXJZ4V3oxq-U7SJeHzPmuOmaQrNZ7B_gZQgsUBom4HnK1lYDAdQ1KC9kq3oDPt4f5DMG5Qo2l9JvAQxX-rJdmrZTIzz0BNtqY7klvfLTHgUHP2pqV1CVCRHYzuN9Oei_hfCuKD/s1600/facebook.png"/><b>Share on FB</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li> <li class="drop-li"><a expr:href=""http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHfZrP0sGPd8ecj_HooPeLqlGCMn6JZzkwXVcKLP-brZhRPzLynPgSkUY_L5p8dvhU-lNwzmZGH6dXOpeYPMiadEk2emHLB1Fd51FADd77I9DBkQdiQB_wIsbOP-FpRYTyyRM-jogGQqNA/s1600/twitter.png"/><b>Tweet This</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li> <li class="drop-li"><a expr:href=""http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOm09XQb2z9uHJ-ajd2klGBXJc3ra-I5O8L8g3apfX_7-1OK6jnEi003Rv1Z_9JD_FcllZvIqwnZp06KTl0ZbNvObxcHqTyHhlv5MdOAxcMi7NfcBL-_MBGRDZaydrY87qs0XYIRCmtgJT/s1600/stumbleupon.png"/><b>Stumble It</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li> <li class="drop-li"><a expr:href=""http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCAqKznweFca5ssIXRePjDJUaESesqgl8HSr_z4vsMOj_toHLqg8PUVO9n3LSnHScIxiAPkCZzHCn2Sjincch0vOZVKPkMsFzyiedr_-l-FUbsAT2caLDD3wxxrIGOkyttwMl4m3cDrglA/s1600/digg.png"/><b>Digg This</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li> <li class="drop-li"><a expr:href=""http://www.technorati.com/faves?add=" + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE7h0y3yP_E3w-7PicsyxZdAS0kPWYJbUiGyuED9dKXtaZQ06eRHeFxw7MBQDyLXE3JKCe-m-yaKVbJOZHeawVhtiH4zRHH5oNL95l1_G5gv1IfmAcpvX19CpdCJhyphenhyphenprgOag37dkFRTigT/s1600/technorati.png"/><b>Technorati</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li> <li class="drop-li"><a expr:href=""http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0EJEohfd9E2Zk1bSvrpg3KeGvtdFMMur1-auGZvRV19XBXMxQlm4zy35mDzI68OIIJBqpGlhCa6miU8ZUOoaqHZd3FO23HjGTbghcfEYAFIbNxd4ve_rbn0wJR8ll_UcBki3EROsj34eY/s1600/delicious.png"/><b>Delicious</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li> <span class="get_mintshare"><a href="http://www.bloggermint.com/2011/01/mintshare-social-bookmarking -sharing-button-widget/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaIk1G6YKqbxu_9KqhHgLKyXsASJ2IgJu8pEqS5j35fnuLS5Q3ml1AsnrcyWjtxyluBuhBQhkpcJTQv9-YtPvSXyvZwAWCtOGYeBJrCJfq4CNHXbgjNzG1DlJBMxm4Jg35JMlmkyDtI3Y4/s1600/getmintshare.png"/></a></span> </ul> </div> </div> <!-- MintShare Classic Float Left End www.rnhckr.com -->

Now Save