MAsuk ke Rancangan -- Edit Html - centang Expand Widget Template.
Kemudian Cari Kode ]]></b:skin> letakkan CSS berikut diatasnya :
#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/AVvXsEiyHs_PaSZjR7KSaEPg4JTaNuYtGO5jB_8TR2Es5Mgw7PW_iHFuYELRmHIEMt1RVvmCwZnuXGaK7t9XL1D40KXhPKuU1mumHNwIsoE0ECR08kBtaAj2HemF634U8pOnnwsNxrYoaDzpggtH/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/AVvXsEh8eQy913cpjAbfvodBsJ8yu7cznj4WquTkZ2A3MZTNXcK1E_aAEygOMLNnEC3oRmQFTRx7bOclEZV0AyK2gCVQ16H7c92cE2Z56BcQY5UW1Vo0ZRBYEanvkuHSHYMotV-w9YsT-n-CDSyg/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/AVvXsEiyHs_PaSZjR7KSaEPg4JTaNuYtGO5jB_8TR2Es5Mgw7PW_iHFuYELRmHIEMt1RVvmCwZnuXGaK7t9XL1D40KXhPKuU1mumHNwIsoE0ECR08kBtaAj2HemF634U8pOnnwsNxrYoaDzpggtH/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;
}
}
#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/AVvXsEh8eQy913cpjAbfvodBsJ8yu7cznj4WquTkZ2A3MZTNXcK1E_aAEygOMLNnEC3oRmQFTRx7bOclEZV0AyK2gCVQ16H7c92cE2Z56BcQY5UW1Vo0ZRBYEanvkuHSHYMotV-w9YsT-n-CDSyg/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/AVvXsEiyHs_PaSZjR7KSaEPg4JTaNuYtGO5jB_8TR2Es5Mgw7PW_iHFuYELRmHIEMt1RVvmCwZnuXGaK7t9XL1D40KXhPKuU1mumHNwIsoE0ECR08kBtaAj2HemF634U8pOnnwsNxrYoaDzpggtH/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;
}
Kemudian Cari Kode <data:post.body/> copy kode berikut dibawahnya :
<div class='note'><div id="mintshare_mini">
<a class="sharetext" href=""><b>Share This</b></a>
<div class="flyout">
<ul class="icons">
<li class="drop-li"><a class="drop-a" expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZL9K2d5djCTYtju4glTzfyHdHbxdDUxYXqQ6fOAxhyphenhyphendxQPLKyX82st_VZC2HArS2DqmDNzlc-FGx_-0LjhVl0hjCtSPqQ0GnGiSvh-L_ar6CdK2i92E9ewFZKP869ABO4KZB6u7lKY95_/s1600/facebook_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHD1GxNA5wZ68Z9K1L7lNoP7S_sfzDzHsaJ5wfcVPIs2UkhWMk8x4CP-3AxVAx6RWtk4sK-yWaH3tKF6Akn_zaqC6QY58fu_7u5SUqf9Q-qesxd-z-Wf70g74ypDDEEwXhAVPVq181bmOz/s1600/twitter_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTlezUsoPOPyMo6XEt5hmKkX6QiJebY5jhPXoshE_NPEOZ2tiV4ULI0vnFUm4suZReubJUEP3pu9311bpBRusBTVdj4e93swNtu9zmqcOrJ9DWowNEb_mK4XRxrj7cgW8h3mMJ3Tde8aYn/s1600/stumbleupon_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEylwG5GkWxKjm9KhcZqU7fiLkCEJY5AuzvFKqh13mhnvCkaIK-T_VEPBGY5apXOn0w_18CIZj_XTrkkVnSlPU4xBsSJanbte_aa5twQqwtl1AOA2vwu-0YFXRheinrczkZWCGDAgLKT5U/s1600/digg_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://www.technorati.com/faves?add=" + data:post.url" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7KbBDRzhBfM41OV31_OlZM-vSBf-rXZc4zsOMBxL6vBI8ht8CyHCzktrc0um0k3aXaCf3H5a-iRdxdL5n1wa4liItsmNjwBrStGnox76KN_yWPEQB0FxH1uenNo9W9B6Otz6z27O0mkUv/s1600/technorati_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7jzoOMxnQggC1ywbyPN3DJHxvMCWBKBOJtxFM05dED4rBxaZAJvt040jtHqJwkhhA_Y5rkh10o8OmCV8jcVhAeyqOgz7M8ifMMzhXGXKjIWKBjp9T9IiF0DTkw7-bnxqsDjcSKW4cGwHg/s1600/reddit_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_c-t6fAPe-H6bfoO2x-gHYrfkvOsYhlBxa0w2lCrEeSlVsBjrjEm9Yi-25HUIDgiFxzQhf4EBSsTs-exY0pdYvzBntGvV32rB8ZUpXrYQMkWvyAooWtweeqdcvOf-LYJG21KvyxwXwpw9/s1600/yahoo_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTW4bmLzWIGjI9p0Qu0JTnHFo3Cj14pZYjhK18lQzR8ljPIwKTVQJbYRSlK2TLBgg0JahPLdSX_U1GxmuijZRlJ6BglcjeZIu6HQ4q4xs24GOlZKG3x2ib88jlDJRneo4m8SOkKFk7p1Z1/s1600/delicious_small.png" /></a></li>
<span class="get_mintshare"><a href="http://tanpa-isi.blogspot.com/2011/09/membuat-widget-share-menggunakan-css.html">Get This Widget!</a></span> </ul>
</div>
</div>
<a class="sharetext" href=""><b>Share This</b></a>
<div class="flyout">
<ul class="icons">
<li class="drop-li"><a class="drop-a" expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZL9K2d5djCTYtju4glTzfyHdHbxdDUxYXqQ6fOAxhyphenhyphendxQPLKyX82st_VZC2HArS2DqmDNzlc-FGx_-0LjhVl0hjCtSPqQ0GnGiSvh-L_ar6CdK2i92E9ewFZKP869ABO4KZB6u7lKY95_/s1600/facebook_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHD1GxNA5wZ68Z9K1L7lNoP7S_sfzDzHsaJ5wfcVPIs2UkhWMk8x4CP-3AxVAx6RWtk4sK-yWaH3tKF6Akn_zaqC6QY58fu_7u5SUqf9Q-qesxd-z-Wf70g74ypDDEEwXhAVPVq181bmOz/s1600/twitter_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTlezUsoPOPyMo6XEt5hmKkX6QiJebY5jhPXoshE_NPEOZ2tiV4ULI0vnFUm4suZReubJUEP3pu9311bpBRusBTVdj4e93swNtu9zmqcOrJ9DWowNEb_mK4XRxrj7cgW8h3mMJ3Tde8aYn/s1600/stumbleupon_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEylwG5GkWxKjm9KhcZqU7fiLkCEJY5AuzvFKqh13mhnvCkaIK-T_VEPBGY5apXOn0w_18CIZj_XTrkkVnSlPU4xBsSJanbte_aa5twQqwtl1AOA2vwu-0YFXRheinrczkZWCGDAgLKT5U/s1600/digg_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://www.technorati.com/faves?add=" + data:post.url" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7KbBDRzhBfM41OV31_OlZM-vSBf-rXZc4zsOMBxL6vBI8ht8CyHCzktrc0um0k3aXaCf3H5a-iRdxdL5n1wa4liItsmNjwBrStGnox76KN_yWPEQB0FxH1uenNo9W9B6Otz6z27O0mkUv/s1600/technorati_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7jzoOMxnQggC1ywbyPN3DJHxvMCWBKBOJtxFM05dED4rBxaZAJvt040jtHqJwkhhA_Y5rkh10o8OmCV8jcVhAeyqOgz7M8ifMMzhXGXKjIWKBjp9T9IiF0DTkw7-bnxqsDjcSKW4cGwHg/s1600/reddit_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_c-t6fAPe-H6bfoO2x-gHYrfkvOsYhlBxa0w2lCrEeSlVsBjrjEm9Yi-25HUIDgiFxzQhf4EBSsTs-exY0pdYvzBntGvV32rB8ZUpXrYQMkWvyAooWtweeqdcvOf-LYJG21KvyxwXwpw9/s1600/yahoo_small.png" /></a></li>
<li class="drop-li"><a class="drop-a" expr:href=""http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title" href=""><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTW4bmLzWIGjI9p0Qu0JTnHFo3Cj14pZYjhK18lQzR8ljPIwKTVQJbYRSlK2TLBgg0JahPLdSX_U1GxmuijZRlJ6BglcjeZIu6HQ4q4xs24GOlZKG3x2ib88jlDJRneo4m8SOkKFk7p1Z1/s1600/delicious_small.png" /></a></li>
<span class="get_mintshare"><a href="http://tanpa-isi.blogspot.com/2011/09/membuat-widget-share-menggunakan-css.html">Get This Widget!</a></span> </ul>
</div>
</div>
Silahkan Simpan dan Kreasikan sendiri.
Semoga Cara Membuat Widget Share Menggunakan CSS + HTML Di Blog bermanfaat untuk anda.
Untuk Pilahanya disini tersedia berbagai kreasi, silahkan lihat : http://www.bloggermint.com/2011/01/mintshare-social-bookmarking-sharing-button-widget
0 komentar:
Posting Komentar