Setelah sebelumnya saya membahas mengenai Cara Memasang Floating Share Button Melayang Pada Blog, pada kesempatani ini saya akan membahas hal yang sama lagi yaitu mengenai Cara Membuat Widget Share Menggunakan CSS + HTML Di Blog, tapi berbeda dengan sebelumnya yang pernah saya bahas,artikel ini berasal dari Bloggermint. Oke langsung aja
- 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/AVvXsEitO5F8zFFTQ_grkbzoiA9apoGA0ryK141U_RdILSQhbe2NBRq_h35CGs8dTPHmhaX5R4Hgx6C874vaW8kVKIF5iJzbXlsbitW76ulZ6BkqtacNR7IZygS63agUuk3d85-SFMWmkG8wN4y9/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/AVvXsEjlJELQxa4WF5DDo1-mldYkad0alPVxcO2myXXVhnJe-qhtYshqSPMYSZgMVolJJv4oCl_u16BIAL9UFQpjfpC994k0NpNQjBKzPCRjetG8pn5IWv5jlsqwz97XCLk56tU_tLmZ8hsCrfae/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/AVvXsEitO5F8zFFTQ_grkbzoiA9apoGA0ryK141U_RdILSQhbe2NBRq_h35CGs8dTPHmhaX5R4Hgx6C874vaW8kVKIF5iJzbXlsbitW76ulZ6BkqtacNR7IZygS63agUuk3d85-SFMWmkG8wN4y9/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 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/AVvXsEjz3UNX8q_exnmWRCOErjB0dnprkiDvcydqXc2B2aNYPYyG-VkRJGHRwxmbxJzegb4CXtz7gB91gMUHFc5c4aHARFyu5GNyjBuen8c7L-d_IJDuHwxzYpilSvWdRrMeCobl0jVQaHiqDDjZ/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/AVvXsEiiChxWSQZxrTfbUxmfoyDnX5WeiNDPZonw87ZRYN8Q8PxJYRkgAlfVH6nfzChp5gAvpd9d4fUg4fDNPxepMlRgmXeem6Yrdr4c6ftvIjoXN5wi6tUl5C1wrob9VL3TWy1_fYp_-xpa5WK-/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/AVvXsEh98DEBXjGkMCSepvwhSvwwI_r_7TVRjmEwX0rb5neWrSyI1tMq5CkHgDSjf4CL8dhxm_0HNxpec6JKwr5LfeI88sJhpOdF47itjhB2Y-oFQDWseH2uesNEWuRjFRz2IMQIwSxYEub_T7qY/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/AVvXsEir55BRukCHyDlU69ttECqIn-zF8WBsN0jn2gyJJfoC61TKI6QXf4y3O6_j-ghn1LIH-VfFqVWE_eZCvOXiKkSZwDtMy-l4h_hYVNM1ro1Dw7DZfQNDdLL6uUfPWQv0ILE4k3d7YHd1PS19/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/AVvXsEiipgbjRYnHDLKqrATJFpsdWDhBIgMA8y-8k8grWCjD1rVEDRN88JlPXWozXF3Sq__uYNFjeiOAhq1NGViBZ1WP6bPqKRHyaaQt1oEZgi3K4fjOvf1TXc1F20Hin81FT8q0y9mEMM1gKYDF/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/AVvXsEif80avvMMohjRBlyhFot-ANTd52vK7_HDRYQIvi6VLAZHlc725ic2fWt7Pl492GaTvU2cfrRN7-LgVnoxSqhM28hPUutcRGtFw5WfcXdQKP39yQvMbvcqtJhEKUIStg7WVFEJggeSAhZuN/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/AVvXsEg_gPuxHuQAc2Rr03avqqZHDpE18Ny7nVtz_RyV8g6n0mXBYErUoIiamn-ek9uOyX0MFLAP9fhmAlJD9bMDjH746FoWgBunrkS9XpGFrIiuXyskWq3NPCWkaYXok27KxbSYiGChDcRsduEG/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/AVvXsEik33X6a3d3AVX63sXvucqgcHrI1D200jGHXhN6tHYEk3_PimVpVhq2q3Me5F6t6YJvegtSKKW4P5Diq_4zS7nl19UGmDoxHY96SFNnxcm2OwD1Osz4miB1Z-5_I6_ZiMJzZqhXx4T9FB1A/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 sesuai dengan keinginan anda
Untuk Pilahan lainnya tersedia disini berbagai kreasi, silahkan lihat : http://www.bloggermint.com/2011/01/mintshare-social-bookmarking-sharing-button-widget/
Tidak ada komentar:
Posting Komentar