Membuat Widget Share Menggunakan CSS + HTML Di Blog - udah lama nih gak share di blog ini, meskipun agak sepi, karena saya jarang Blogwallking dan sibuk mengurusi yang lainya. Okeh lanjut ke Topik kita kali ini adalah Cara Membuat Widget Share Dengan Menggunakan CSS dan HTML, artikel ini berasal dari Bloggermint, saya banyak belajar disana, coba lihat dulu demonya :


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

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="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + 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="&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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="&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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="&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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="&quot;http://www.technorati.com/faves?add=&quot; + 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="&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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="&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + 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="&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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