Headlines News :
Home » » 5 | Cara Membuat Widget MintShare Sosial Share Button Layout

5 | Cara Membuat Widget MintShare Sosial Share Button Layout

Written By Johannes Nababan on Monday, June 18, 2012 | 12:24 PM

Sekarang kita akan posting kembali tentang widget. Widget kali ini adalah Versi 5 dari Cara Membuat Widget MintShare Sosial Share Button Layout. Widget Versi ke 5 ini adakah Versi terakhir dari Widget MintShare Sosial Share Button Layout yang ada. Sebelumnya saya juga sudah memposting tentang Versi 1, Versi 2, Versi 3, Versi 4. Postingan kali ini saya tidak menjelaskannya lagi karena saya sudah menjelaskannya di Versi 1. Cara pemasangan widget ini agak berbeda karena langkah berikutnya tidak meletakkan nya melalui Edit HTML melainkan di Add Gadget yang berada di Tata Letak. Untuk demonya bisa langsung teman-teman lihat disini

»Cara Pemasangan«

  • Masuk ke Blogger
  • Pilih Template, kemudian lanjutkan
  • Centang Expand Widget Template
  • Lalu cari kode ]]></b:skin>
  • Setelah ketemu, letakkan kode CSS berikut ini diatas 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_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/AVvXsEjetAElBmy4UuxPNYimgSQv1jeM-zeROLkuT6b9420XN8MIPvNKDgoJ1SYTwc5Wa5DKCre8PvvNaVv0bRzsCkoHgSaBTVweBTy4YNGzK5ixlDrkgLJfN4pYZEovve_yU6exYclKpKrjt5nL/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/AVvXsEip9xb9wYQUrSBRMAe2F277W0hg69lfuXcbhl9EKjiSaRcjQpcMQ4Sysnx7zuBd0Xaf9ZZNOerp7ffp0kpvpx_PlHGMNCAi_2MjOeyJiCKEgWsiWscoKszPt4jZ71X002KjjCEGvQjlj13Q/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;
}
  • Selanjutnya masuk ke Tata Letak
  • Lalu Add Gadget
  • Copy-paste kode berikut ini :
<!-- MintShare Compact Float Top -->
<div id="mintshare_ft_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="&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPeJAhpQcM4t2my1IPdUhbG6MITetw2MF1pe0Q5DEWTUMTMgkMmiFYFXAoz_IHMSdHmVdQtD0TlC9DHZFaPO36tWUEGD8InYCO1Q2P2YkuLG7mFMZaDVfFZ9apEf8fH1bcmEYKVHphBjA6/s1600/facebook_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5kq4iHuU1ikt5CyjR8GQ1H8gSgjJap558eySrfRkqFrwEjf9D6pVA8TRxCx5jucAth5xy22CNE_3wS7JB7RFMeb7pLiadanh5C73k80jXumLXsQiu8sCkYP12JlzQrDLSNQ3o1tgJlJYg/s1600/twitter_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiphl6iNLnZeclqbSALmGikJ3MFgPmn_ku6ZB63u6pHHpxRjn87PDSUtUE8WYfUVw13XQoKnrilbdZTH-xLsPcWPjYMrru2zrBcpZryrXQWhj3P5pvHQBpIWCBRzPTS1qn8aiFtB3ct8dYA/s1600/delicious_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsXmRmFyELdmj719VUmj_7Z7YrgHXXhaF6MqMCMsXAOXLX3qeuw_885w6Xeygs_MDx8_WIHuZjnIM8bohZH4ux4g1AruKK6Dg5kR1YFZJTrRQH16kWt4OgxybMjWvedACynbqQvjIJINcW/s1600/stumbleupon_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAspixiEDMcUXf_qWnILKSdmuefQh43hBHIc9E6AbDqJ1WbRmR3f4-n6aQhgifWPN0MoKKSn0Tbiwtzumpmpkh3vr1kNWd5ZQV2JxyQkfRlTm7TmiKhYxwikpW_xx782ZVqN_hPOtVHqnL/s1600/digg_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://www.technorati.com/faves?add=&quot; + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw47wx8fzYGaFWBtoHKU0oGGGZ5JCW_h9JAbajvMR66QqmlE7zY4jzaU-y_3YtzE_D2GutOuAhNCEsdfUyZFDUJ_XD-DJcvM1uocAv16iTyf49HaOPTbATdMNvI_dz0EDQ6A4mgL8Zbkz9/s1600/technorati_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhqB62IcbYqHSLPHVXdGb6FG3JvDjzK3leEPv5_MKWV6um-4YFFmhA9j2pyi64thdBN3RXKritwc_l8NLQcF-VKVbZefB4c4u2yxoYgaqtkyI_WzLiqqYwFyNI0iBVNcrGWBT2FYobv0a2/s1600/reddit_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a expr:href="&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?t=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhig1kTRLVj671HNwo149x6gNLka-jWNs8GL_gz8yI2b2NxSZnyQ4vs1rDXVb8L7NrqRZ4Q9WyWorO54tEwWTC4XJx8wvAIaOhm1PON85WXgX7uU55cUHCY9bHssJKn2yU5PoqIHU15jre0/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 Float Top End-->
  • Lalu Save Template
Share this article :

3 komentar:

  1. Sangat Bagus Sob !!! Lumayan Untuk Memperdalam Ilmu !!! Silah kan Visit Balik Ya sob !!!!

    Tukar Link Yuk ?

    Salam Blogwalking Indonesia Dari Saya Sob !!!

    ReplyDelete

Setelah membaca Artikel yang saya berikan diatas, anda dapat memberikan komentar terhadap Artikel diatas tanpa adanya :
-Spam
-Rasis
-Dan perkataan lainnya yang dapat membuat orang lain merasa tersinggung.

Terima Kasih

banner ads banner ads

 
Support : Blog | Joe | Johny Template
Copyright © 2011. Blog | Joe - All Rights Reserved
Template Created by Johny Template Published by Blog | Joe
Proudly powered by Blogger