Home » » Tutorial Unik Blogspot (4) - Share Button Five Style

Tutorial Unik Blogspot (4) - Share Button Five Style

Share Button Five Style
Bismillah...,
Alhamdulillah akhirnya masuk juga ke postingan ke 4, Tutorial Unik Blogspot (4) - Share Button Five Style. Seharusnya sudah dari kemarin pagi postingan ini ter-share ke Blog cuma karena scriptnya dari kemarin aku coba tapi gk bisa-bisa, setelah beberapa jam mencobanya akhirnya bisa juga. Namanya keren sesuai dengan tampilannya, bagi yang penasaran bisa mencobanya langsung. Untuk mempersingkat waktu yang sudah tertunda dari kemarin pagi langsung saja sahabat kita lihat Tutorialnya.

Style Pertama :
1. Login ke akun blog sahabat
2. Rancangan
3. Edit Html
4. Centang
5. Cari Taq </b:skin>, untuk mempercepat gunakan kontrol 'f'
6. Copy kode CSS dibawah ini lalu simpan sebelum taq </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/AVvXsEjQ3OROuFTdbvjIeedkBMuUhQyQuMXBmmMLH_nXotlr_fGLCPj6FKJIbzEDcbzl0EKUd_I0yM_XS4B-NMaj2tpG9goiMnFyrAHSqHoR4YClfgk39bsmCxY-fIBR6w1q7iU772VfPA2phf_o/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/AVvXsEg6385sN1BPMFL4SQKcNCu73OQEZwMWjxF2Y1jeWwjBLPxaDheY45qZ8FXR642_aMMl9UGWBlPeAlA8axBIZim-ECo1f2I5p9Z0LfPQl-iHxuKPoqxeKI_gszAcXoVYfOV6UtAo5k9CUyOm/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/AVvXsEjQ3OROuFTdbvjIeedkBMuUhQyQuMXBmmMLH_nXotlr_fGLCPj6FKJIbzEDcbzl0EKUd_I0yM_XS4B-NMaj2tpG9goiMnFyrAHSqHoR4YClfgk39bsmCxY-fIBR6w1q7iU772VfPA2phf_o/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;
}

7. Cari Taq <data:post.body/>, untuk mempercepat gunakan kontrol ' f '
8. Copy kode HTML dibawah ini lalu simpan sesudah taq  <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/AVvXsEjeIivETGXLhnTkbHx8d0o6XnRtzNiqiR_aEMaPIWA0hAHSCR5Qsi21absSugMffdSKVGhAzVhuw-nZ7a3fyED0ZZpvxH0f9wqzhO_BqvTehd9ZfeYgz8NPs2d5lxKyVysZoR0vLQEUhEeL/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/AVvXsEiptDvvYd1q0jG6fq_ojOlF3c6Sv5A-3FTzKGFe8ZESRwAiAZ9dzsQFcFZHS4fRXmw73JxB6Ln61yxGWCNkap_mAbuoCbQaP9NqY7TuZmlYNoV1FrezG-2qBDdLXUp3SShZuaN266LjqzuW/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/AVvXsEip2GvRDffApjtJY0Gjy7nra3rniXTRSlE-Xlyz0asgR1doMTCHSfWQvPq9YTB2TTalmvQR7wBFpxYRmotuwlYtqGe7KP7eH3c5Q4WRjur_-Xg69G3iJcspSAbrRoAahITW2pQDiLzLK2FK/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/AVvXsEjHT7VkWFRi__3IY7n9gL4Gb2OLPTmKDqpN7q_-ia8ERJg2xqTXVvjtbkEv2sPmDsj1HrdbOl8fc_ELl0atc6Iz6Gy5YSi7as2op0npIARqACdC2-JbaGOZT_KkJFoENfoEXndHkwRI2VMK/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/AVvXsEh7iXH5kq9fTvF3LhRCSOlANFdmdfSbpByF5f_lwDmK7uROvASGVgn_FeJzfWlC2EltvRiGEyevdEM-XVyFxwBcMRuwgy-fTx4_JxXa-lbcQTwwb-aWdXp9WQP_UuaHMUaqI4MClFd4OOFP/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/AVvXsEjhmuDplyUhQnnFNERoFUEG7QRvfjfD-XqN1YNnH3yJVXJR_qbWqkLt_iua-gk8rUi81d7VD93TlyKIl_Rwvm2yewkKcfwz_1rqZ9boMDtcQfBpOaQqS52AvaTtqsIIqwDurpYP8IvIu6ns/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/AVvXsEjXIvwPVPblsQ3lUUF6E_WwL3qCEie4LZM9SMzOAi_m3VbryPK_3cq18DaKW_g4dFKg-MQXHce4JgI-rdFsyozY9ULlsFcGcZ8HYqMrkuZ327Vz75u0lRndeleOYDse57teYV-H4M4u7sID/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/AVvXsEjc_cyc0qNHoLrYCHVWKAs7wQHxZP5Hw0C0-CCI6IDepiq2kTf6vHNX6Uxktyp2fwraq26dX4P__X4UhTRQ-eSonD-sonElaDo6CMWggy8MMvnsM5MwWXFFIt5MTsPnR5l2MU2nFhs9Yxpm/s1600/delicious_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>

<span class="get_mintshare"><a href="http://rohis-facebook.blogspot.com/">Get MintShare!</a></span>

   </ul>
  </div>
</div>
<!-- MintShare Mini End-->
9. Simpan dan lihat hasilnya.  

Tutorial Style Kedua sampai ke lima langkah-langkahnya sama dengan tutorual style pertama, cuma yang membedakan adalah Kode CSS-nya dan Kode HTML-nya. Copy kode CSS dan kode HTML dibawah ini untuk Style kedua.

Style Kedua
Copy kode CSS dibawah ini lalu simpan sebelum taq </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_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/AVvXsEjQ3OROuFTdbvjIeedkBMuUhQyQuMXBmmMLH_nXotlr_fGLCPj6FKJIbzEDcbzl0EKUd_I0yM_XS4B-NMaj2tpG9goiMnFyrAHSqHoR4YClfgk39bsmCxY-fIBR6w1q7iU772VfPA2phf_o/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/AVvXsEg6385sN1BPMFL4SQKcNCu73OQEZwMWjxF2Y1jeWwjBLPxaDheY45qZ8FXR642_aMMl9UGWBlPeAlA8axBIZim-ECo1f2I5p9Z0LfPQl-iHxuKPoqxeKI_gszAcXoVYfOV6UtAo5k9CUyOm/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;
}

Copy kode HTML dibawah ini lalu simpan sesudah taq  <data:post.body/>

<!-- 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/AVvXsEj7Ua2AH4ApdfQewFkWaAE4KtEGF2YXG9DKkzeuJQSmYFIGx9UlU58lathy19_FB3hExFmWzC3Mchx6gEa6r11RmlayJ1bgVgdBKF_rPdXuOaR-XhHB6IDu5E53_2BASa-WferJeesWrhoo/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/AVvXsEgAdGTz2M4DVArKJGMHNGWHw26-m8GG4RHuWbFQ_TlkkRSFbDWIF2He3O4WUvyNlWI5h9GDvcfFllQ5ySQ8tiO-DdFgW7EOh8xU77EgT0q_kspQ9YaveWsyjw5ib3DjJNCOabjCZQuj-a4C/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/AVvXsEiSlNZmmvNkX8xCYqwQR-WFuaTSKE8GRZCwP0VU4evnpGJYNGHFr1wbMIAnA98vegwpClXMqjlBa0kyiQKF43N_x1rGKZGrMha-_BNbJnKRx90olfPN1s52kXTOk1pCPVoRwM4CSUnNz6i0/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/AVvXsEgWbEJizc-EBSNz1kzJN-Aiq2GDSbgWdZjepMdpoPBzHH6wX6B9O60R6nX0_-zFAO-0bP_m-5Z_tXFVyGN9bMIkBvO6gOWSw_v-J5e1wGa0SCZoim2SIXsuW60ssiUU5yse5BAUkQORigEH/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/AVvXsEi05s0YG2u98DIskjscU-u2EG7nFVB8ugYWVr3BJm5v6Nc2ZUjrbKnPVb7F8c5lcvKICLBI0vWBoHL5D5GeF8S4ZRV5B735Jv5NVUcWPPoAh9-NsE-wxs1y7i6hk77JmNe7fVyN6TpNYgQL/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/AVvXsEixRBKbj7lsUXkDVMbR5WMMRvgmKLE9ApBzrk0fEihpP-4aSPb1rU5zlxO2geUTA1Ak4QNtFFMRSUu8GODu3Xlk4EsHPre27fI2Lubn_jQ6LJdLLgdlOi3x-Kg_q3QRqumwH3pNCDEDI4HJ/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/AVvXsEje_khbyoAbDbOHwOllh7W3JxKizlbW6TfT9RH30lkrXvl28vTOK4khZJ5toAF58L0GAQ_RbG3iP_79oin_XFKudTCHlH4OST3JvigdCNrRnrgPNe_UwkatxtZ3pe4vO1nr7fgQ9NM5pltO/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/AVvXsEj5rG_ceunYkKqlIumY1rOma3mYToWLmoORYiBy0ANHoB7_CiBQ33te6b78ODu4kZIPe5EE9WQdl7IMVTomUa-iRYdaTb77QU8mD9S1gazqLoDA3sWPBBLi8PEARrHngHD_WKqeiQjd4_8u/s1600/yahoo_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>

<span class="get_mintshare"><a href="http://rohis-facebook.blogspot.com/">Get MintShare Now</a></span>

   </ul>
  </div>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </div>
</div>
<!-- MintShare Compact End-->

Style Ketiga
Copy kode CSS dibawah ini lalu simpan sebelum taq </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_fl {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKVfsvkXVVYWi7pu-7dXvOy9L5LsGFPrZ8GOGCxnSEmG027B2qFphVskzYG3E4TC6f6G0HpTH-ZSww9nsOKTTRFR5V9bUaEdwlXOm9etlnGK6hJVMmCyOzP0xFlHODJpaOfKm-QCSn0nCF/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;

Copy kode HTML dibawah ini lalu simpan sesudah taq  <data:post.body/>

<!-- MintShare Classic Float Left -->
<div id='mintshare_fl'>
 <a class='sharetext'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKw7DDbvpqZcD7ZH0_FDUhYHZTcrCdxDv12RmC1CkyTYYBhPXEqbPLpSSfBoWF0930Fx6Y5lsYGPFWE8tAx_jD8sCd7srREqMvx5YGdWXh2W9dpl65q2fVhcOthZqepQTD_AEsAOW2Rr5i/s1600/share_text.jpg'/><!--[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/AVvXsEhl0hZHYf0viKIziGsdD2SpT82EO_ELnKaHpb2jmV4r7U56MokFnryNbL3nazHtQ5k37klMa1-_-ncb1fz6ttmA82qK-7E5mYcwEynr31dYg9U5aKT0dWRp2Zp1_-bk-la_c_OC1JOtCt2H/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/AVvXsEhm6Akfnyfts_ZoKFxWGzeQDfbjWcuDVqaPumgOXbyDrWN4EuyPXRJVPfaS1JoBrK1cb_rJRttLETOsS7-RdHlyE9IP_MIeHEViyqpP77pmxtV4w6bWm33fXkEFR2M3dX2K8IEQZOA3gyuV/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/AVvXsEjiSLZ9fAAaNstbAce45YAKv30NpmIf1kpCHUFy2fCp9iFRx8EFMDdEUqEC-viAs9PypmFEre9fxWAJXsAoMDNammX90IHJ9qKEqDHkUF4N2oAX_lEJZioCnzC-93j4JHURlGw8weUhLdwv/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/AVvXsEj6KYSQqrD6yiR-JeJaHxswI51baGgOUDrb59qcezFUnE36pyrI9DXu69GR7IlH8pZ1AXRmpsJtfRUkNaLEDyyyN8Z4OfR0OGUlRIDiZdhkCGTqorkpLrWALtv1dwgax7GgxlJUX5heo6lm/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/AVvXsEj5-XW2hPgEciKTnfY-thh6dkcnvPUXTQ97y1D3wztZoif3FJ2mi9LfTmddCAduYGMUYYZYRR2zDoLJKheKmkc1Hks247ieHFaJHurjCA3LOq60WbzY2MM0uuZFGRhaAeov3FyES-1D57ZP/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/AVvXsEjyvxHopE-8Qiwcq9jjrL4fw-5N2TVoR3rlytqvQ_lNL0qk0XCYmZCw5O9nbCq4yP4Vu1ObXM2NsBARbioj8brkDe55lCRcHubR0eqX4bykckIP-pj58Gec2ExSGIfKT_Uaw1Z1ysjHuV4o/s1600/delicious.png"/><b>Delicious</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>

<span class="get_mintshare"><a href="http://rohis-facebook.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrP2vaqy3qpvH5xfDul6TWcUyXLasvC2n7fgPwcIwWs0-HzuTOjPJb3I0lWbrnbTM5p2JOZHvslyfXJIYZtrV8jPBMktd4D02intYQVxTj6OW8i3Wxw6WgLYGp-qNqqZbyaRUAIWA3hYT6/s1600/getmintshare.png"/></a></span>

   </ul>
  </div>
</div>
<!-- MintShare Classic Float Left End -->

Style Keempat
Copy kode CSS dibawah ini lalu simpan sebelum taq </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 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/AVvXsEjQ3OROuFTdbvjIeedkBMuUhQyQuMXBmmMLH_nXotlr_fGLCPj6FKJIbzEDcbzl0EKUd_I0yM_XS4B-NMaj2tpG9goiMnFyrAHSqHoR4YClfgk39bsmCxY-fIBR6w1q7iU772VfPA2phf_o/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/AVvXsEg6385sN1BPMFL4SQKcNCu73OQEZwMWjxF2Y1jeWwjBLPxaDheY45qZ8FXR642_aMMl9UGWBlPeAlA8axBIZim-ECo1f2I5p9Z0LfPQl-iHxuKPoqxeKI_gszAcXoVYfOV6UtAo5k9CUyOm/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;
}

Copy kode HTML dibawah ini lalu simpan sesudah taq  <data:post.body/>

<!-- 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/AVvXsEhl0hZHYf0viKIziGsdD2SpT82EO_ELnKaHpb2jmV4r7U56MokFnryNbL3nazHtQ5k37klMa1-_-ncb1fz6ttmA82qK-7E5mYcwEynr31dYg9U5aKT0dWRp2Zp1_-bk-la_c_OC1JOtCt2H/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/AVvXsEhm6Akfnyfts_ZoKFxWGzeQDfbjWcuDVqaPumgOXbyDrWN4EuyPXRJVPfaS1JoBrK1cb_rJRttLETOsS7-RdHlyE9IP_MIeHEViyqpP77pmxtV4w6bWm33fXkEFR2M3dX2K8IEQZOA3gyuV/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/AVvXsEjiSLZ9fAAaNstbAce45YAKv30NpmIf1kpCHUFy2fCp9iFRx8EFMDdEUqEC-viAs9PypmFEre9fxWAJXsAoMDNammX90IHJ9qKEqDHkUF4N2oAX_lEJZioCnzC-93j4JHURlGw8weUhLdwv/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/AVvXsEj6KYSQqrD6yiR-JeJaHxswI51baGgOUDrb59qcezFUnE36pyrI9DXu69GR7IlH8pZ1AXRmpsJtfRUkNaLEDyyyN8Z4OfR0OGUlRIDiZdhkCGTqorkpLrWALtv1dwgax7GgxlJUX5heo6lm/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/AVvXsEj5-XW2hPgEciKTnfY-thh6dkcnvPUXTQ97y1D3wztZoif3FJ2mi9LfTmddCAduYGMUYYZYRR2zDoLJKheKmkc1Hks247ieHFaJHurjCA3LOq60WbzY2MM0uuZFGRhaAeov3FyES-1D57ZP/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/AVvXsEjyvxHopE-8Qiwcq9jjrL4fw-5N2TVoR3rlytqvQ_lNL0qk0XCYmZCw5O9nbCq4yP4Vu1ObXM2NsBARbioj8brkDe55lCRcHubR0eqX4bykckIP-pj58Gec2ExSGIfKT_Uaw1Z1ysjHuV4o/s1600/delicious.png"/><b>Delicious</b><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
   
<span class="get_mintshare"><a href="http://rohis-facebook.blogspot.com/">Get MintShare Now</a></span>

   </ul>
  </div>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </div>
</div>
<!-- MintShare Classic Float Top End -->

Style Kelima
Copy kode CSS dibawah ini lalu simpan sebelum taq </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/AVvXsEjQ3OROuFTdbvjIeedkBMuUhQyQuMXBmmMLH_nXotlr_fGLCPj6FKJIbzEDcbzl0EKUd_I0yM_XS4B-NMaj2tpG9goiMnFyrAHSqHoR4YClfgk39bsmCxY-fIBR6w1q7iU772VfPA2phf_o/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/AVvXsEg6385sN1BPMFL4SQKcNCu73OQEZwMWjxF2Y1jeWwjBLPxaDheY45qZ8FXR642_aMMl9UGWBlPeAlA8axBIZim-ECo1f2I5p9Z0LfPQl-iHxuKPoqxeKI_gszAcXoVYfOV6UtAo5k9CUyOm/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;
}

Copy kode HTML dibawah ini lalu simpan sesudah taq  <data:post.body/>

<!-- 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/AVvXsEj7Ua2AH4ApdfQewFkWaAE4KtEGF2YXG9DKkzeuJQSmYFIGx9UlU58lathy19_FB3hExFmWzC3Mchx6gEa6r11RmlayJ1bgVgdBKF_rPdXuOaR-XhHB6IDu5E53_2BASa-WferJeesWrhoo/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/AVvXsEgAdGTz2M4DVArKJGMHNGWHw26-m8GG4RHuWbFQ_TlkkRSFbDWIF2He3O4WUvyNlWI5h9GDvcfFllQ5ySQ8tiO-DdFgW7EOh8xU77EgT0q_kspQ9YaveWsyjw5ib3DjJNCOabjCZQuj-a4C/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/AVvXsEiSlNZmmvNkX8xCYqwQR-WFuaTSKE8GRZCwP0VU4evnpGJYNGHFr1wbMIAnA98vegwpClXMqjlBa0kyiQKF43N_x1rGKZGrMha-_BNbJnKRx90olfPN1s52kXTOk1pCPVoRwM4CSUnNz6i0/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/AVvXsEgWbEJizc-EBSNz1kzJN-Aiq2GDSbgWdZjepMdpoPBzHH6wX6B9O60R6nX0_-zFAO-0bP_m-5Z_tXFVyGN9bMIkBvO6gOWSw_v-J5e1wGa0SCZoim2SIXsuW60ssiUU5yse5BAUkQORigEH/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/AVvXsEi05s0YG2u98DIskjscU-u2EG7nFVB8ugYWVr3BJm5v6Nc2ZUjrbKnPVb7F8c5lcvKICLBI0vWBoHL5D5GeF8S4ZRV5B735Jv5NVUcWPPoAh9-NsE-wxs1y7i6hk77JmNe7fVyN6TpNYgQL/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/AVvXsEixRBKbj7lsUXkDVMbR5WMMRvgmKLE9ApBzrk0fEihpP-4aSPb1rU5zlxO2geUTA1Ak4QNtFFMRSUu8GODu3Xlk4EsHPre27fI2Lubn_jQ6LJdLLgdlOi3x-Kg_q3QRqumwH3pNCDEDI4HJ/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/AVvXsEje_khbyoAbDbOHwOllh7W3JxKizlbW6TfT9RH30lkrXvl28vTOK4khZJ5toAF58L0GAQ_RbG3iP_79oin_XFKudTCHlH4OST3JvigdCNrRnrgPNe_UwkatxtZ3pe4vO1nr7fgQ9NM5pltO/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/AVvXsEj5rG_ceunYkKqlIumY1rOma3mYToWLmoORYiBy0ANHoB7_CiBQ33te6b78ODu4kZIPe5EE9WQdl7IMVTomUa-iRYdaTb77QU8mD9S1gazqLoDA3sWPBBLi8PEARrHngHD_WKqeiQjd4_8u/s1600/yahoo_mini.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>

<span class="get_mintshare"><a href="http://rohis-facebook.blogspot.com/">Get MintShare Now</a></span>

   </ul>
  </div>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </div>
</div>
<!-- MintShare Compact Float Top End-->

Demonya hanya terlihat dua style, bagi yang penasaran sama style lainnya silahkan mencoba langsung.

Sumber: Bisa dilihat di script CSS-nya.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Rohis Facebook

+ Create Comment + 41 Responses so far.

Reply
MHARJIPES.COM
18 Januari 2012 pukul 14.01

Mas biki deonya dong!

Salam

Reply
Anonim
18 Januari 2012 pukul 14.16

baggus sob tutorialnya, kapan2 dicoba deh.. :)

Reply
Rohis Facebook
18 Januari 2012 pukul 14.24

MHARJIPES.COM@
iya dah ada.., coba simak artikel diatas sampai tuntas.... salam... *smile

HEЯRY@
silahkan sobat.. *smile

Reply
Outbound Malang
18 Januari 2012 pukul 14.51

ane support aja dsni sob.
hehe, ga ngerti masalah yg beginian..
salam persahabatan sob
always *smile :D

Reply
Rohis Facebook
18 Januari 2012 pukul 15.51

Outbound Malang @
iya sob sy jg ngerti2 amat sh.., yg sy tau hny copas script ini & simpan di ats taq ini heheh...

Reply
Belajar Komputer
18 Januari 2012 pukul 17.10

keren sobat, saya sudah lihat demonya, bagus buat blog yang kurang lokasi seperti saya :) thanks udah berbagi

Reply
Iskaruji dot com
18 Januari 2012 pukul 17.12

Wah...mantab Sob..terlihat animatif. Pastinya, selain mempermanis tampilan juga berguna untuk share social...nice [post and happy blogging

Reply
LDS Al-Miftahuddin
18 Januari 2012 pukul 19.29

Assalaamu'alaikum..,
wah, dahsyat nih blog..,
kagum deh..,
kami minta saran2nya dong..,
view back web kami ya,. n kasih komentar antum
di http://www.rohisman2kotabekasi.com/

Reply
Rohis Facebook
18 Januari 2012 pukul 20.34

Belajar Komputer@
sama2 sobat, smg bermanfaat.. *smile

Iskaruji dot com@
happy blogging..., *smile

LDS Al-Miftahuddin@
Wa'alaykumsalamsalam warohmatullah...
saya pun baru belajar..,

Reply
Black Angel Syndicate
18 Januari 2012 pukul 20.52

wah nambah2 ilmu nhe sob... haha :D
nice post sob dan makasih ntar ane praktek dah :D
Absen malam ya sob

Reply
Unknown
18 Januari 2012 pukul 21.42

wow... blogger yang sangat bagus gan.. template yang enak dipandang..

Reply
Unknown
18 Januari 2012 pukul 22.54

wah mantep ane udah lihat demonya make slider keren sob kapan kapan ane mau coba

Reply
Rohis Facebook
19 Januari 2012 pukul 08.23

Black Angel Syndicate@
sama2 bro.., thx ya dah mampir... *smile

Dian18@
terima kasih..., sebebanarx pengen banget menghapus sliderx soalx i2 lah yg memberatkan blog.., tp sy gk tau....

wahid sahidu@
silahkan. *smile

Reply
Tutorial Blog
19 Januari 2012 pukul 09.02

mantap menu sharenya, makasih gan

Reply
Asis Sugianto
19 Januari 2012 pukul 09.16

wah keren nih buttom sizenya sobat...
makasih sudah di share sobat...

Reply
Anonim
19 Januari 2012 pukul 10.08

bukannya blogger sudah menyediakan button share yah? kalau saya sih mending pakai itu , biar gak ribet hehehe. atau dulu pernah juga pakai add this. tapi lumayan bikin berat, jadi milih pakai bawaan blogger.

Reply
Bisnis Online Blog
19 Januari 2012 pukul 12.41

Sepertinya perlu di coba nih sob.DEmo dulu ah hihihi.Sangat menarik.

Reply
Rohis Facebook
19 Januari 2012 pukul 12.54

Tutorial Blog@
sama2 sob... *smile

Asis Sugianto@
sama2 gan *smile

Kevin Yo@
benar banget sob..,klo dipake dua2x.., bawaan blog & button share diatas tentu akan memberatkan.., tp klo dipake salah satux sj tdk akan memberatkan... *smile

Reply
Rohis Facebook
19 Januari 2012 pukul 13.01

Bisnis Online Blog@
ada lima style, pake salah satux sj agar tdk memberatkan blog.. :)

Reply
Harun Hasibuan
19 Januari 2012 pukul 14.25

manteb gan,izin nyoba yo..... :)

Reply
Rohis Facebook
19 Januari 2012 pukul 15.04

IT-Soft Center@
silahkan... *smile

Reply
Sinto
19 Januari 2012 pukul 16.20

O-O Mantep Nih kapan2 bisa aku COba Nih Hemmm thanki You

Reply
al kahfi
19 Januari 2012 pukul 16.38

nice share,happy blogging.....:)

Reply
Armada
19 Januari 2012 pukul 17.14

banyak betul gan kodenya, pusing ngeliatnya, salam kenal gan

Reply
Rohis Facebook
19 Januari 2012 pukul 17.21

system of blog@
sama2 sobat.. *smile

al kahfi@
happy blogging juga mas Al kahfi...

Armada@
pilih sj salah satu style agar gk terlalu bnyk, hny kode CSS + HTML *smile

salam kenal juga sobat *smile

Reply
Blogger Blegedes
20 Januari 2012 pukul 00.07

Keren Kang.. dicoba-coba dulu dech... thanks dah di share... ^_^

Reply
Rohis Facebook
20 Januari 2012 pukul 07.02

Blogger Blegedes@
sama2.. *smile

Reply
Unknown
20 Januari 2012 pukul 08.12

Kayanya perlu di boormark nie tipsnya sop,makasih banyak yach.Happy blogging and happy weekend.

Reply
Rohis Facebook
20 Januari 2012 pukul 09.15

Raihan Mar'ie Ramadhan@
silahkan sob.. *smile

Reply
blog alternativ
20 Januari 2012 pukul 10.07

baru datang berkunjung sobar

Reply
Rohis Facebook
20 Januari 2012 pukul 12.22

blog alternativ@
thx bro... *smile

Reply
blog alternativ
20 Januari 2012 pukul 12.43

kujungan lagi.....

Reply
Muhammad Iqbal K
21 Januari 2012 pukul 14.12

wow kereen gan tombol sharenya... thanks buat tutorialnya :)

Reply
Black Angel Syndicate
21 Januari 2012 pukul 14.13

Absen siang sob :D
sambil baca artikel lain :D

Reply
zaenal blog
21 Januari 2012 pukul 22.15

wah, lebih unik dan familiaar nih tombol sharenya....
bkin oengunjung lebih suka untuk share di media sosialnya kalo tombolnya unik gini...

Reply
Rohis Facebook
22 Januari 2012 pukul 14.01

blog alternativ@
thx sobat *smile

Cirebon-Cyber4rt@
sama2 sobat *smile

Reply
ewrewr
22 Januari 2012 pukul 17.32

iya mass ane udah baca tuntas kok makasi yagh, BTW blum ada yg baru yagh!

Reply
cara bikin blog
9 April 2012 pukul 14.53

wah... boleh juga ni..

langsung ke TKP

Reply
THe7BLoggers
15 Juni 2012 pukul 11.07

Em mana sie mas demonya? :) wkwkwkwkkwkw mas ini bikin penasaran ajah deh.....

Reply
Rohis Facebook
15 Juni 2012 pukul 17.54

@THe7BLoggerslink demox ada diatas ko' sob.., biasa aja lah gk usah penasaran cz sdh bnyk dipake olh para blogger *smile

Reply
Anonim
17 Oktober 2014 pukul 18.13

bagus juga sih dan atraktif. tadi lihat juga hasil demonya. ok ane pelajari dulu ya. makasih. salam sahabat blogger.

Posting Komentar

Terima Kasih banyak atas saran dan kritiknya.

Sama seperti peraturan yang dibuat oleh para blogger pada umumnya.., cuma disini saya harapkan agar para pengunjung untuk lebih fokus pada artikel kami yang bertemakan Agama (Islam), khususnya untuk saudara-saudari kami yang Muslim dan Muslimah.

0. Yang OOT silahkan masuk ke menu Buku Tamu/Blogwalking!
1. Komentar yang berbau JUDI/TOGEL, Porno tidak akan di Moderasi!
2. Komentar yang berbau JUDI/TOGEL, Porno tidak akan di Moderasi!
3. Harus Sopan
4. Admin tidak meladeni Debat kusir
5. Bercanda gk boleh ada unsur pornonya dan unsur Bohongnya
6. Silahkan melampirkan link Mati, gk boleh link hidup