Malvin Share

Berbagi tanpa Batas

» » » » » Cara Membuat Widget MintShare Sosial Share Button di Blog

Minggu, 18 Maret 2012

Cara Membuat Widget MintShare Sosial Share Button di Blog

By On 06.56 with 4 comments
MalvinShare-Pada postingan kali ini, MalvinShare akan ngasih tutorial dengan tema sama seperti postingan sebelumnya tentang Cara MembuatWidget Subcribe e-Mail Versi 1. Tapi kali ini widget yang kita buat bukan widget subcribe e-Mail, melainkan widget Sosial Share Button. Widget sosial share botton ini dikembangakan oleh bloggermint, dengan nama MintShare Sosial Share Button, agak ribet sih kalau di ucapkan, tapi lihat hasil dan tampilannya yang luar biasa. Dalam pembuatannya, widget ini murni hanya menggunakan CSS dan HTML saja, tanpa JQuery maupun Javascript, sehingga membuat loading widget ini cepat.
Widget ini terdiri dari 5 layout tampilan berbeda, yang semuanya murni hanya menggunakan CSS dan HTML seperti yang saya katakan tadi. Ok langsung saja akan saya berikan tutorialnya. Untuk demonya bisa langsung teman-teman lihat disini.
  • Tutorial atau Cara Membuat Widget MintShare Sosial Share Button Layout Versi 1
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="&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/AVvXsEhoxD6ZJvRnDE_aNKJSZ1ROaZvDaGraya7NFytrklPS8mMtfb15pdD5W3B7p5oRCGLQ9zfJITigs8Lnw2lS_HkkDP-h71lcITnuMqZeEpCk2dqCTnDqDb7lgQRM2wLrV3r45odBxP4yfmLv/s1600/facebook_small.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/AVvXsEjALVb2gEP8vdOdFPqdhmEVI9PwTSMSinEx4cFW9042bNkcc2glYFhyphenhyphenEsQU9Y_40jGSUgTBiDBctTiAzzMJIxwfLewgpxPzomqP7b5l1SrcfJDN6-mm6S-pYOy7hUNn7BWlcxHKcNfFgaBm/s1600/twitter_small.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/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="&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/AVvXsEhJnNLJkSO_-4-ObGzi37AwZC5poXcpvJ6VwMH8CmYVE0vCAfdKxcMeHbkSTNNKpE2Y154UQmlINyUtmL0TuyZrHZ954LH9xLhwv5GJyXkOsFatIY2hU-gI6PEKm7Cj9ptPwFwHUu_QXyKL/s1600/digg_small.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/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="&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/AVvXsEj6KOrnhoKwGXjEaOiRgMZX3Fwok0w_uadHcHNcZFAw5WT3_NbLHsNvoH_bf2nyGV2QZ1AtR_GCP5AgTGZIpYBY3i0yz11TAx0cH1Rbo6Qz_5tyvA5vjcXOVU4BRWDq1sb7vUcnUcx79xFE/s1600/reddit_small.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/AVvXsEgbcrI75VsWZtJy6x3fYEAulUqzCnM4Va9qPr1v32XbCMnqfZcthdDVOOmMVpUOLNybctnaCSPSHrumH4P0IuPrcXE1D0ICIlFrujrYS16BiN6_hr0OY1r78rgSsqnxsYdOPEJXQvlVdKwx/s1600/yahoo_small.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/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="&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/AVvXsEiWOWXM3Ph7xOPiKuvbLpXl5vYreY3xoJyPKW4YCunK_WCzkjvVVDjQ9uskIVDxxn1DuzUCKskHnO5Pf9eImVu8QnYS28r93Iiaqzk8vAbUwaIOgeVFcEXD-3ssbwoFRf7vPD4UpykIH_CO/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/AVvXsEg83H9yTLZ360POw-X84O75TA6jRTJywdmRmoXolLQ9A69p3QIghmvm7XA6lab8Ul9mJ9gNNHXlSvIh0XGW0osu51vcP97xRX03Tq2HlUvf3RsjRHzQ49H_bn_IAMN9Gb0JdZ_ZIq9gyLdO/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/AVvXsEgYLuuxUD5S7TSoeAQr4DxqGUb75PBNVPyrNhYCOn3Ck50galDRnLbfvHDxx91KCl2AMvykco2M6dSrrqHHJYmGlDylJyyYiB7-WisKeX6Q9IbPGJiLqt1oBVtDMJ9Rogcj-KpLUp61xJfA/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/AVvXsEgflDTRcj6qihIy_Y6yrfoASFPTT7FTeSeJqm7UxClsNEO8M3P2pO6L7UXQDZpna2DbSJgGMvrYgdspieM6-cWoD2Rhn6hIJKNqAq6tLfWSjXHwwSJqbG2oHu7qgVuOfYQKAgIwD5C3hhyc/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/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="&quot;http://www.technorati.com/faves?add=&quot; + 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="&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/AVvXsEgIA5G8OnoMIYS-U-bRSLFVIoLGKVstqsPBxb2sWZsXOKBAK9cSm9WyuWoepEO8BBn4Y-tYyhLGi0U2nBbIYSSTCiE7m1EIm4eJpgFErZG_48ocq1jaUBTihumW8REXCjEuA1TRIfKDLHCl/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/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="&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/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="&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/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="&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/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="&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/AVvXsEjpQVWLtiC5hcWv0O2CXUoDIB-cPlVmoSU9aMIwtWkZFCK22hyphenhyphenAdXbvfVIpJGn2vBVrIrQ98OO6IGRyFcPqUj02OkEzEeDrbWk4iNolneW6SHUC5kfy0HvosNy3x2an2PdA2me_BRZgaHa_/s1600/digg.png"/><b>Digg This</b><!--[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/AVvXsEgvBi0unMjvSlO-Y8Y86NHWzYu4feNtoSNlkiFAmLAKB-pupQ8vnGdYhkii5X2sE-KRwzj9lmW3lI0MCkOmryqmxQztZNMgz6TBs3LoDrLqHUWBBcFG7PCql3FTCOmvtlEkNBmpT4ueuzFl/s1600/technorati.png"/><b>Technorati</b><!--[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/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="&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/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="&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/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="&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/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="&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/AVvXsEjpQVWLtiC5hcWv0O2CXUoDIB-cPlVmoSU9aMIwtWkZFCK22hyphenhyphenAdXbvfVIpJGn2vBVrIrQ98OO6IGRyFcPqUj02OkEzEeDrbWk4iNolneW6SHUC5kfy0HvosNy3x2an2PdA2me_BRZgaHa_/s1600/digg.png"/><b>Digg This</b><!--[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/AVvXsEgvBi0unMjvSlO-Y8Y86NHWzYu4feNtoSNlkiFAmLAKB-pupQ8vnGdYhkii5X2sE-KRwzj9lmW3lI0MCkOmryqmxQztZNMgz6TBs3LoDrLqHUWBBcFG7PCql3FTCOmvtlEkNBmpT4ueuzFl/s1600/technorati.png"/><b>Technorati</b><!--[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/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;
}
  •  Kode HTML untuk Widget MintShare Sosial Share Button Layout Versi 5
    <!-- 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/AVvXsEiWOWXM3Ph7xOPiKuvbLpXl5vYreY3xoJyPKW4YCunK_WCzkjvVVDjQ9uskIVDxxn1DuzUCKskHnO5Pf9eImVu8QnYS28r93Iiaqzk8vAbUwaIOgeVFcEXD-3ssbwoFRf7vPD4UpykIH_CO/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/AVvXsEg83H9yTLZ360POw-X84O75TA6jRTJywdmRmoXolLQ9A69p3QIghmvm7XA6lab8Ul9mJ9gNNHXlSvIh0XGW0osu51vcP97xRX03Tq2HlUvf3RsjRHzQ49H_bn_IAMN9Gb0JdZ_ZIq9gyLdO/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/AVvXsEgYLuuxUD5S7TSoeAQr4DxqGUb75PBNVPyrNhYCOn3Ck50galDRnLbfvHDxx91KCl2AMvykco2M6dSrrqHHJYmGlDylJyyYiB7-WisKeX6Q9IbPGJiLqt1oBVtDMJ9Rogcj-KpLUp61xJfA/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/AVvXsEgflDTRcj6qihIy_Y6yrfoASFPTT7FTeSeJqm7UxClsNEO8M3P2pO6L7UXQDZpna2DbSJgGMvrYgdspieM6-cWoD2Rhn6hIJKNqAq6tLfWSjXHwwSJqbG2oHu7qgVuOfYQKAgIwD5C3hhyc/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/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="&quot;http://www.technorati.com/faves?add=&quot; + 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="&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/AVvXsEgIA5G8OnoMIYS-U-bRSLFVIoLGKVstqsPBxb2sWZsXOKBAK9cSm9WyuWoepEO8BBn4Y-tYyhLGi0U2nBbIYSSTCiE7m1EIm4eJpgFErZG_48ocq1jaUBTihumW8REXCjEuA1TRIfKDLHCl/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/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 Float Top End-->
    Selesailah tutorial yang sungguh panjang ini, semoga mudah dipahami, terimakasih.
    Tags:

    4 komentar:

    1. Anonim19 Maret 2012 pukul 02.46

      Mantap sob, thanks atas infonya...!
      jgn lupa mampir di mari Cara Hack Password Smadav Pro. Thanks!

      BalasHapus
    2. Unknown19 Maret 2012 pukul 08.50

      @Irwan Saputra iya sama2,,,,

      BalasHapus
    3. tomi19 Maret 2012 pukul 10.03

      untuk blogspot ya mas.. mantabb..
      susah jg ya ternyata.. memang wp cocok utk blogger malas spt saya karena plugin sudah ada dan tnggl pasang tanpa perlu repot utak atik code :D

      BalasHapus
    4. Unknown19 Maret 2012 pukul 15.17

      @tomi: ada juga lo mintshare yang khusus untuk wordpress, jadi kita tak perlu utak-atik HTML dan langsung pasang plug in minsharenya saja.... thanks atas kunjungannya

      BalasHapus

    Protect by

    DMCA.com