 |
| Screenshot Widget MintShare Sosial Share Button Layout Versi 1 |
1. Login account blogger kamu
2. Masuk rancangan lalu pilih edit HTML
3. Jangan lupa centang expland template
4. Kemudian itu cari kode berikut
]]></b:skin>
5. Setelah ketemu kode
]]></b:skin>, lalu sisipkan kode
CSS dibawah ini tepat di atas kode
]]></b:skin>
/* ================================================================
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgykXMCU9wEXfCDmvr0vaRlD5UWYp1jIVc_agV2se5kLZOtYvRYuGTExWBDcaodCW8Wqf42LyE74AWD9thuBnUpL3afpb_hi32pYVLl6TBd_KrOLR0JKlXUcRQ91iRVF2jnGD6CQNcnzRFm/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsxVoRDgY87isYMZ5BABKYvwDi06P1yZieqKE40ZuujOMwlRY9YakoMpBM0y2k4qPf6njAEaY1tx_Vt13RkiCbfxRupd3YPL79Dc_2YiZmALI00XJdbzAtWXw0wBdr0V4fxmtOTehhJUzm/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgykXMCU9wEXfCDmvr0vaRlD5UWYp1jIVc_agV2se5kLZOtYvRYuGTExWBDcaodCW8Wqf42LyE74AWD9thuBnUpL3afpb_hi32pYVLl6TBd_KrOLR0JKlXUcRQ91iRVF2jnGD6CQNcnzRFm/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;
}
6. langkah berikutnya Cari Kode
<data:post.body/>, lalu letakkan kode dibawah ini tepat dibawah kode yang kita cari tadi
<data:post.body/>
<!-- MintShare Mini -->
<div id='mintshare_mini'>
<a class='sharetext'><b>Share This</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 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/AVvXsEhoxD6ZJvRnDE_aNKJSZ1ROaZvDaGraya7NFytrklPS8mMtfb15pdD5W3B7p5oRCGLQ9zfJITigs8Lnw2lS_HkkDP-h71lcITnuMqZeEpCk2dqCTnDqDb7lgQRM2wLrV3r45odBxP4yfmLv/s1600/facebook_small.png"/><!--[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/AVvXsEjALVb2gEP8vdOdFPqdhmEVI9PwTSMSinEx4cFW9042bNkcc2glYFhyphenhyphenEsQU9Y_40jGSUgTBiDBctTiAzzMJIxwfLewgpxPzomqP7b5l1SrcfJDN6-mm6S-pYOy7hUNn7BWlcxHKcNfFgaBm/s1600/twitter_small.png"/><!--[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/AVvXsEjHN_QpTpXXWsKY8zBgAwnpqufpg38__rDEW3SZx8-A7DnYMIW6tBs1Zd0sOg0vrlL-ybTnV1elr3RXPfbORPCRtRLbhyphenhyphenSe7_wEBe5T_mUAm-YDi-3KbgIrUifGf_v8p2qb1o3TVUCgmk3u/s1600/stumbleupon_small.png"/><!--[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/AVvXsEhJnNLJkSO_-4-ObGzi37AwZC5poXcpvJ6VwMH8CmYVE0vCAfdKxcMeHbkSTNNKpE2Y154UQmlINyUtmL0TuyZrHZ954LH9xLhwv5GJyXkOsFatIY2hU-gI6PEKm7Cj9ptPwFwHUu_QXyKL/s1600/digg_small.png"/><!--[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/AVvXsEgxAk17pydB7kN2NBAjXjIJ0STGKZvI-18-zx5LM7Gey57oto-5nNWR7mqgNGz1KGtfPsPbpNb2jcxWfw7j_X-Pos8NMs_N6jkxYQzn_Ho4-kKyaErZMcWoGuEjvmX5uRefedzlUD5vPTEX/s1600/technorati_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href=""http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6KOrnhoKwGXjEaOiRgMZX3Fwok0w_uadHcHNcZFAw5WT3_NbLHsNvoH_bf2nyGV2QZ1AtR_GCP5AgTGZIpYBY3i0yz11TAx0cH1Rbo6Qz_5tyvA5vjcXOVU4BRWDq1sb7vUcnUcx79xFE/s1600/reddit_small.png"/><!--[if gte IE 7]><!--></a><!--<![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="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbcrI75VsWZtJy6x3fYEAulUqzCnM4Va9qPr1v32XbCMnqfZcthdDVOOmMVpUOLNybctnaCSPSHrumH4P0IuPrcXE1D0ICIlFrujrYS16BiN6_hr0OY1r78rgSsqnxsYdOPEJXQvlVdKwx/s1600/yahoo_small.png"/><!--[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/AVvXsEgxK7fP8-pKcO7of_FNDQws6qf_KBbOi5P5myzXYNjjm-WRtqKeN3loR1H1iSq1Kh07y9RTI-XNmoyvl2Mfq334X3ZjBWtGFivuJ1LsguHeFaER8SciYklsgw2Ld_3iWESIzQNYaIiQzHkq/s1600/delicious_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<span class="get_mintshare"><a href="http://malvinshare.blogspot.com/2012/03/cara-membuat-widget-mintshare-sosial.html">Get MintShare!</a></span>
</ul>
</div>
</div>
<!-- MintShare Mini End-->
- Tutorial atau Cara Membuat Widget MintShare Sosial Share Button Layout Versi 2
 |
| Screenshot Widget MintShare Sosial Share Button Layout Versi 2 |
Untuk Tutorial pada versi 2 ini sama saja dengan versi 1, hanya kode
CSS dan HTMLnya saja yang berbeda, berikut kode
CSS dan HTMLnya
a. CSS
/* ================================================================
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_c, #mintshare_c ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgykXMCU9wEXfCDmvr0vaRlD5UWYp1jIVc_agV2se5kLZOtYvRYuGTExWBDcaodCW8Wqf42LyE74AWD9thuBnUpL3afpb_hi32pYVLl6TBd_KrOLR0JKlXUcRQ91iRVF2jnGD6CQNcnzRFm/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
}
#mintshare_c {width:100px; height:30px; border:1px solid #888; position:relative; z-index:100; padding: 0 15px;
-o-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
#mintshare_c div.mintshare-wrap {width:100px; height:30px; float:left; position:relative;}
#mintshare_c div.mintshare-wrap a.top-a {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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsxVoRDgY87isYMZ5BABKYvwDi06P1yZieqKE40ZuujOMwlRY9YakoMpBM0y2k4qPf6njAEaY1tx_Vt13RkiCbfxRupd3YPL79Dc_2YiZmALI00XJdbzAtWXw0wBdr0V4fxmtOTehhJUzm/s1600/plus.png") no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}
#mintshare_c div.mintshare-wrap div.flyout {height:0; overflow:hidden; left:-1px; top:30px; width:110px; position:absolute; z-index:500;
transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-webkit-transition: height 1s ease-in-out;
}
#mintshare_c div.mintshare-wrap div.flyout ul.icons {background:#FFF; position:absolute; left:0; top:-500px; border:1px solid #888; border-top:0; padding-bottom:10px;padding-top:10px;
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 0 5px 5px;
-icab-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-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_c div.mintshare-wrap div.flyout ul.icons li.drop-li {position:relative; width:40px; height:45px; float:left; z-index:100; margin-left:6px;}
#mintshare_c div.mintshare-wrap div.flyout ul.icons li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}
#mintshare_c div.mintshare-wrap div.flyout ul.icons li.drop-li a.drop-a img {padding:0; background:none; display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);margin-right:5px;
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_c div.mintshare-wrap div.flyout ul.icons li.drop-li a b {display:block; width:100px; height:60px; padding-top:20px; 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;
}
#mintshare_c div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_c div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}
#mintshare_c div.mintshare-wrap:hover div.flyout {height:522px;}
#mintshare_c div.mintshare-wrap:hover div.flyout:hover {height:522px;}
#mintshare_c div.mintshare-wrap:hover div.flyout ul.icons {top:1px;}
/* for IE6 */
#mintshare_c div.mintshare-wrap a:hover {direction:ltr;}
#mintshare_c div.mintshare-wrap a:hover div.flyout {height:522px;}
#mintshare_c div.mintshare-wrap a:hover div.flyout ul.icons {top:0;}
#mintshare_c div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_c div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover b {filter: alpha(opacity=100);}
#mintshare_c table {border-collapse:collapse; position:absolute; left:0; top:0; width:0; height:0; margin-bottom:-1px;}
/* Misc */
#mintshare_c .get_mintshare {
font-size:10px;
margin-left:3px;
}
b. HTML
<!-- MintShare Compact -->
<div id="mintshare_c">
<div class="mintshare-wrap"><a class="top-a">Share This<!--[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/AVvXsEiWOWXM3Ph7xOPiKuvbLpXl5vYreY3xoJyPKW4YCunK_WCzkjvVVDjQ9uskIVDxxn1DuzUCKskHnO5Pf9eImVu8QnYS28r93Iiaqzk8vAbUwaIOgeVFcEXD-3ssbwoFRf7vPD4UpykIH_CO/s1600/facebook_mini.png"/><!--[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/AVvXsEg83H9yTLZ360POw-X84O75TA6jRTJywdmRmoXolLQ9A69p3QIghmvm7XA6lab8Ul9mJ9gNNHXlSvIh0XGW0osu51vcP97xRX03Tq2HlUvf3RsjRHzQ49H_bn_IAMN9Gb0JdZ_ZIq9gyLdO/s1600/twitter_mini.png"/><!--[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/AVvXsEgYLuuxUD5S7TSoeAQr4DxqGUb75PBNVPyrNhYCOn3Ck50galDRnLbfvHDxx91KCl2AMvykco2M6dSrrqHHJYmGlDylJyyYiB7-WisKeX6Q9IbPGJiLqt1oBVtDMJ9Rogcj-KpLUp61xJfA/s1600/delicious_mini.png"/><!--[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/AVvXsEgflDTRcj6qihIy_Y6yrfoASFPTT7FTeSeJqm7UxClsNEO8M3P2pO6L7UXQDZpna2DbSJgGMvrYgdspieM6-cWoD2Rhn6hIJKNqAq6tLfWSjXHwwSJqbG2oHu7qgVuOfYQKAgIwD5C3hhyc/s1600/stumbleupon_mini.png"/><!--[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/AVvXsEhvp2OUuBfYGelPbzU_q3jUEmbVroOSs9_IqhY3QLs8TmM5u6iL82Z3lGo47LDG1zpuY-Nk-rGLgiQ81Mg_HS6dioCt60vq0pgFJgagc2vtg28Fcos5SpRdz40gpUcDwGjSRqw3-8ZyMReS/s1600/digg_mini.png"/><!--[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/AVvXsEgfK5cuv4rW8kv1qqZGzx8qdeG0NFLmKlekulx5EZhlYclzPg_Uq-DOJcF0zgQycSjZM7WH5asAX0PZuC3Rqob9O-PvjHfR8qcPrSbzZyDtaVtm3oWAT60fyMKodRN0o-70JaVnA4D1bWLY/s1600/technorati_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href=""http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIA5G8OnoMIYS-U-bRSLFVIoLGKVstqsPBxb2sWZsXOKBAK9cSm9WyuWoepEO8BBn4Y-tYyhLGi0U2nBbIYSSTCiE7m1EIm4eJpgFErZG_48ocq1jaUBTihumW8REXCjEuA1TRIfKDLHCl/s1600/reddit_mini.png"/><!--[if gte IE 7]><!--></a><!--<![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="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSyFG4gWOj8ETG6zT-allhDKIYhsiITbWIwsu2qB2pGekuFync3AROSpsovN-5ov1stbC54cd5K2XcSteWg8XHuiTGXGCtgM3eRjOoOWagTwaov4A7rOVFLS4bRHNRUTExmoV_vgrYREu2/s1600/yahoo_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<span class="get_mintshare"><a href="http://malvinshare.blogspot.com/2012/03/cara-membuat-widget-mintshare-sosial.html">Get MintShare Now</a></span>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
</div>
<!-- MintShare Compact End-->
- Tutorial atau Cara Membuat Widget MintShare Sosial Share Button Layout Versi 3, 4 dan 5
Untuk toturial Versi 3, 4 dan 5 saya gabung karena langkah-langkahnya sama. seperti tutorial versi 2 hanya kode CSS dan HTMLnya saja yang berbeda. disamping itu untuk Tutorial atau Cara Membuat Widget MintShare Sosial Share Button Layout Versi 3, 4 dan 5 ini, langkah-langkah awalnya sama seperti Tutorial atau Cara Membuat Widget MintShare Sosial Share Button Layout Versi 1, dari langkah nomor 1 sampai 5. untuk langkah berikutnya yaitu penempatan kode HTML, pertama-pertama simpan template kamu yang sudah disisipkan kode CSS, lalu pergi ke Rancangan, kemudian Pilih tambah gadget, terakhir masukkan Kode HTMLnya, Pilih simpan, Selesai.
- Kode CSS untuk Widget MintShare Sosial Share Button Layout Versi 3
 |
| Screenshot Widget MintShare Sosial Share Button Layout Versi 3 |
/* ================================================================
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_fl {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy9Gjc-zoWIetA_PxZdyBEX5qEPNpNrejMgf_P3MahXFKlP1qp0ApCayGIxc9m3fkHpMisKjwEYEyYgmUaM0aObJZxy5uuuqN73PIR3lJgGb8F8yRjIXLZdNEQR2qg1FVAdY2uESWhGwmZ/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;
}
- Kode HTML untuk Widget MintShare Sosial Share Button Layout Versi 3
<!-- MintShare Classic Float Top -->
<div id="mintshare_ft">
<div class="mintshare-wrap"><a class="top-a">Share This<!--[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/AVvXsEiki66T77CZ52zVJqe7rMCIRFY3JCvLABYpTddwyB77oq6ef5MwHjkolkMQ1NHRZ8wZD-ASJ_JGuau5v8HkquPhClOTrRxp70zoIeXV-HK4oG_HPn-dHX8EU5Rax3MYK3mF4EXucnr9WcLJ/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/AVvXsEi6i5a3XxkxcPevC9AOt0X3qCiu6Mw5ZhcWbw30-6wMypIsXPGDx1LUW_Bl7phQaP4X4mqTnaSNnOsJ3Hpded7GDrCh0wlQVYvJ_GwbYb70IC6AknvvN0zs2MKr-TQ5BLcsDfxvT4MkYRCf/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/AVvXsEgZQV1l4BS8dZAasde0GxGxFGwdPh_9COj0ow-VN57A4uFQPuqbr_rlo33Di_bT-9y_6a2956cYlknqlexDdbHoyozhDDl3W5xT61LO2zODki9XnHe947jB2fNjsp1RNfvkAeH5-P9wYRpb/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/AVvXsEjpQVWLtiC5hcWv0O2CXUoDIB-cPlVmoSU9aMIwtWkZFCK22hyphenhyphenAdXbvfVIpJGn2vBVrIrQ98OO6IGRyFcPqUj02OkEzEeDrbWk4iNolneW6SHUC5kfy0HvosNy3x2an2PdA2me_BRZgaHa_/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/AVvXsEgvBi0unMjvSlO-Y8Y86NHWzYu4feNtoSNlkiFAmLAKB-pupQ8vnGdYhkii5X2sE-KRwzj9lmW3lI0MCkOmryqmxQztZNMgz6TBs3LoDrLqHUWBBcFG7PCql3FTCOmvtlEkNBmpT4ueuzFl/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/AVvXsEh2-GBt7Bc8VhJAnLA1WskQv0wabYFMvIu3b9ifEM4PDbsljjq7_IMfFVFA9WKI8Bl2YrM7pMcXfAngAXEq9ymFGzX9Ef_yL1toSqoRzQPKgoB7STaJyJTZeyegPEtYQvU5v8VpBY8VeWzh/s1600/delicious.png"/><b>Delicious</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<span class="get_mintshare"><a href="http://malvinshare.blogspot.com/2012/03/cara-membuat-widget-mintshare-sosial.html">Get MintShare Now</a></span>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
</div>
<!-- MintShare Classic Float Top End -->
- Kode CSS untuk Widget MintShare Sosial Share Button Layout Versi 4
 |
| Screenshot Widget MintShare Sosial Share Button Layout Versi 4 |
/* ================================================================
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 footer links intact which provides
credit to its author.
=================================================================== */
#mintshare_ft, #mintshare_ft ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgykXMCU9wEXfCDmvr0vaRlD5UWYp1jIVc_agV2se5kLZOtYvRYuGTExWBDcaodCW8Wqf42LyE74AWD9thuBnUpL3afpb_hi32pYVLl6TBd_KrOLR0JKlXUcRQ91iRVF2jnGD6CQNcnzRFm/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
}
#mintshare_ft {width:100px; height:30px; border:1px solid #888; position:fixed; z-index:1001; top:0; margin-left:70px;padding: 0 5px;
-o-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
#mintshare_ft div.mintshare-wrap {width:100px; height:30px; float:left; position:relative;}
#mintshare_ft div.mintshare-wrap a.top-a {margin-left: 5px;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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsxVoRDgY87isYMZ5BABKYvwDi06P1yZieqKE40ZuujOMwlRY9YakoMpBM0y2k4qPf6njAEaY1tx_Vt13RkiCbfxRupd3YPL79Dc_2YiZmALI00XJdbzAtWXw0wBdr0V4fxmtOTehhJUzm/s1600/plus.png") no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}
#mintshare_ft div.mintshare-wrap div.flyout {height:0; overflow:hidden; left:-1px; top:30px; width:110px; position:absolute; z-index:500;
transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-webkit-transition: height 1s ease-in-out;
}
#mintshare_ft div.mintshare-wrap div.flyout ul.icons {background:#FFF; position:absolute; left:0; top:-500px; border:1px solid #888; border-top:0; padding-bottom:10px;padding-top: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 0 5px 5px;
-icab-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-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_ft div.mintshare-wrap div.flyout ul.icons li.drop-li {position:relative; width:100px; height:65px; float:left; z-index:100;}
#mintshare_ft div.mintshare-wrap div.flyout ul.icons li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}
#mintshare_ft div.mintshare-wrap div.flyout ul.icons 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_ft div.mintshare-wrap div.flyout ul.icons li.drop-li a b {display:block; width:100px; padding-top:20px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
text-shadow:0 1px #FFF;
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_ft div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_ft div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}
#mintshare_ft div.mintshare-wrap:hover div.flyout {height:522px;}
#mintshare_ft div.mintshare-wrap:hover div.flyout:hover {height:522px;}
#mintshare_ft div.mintshare-wrap:hover div.flyout ul.icons {top:1px;}
/* for IE6 */
#mintshare_ft div.mintshare-wrap a:hover {direction:ltr;}
#mintshare_ft div.mintshare-wrap a:hover div.flyout {height:522px;}
#mintshare_ft div.mintshare-wrap a:hover div.flyout ul.icons {top:0;}
#mintshare_ft div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_ft div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover b {filter: alpha(opacity=100);}
#mintshare_ft table {border-collapse:collapse; position:absolute; left:0; top:0; width:0; height:0; margin-bottom:-1px;}
/* Misc */
#mintshare_ft .get_mintshare {
font-size:10px;
margin-left:3px; }
- Kode HTML untuk Widget MintShare Sosial Share Button Layout Versi 4
<!-- MintShare Classic Float Top -->
<div id="mintshare_ft">
<div class="mintshare-wrap"><a class="top-a">Share This<!--[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/AVvXsEiki66T77CZ52zVJqe7rMCIRFY3JCvLABYpTddwyB77oq6ef5MwHjkolkMQ1NHRZ8wZD-ASJ_JGuau5v8HkquPhClOTrRxp70zoIeXV-HK4oG_HPn-dHX8EU5Rax3MYK3mF4EXucnr9WcLJ/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/AVvXsEi6i5a3XxkxcPevC9AOt0X3qCiu6Mw5ZhcWbw30-6wMypIsXPGDx1LUW_Bl7phQaP4X4mqTnaSNnOsJ3Hpded7GDrCh0wlQVYvJ_GwbYb70IC6AknvvN0zs2MKr-TQ5BLcsDfxvT4MkYRCf/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/AVvXsEgZQV1l4BS8dZAasde0GxGxFGwdPh_9COj0ow-VN57A4uFQPuqbr_rlo33Di_bT-9y_6a2956cYlknqlexDdbHoyozhDDl3W5xT61LO2zODki9XnHe947jB2fNjsp1RNfvkAeH5-P9wYRpb/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/AVvXsEjpQVWLtiC5hcWv0O2CXUoDIB-cPlVmoSU9aMIwtWkZFCK22hyphenhyphenAdXbvfVIpJGn2vBVrIrQ98OO6IGRyFcPqUj02OkEzEeDrbWk4iNolneW6SHUC5kfy0HvosNy3x2an2PdA2me_BRZgaHa_/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/AVvXsEgvBi0unMjvSlO-Y8Y86NHWzYu4feNtoSNlkiFAmLAKB-pupQ8vnGdYhkii5X2sE-KRwzj9lmW3lI0MCkOmryqmxQztZNMgz6TBs3LoDrLqHUWBBcFG7PCql3FTCOmvtlEkNBmpT4ueuzFl/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/AVvXsEh2-GBt7Bc8VhJAnLA1WskQv0wabYFMvIu3b9ifEM4PDbsljjq7_IMfFVFA9WKI8Bl2YrM7pMcXfAngAXEq9ymFGzX9Ef_yL1toSqoRzQPKgoB7STaJyJTZeyegPEtYQvU5v8VpBY8VeWzh/s1600/delicious.png"/><b>Delicious</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<span class="get_mintshare"><a href="http://malvinshare.blogspot.com/2012/03/cara-membuat-widget-mintshare-sosial.html">Get MintShare Now</a></span>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>
</div>
<!-- MintShare Classic Float Top End -->
- Kode CSS untuk Widget MintShare Sosial Share Button Layout Versi 5
 |
| Screenshot Widget MintShare Sosial Share Button Layout Versi 5 |
/* ================================================================
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_ft_c, #mintshare_ft_c ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgykXMCU9wEXfCDmvr0vaRlD5UWYp1jIVc_agV2se5kLZOtYvRYuGTExWBDcaodCW8Wqf42LyE74AWD9thuBnUpL3afpb_hi32pYVLl6TBd_KrOLR0JKlXUcRQ91iRVF2jnGD6CQNcnzRFm/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
}
#mintshare_ft_c {width:100px; height:30px; border:1px solid #888; position:relative; z-index:100; margin-left:70px;padding: 0 15px;
-o-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
position:fixed;
top:0;
z-index:1001;
}
#mintshare_ft_c div.mintshare-wrap {width:100px; height:30px; float:left; position:relative;}
#mintshare_ft_c div.mintshare-wrap a.top-a {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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsxVoRDgY87isYMZ5BABKYvwDi06P1yZieqKE40ZuujOMwlRY9YakoMpBM0y2k4qPf6njAEaY1tx_Vt13RkiCbfxRupd3YPL79Dc_2YiZmALI00XJdbzAtWXw0wBdr0V4fxmtOTehhJUzm/s1600/plus.png") no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}
#mintshare_ft_c div.mintshare-wrap div.flyout {height:0; overflow:hidden; left:-1px; top:30px; width:110px; position:absolute; z-index:500;
transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-webkit-transition: height 1s ease-in-out;
}
#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons {background:#FFF; position:absolute; left:0; top:-500px; border:1px solid #888; border-top:0; padding-bottom:10px;padding-top:10px;
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 0 5px 5px;
-icab-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-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_ft_c div.mintshare-wrap div.flyout ul.icons li.drop-li {position:relative; width:40px; height:45px; float:left; z-index:100; margin-left:6px;}
#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}
#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons 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-right:5px;
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_ft_c div.mintshare-wrap div.flyout ul.icons li.drop-li a b {display:block; width:100px; height:60px; padding-top:20px; 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;
}
#mintshare_ft_c div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_ft_c div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}
#mintshare_ft_c div.mintshare-wrap:hover div.flyout {height:522px;}
#mintshare_ft_c div.mintshare-wrap:hover div.flyout:hover {height:522px;}
#mintshare_ft_c div.mintshare-wrap:hover div.flyout ul.icons {top:1px;}
/* for IE6 */
#mintshare_ft_c div.mintshare-wrap a:hover {direction:ltr;}
#mintshare_ft_c div.mintshare-wrap a:hover div.flyout {height:522px;}
#mintshare_ft_c div.mintshare-wrap a:hover div.flyout ul.icons {top:0;}
#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover b {filter: alpha(opacity=100);}
#mintshare_ft_c table {border-collapse:collapse; position:absolute; left:0; top:0; width:0; height:0; margin-bottom:-1px;}
/* Misc */
#mintshare_ft_c .get_mintshare {
font-size:10px;
margin-left:3px;
}
