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("http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfjG3P4w7I/AAAAAAAAB3k/yjkmCOax0yc/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("http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfjIshr9pI/AAAAAAAAB3w/UnosHLVx3co/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("http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfjG3P4w7I/AAAAAAAAB3k/yjkmCOax0yc/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="http://4.bp.blogspot.com/_b8IA1ajBJG8/TSfd22PSeLI/AAAAAAAAB3M/ik_9DA-vzEk/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="http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfd5p1h2kI/AAAAAAAAB3c/MbeKBRValYk/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="http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfd4XN-B_I/AAAAAAAAB3U/RWDByrttOSc/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="http://4.bp.blogspot.com/_b8IA1ajBJG8/TSfd2KgvGkI/AAAAAAAAB3I/wgYrRUzkPWQ/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="http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfd46l_gAI/AAAAAAAAB3Y/ZET5rqbQJMw/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="http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfd3k4ZNnI/AAAAAAAAB3Q/UIJ0qSGEaHg/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="http://4.bp.blogspot.com/_b8IA1ajBJG8/TSfd6JqbBPI/AAAAAAAAB3g/C7TjBqdR1m0/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="http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfd0lvepwI/AAAAAAAAB3E/jdZrJrv-1yM/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("http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfjG3P4w7I/AAAAAAAAB3k/yjkmCOax0yc/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("http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfjIshr9pI/AAAAAAAAB3w/UnosHLVx3co/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="http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfc4hlSkGI/AAAAAAAAB3A/PKn_KP6sOQI/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="http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfc1xv38gI/AAAAAAAAB2w/lwdzgwzlC6I/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="http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfc3acrxMI/AAAAAAAAB24/t1KAd8-RvWU/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="http://1.bp.blogspot.com/_b8IA1ajBJG8/TSfc0ni5IlI/AAAAAAAAB2o/8voYpZbQST4/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="http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfc3zp3I3I/AAAAAAAAB28/Hy-QUfKp2DQ/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="http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfc1TY3h1I/AAAAAAAAB2s/Mygg8K9VTac/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="http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfcz_OapJI/AAAAAAAAB2k/ZbQmKQIbDXA/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="http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfc2jCW-hI/AAAAAAAAB20/CLBoYPjxGf4/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("http://4.bp.blogspot.com/_b8IA1ajBJG8/TSfjHZG0d9I/AAAAAAAAB3o/Y0ZzNB104OE/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='http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfjJPlaZjI/AAAAAAAAB30/CEjZh4qqaHE/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="http://2.bp.blogspot.com/_b8IA1ajBJG8/TScgNAQmizI/AAAAAAAAB2U/2VkbLGhpa4M/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="http://1.bp.blogspot.com/_b8IA1ajBJG8/TScgIZerhzI/AAAAAAAAB2E/ST_gxGLJohc/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="http://2.bp.blogspot.com/_b8IA1ajBJG8/TScgOkdfqSI/AAAAAAAAB2c/5F5RUTzVWPE/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="http://3.bp.blogspot.com/_b8IA1ajBJG8/TScgL4XoGDI/AAAAAAAAB2Q/DWnz6QGT4j0/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="http://3.bp.blogspot.com/_b8IA1ajBJG8/TScgPMjjl8I/AAAAAAAAB2g/weIEI7h1PJw/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="http://4.bp.blogspot.com/_b8IA1ajBJG8/TScgJyQ-2lI/AAAAAAAAB2M/-ToPBuz9__U/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="http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfjIL8FD-I/AAAAAAAAB3s/t31l6-BAi44/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("http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfjG3P4w7I/AAAAAAAAB3k/yjkmCOax0yc/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("http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfjIshr9pI/AAAAAAAAB3w/UnosHLVx3co/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="http://2.bp.blogspot.com/_b8IA1ajBJG8/TScgNAQmizI/AAAAAAAAB2U/2VkbLGhpa4M/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="http://1.bp.blogspot.com/_b8IA1ajBJG8/TScgIZerhzI/AAAAAAAAB2E/ST_gxGLJohc/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="http://2.bp.blogspot.com/_b8IA1ajBJG8/TScgOkdfqSI/AAAAAAAAB2c/5F5RUTzVWPE/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="http://3.bp.blogspot.com/_b8IA1ajBJG8/TScgL4XoGDI/AAAAAAAAB2Q/DWnz6QGT4j0/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="http://3.bp.blogspot.com/_b8IA1ajBJG8/TScgPMjjl8I/AAAAAAAAB2g/weIEI7h1PJw/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="http://4.bp.blogspot.com/_b8IA1ajBJG8/TScgJyQ-2lI/AAAAAAAAB2M/-ToPBuz9__U/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("http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfjG3P4w7I/AAAAAAAAB3k/yjkmCOax0yc/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("http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfjIshr9pI/AAAAAAAAB3w/UnosHLVx3co/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="http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfc4hlSkGI/AAAAAAAAB3A/PKn_KP6sOQI/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="http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfc1xv38gI/AAAAAAAAB2w/lwdzgwzlC6I/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="http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfc3acrxMI/AAAAAAAAB24/t1KAd8-RvWU/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="http://1.bp.blogspot.com/_b8IA1ajBJG8/TSfc0ni5IlI/AAAAAAAAB2o/8voYpZbQST4/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="http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfc3zp3I3I/AAAAAAAAB28/Hy-QUfKp2DQ/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="http://2.bp.blogspot.com/_b8IA1ajBJG8/TSfc1TY3h1I/AAAAAAAAB2s/Mygg8K9VTac/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="http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfcz_OapJI/AAAAAAAAB2k/ZbQmKQIbDXA/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="http://3.bp.blogspot.com/_b8IA1ajBJG8/TSfc2jCW-hI/AAAAAAAAB20/CLBoYPjxGf4/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.

18 Januari 2012 14.01

Mas biki deonya dong!

Salam

18 Januari 2012 14.16

baggus sob tutorialnya, kapan2 dicoba deh.. :)

18 Januari 2012 14.24

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

HEЯRY@
silahkan sobat.. *smile

18 Januari 2012 14.51

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

18 Januari 2012 15.51

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

18 Januari 2012 17.10

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

18 Januari 2012 17.12

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

18 Januari 2012 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/

18 Januari 2012 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..,

18 Januari 2012 20.52

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

18 Januari 2012 21.42

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

18 Januari 2012 22.54

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

19 Januari 2012 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

19 Januari 2012 09.02

mantap menu sharenya, makasih gan

19 Januari 2012 09.16

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

19 Januari 2012 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.

19 Januari 2012 12.41

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

19 Januari 2012 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

19 Januari 2012 13.01

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

19 Januari 2012 14.25

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

19 Januari 2012 15.04

IT-Soft Center@
silahkan... *smile

19 Januari 2012 16.20

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

19 Januari 2012 16.38

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

19 Januari 2012 17.14

banyak betul gan kodenya, pusing ngeliatnya, salam kenal gan

19 Januari 2012 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

20 Januari 2012 00.07

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

20 Januari 2012 07.02

Blogger Blegedes@
sama2.. *smile

20 Januari 2012 08.12

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

20 Januari 2012 09.15

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

20 Januari 2012 10.07

baru datang berkunjung sobar

20 Januari 2012 12.22

blog alternativ@
thx bro... *smile

20 Januari 2012 12.43

kujungan lagi.....

21 Januari 2012 14.12

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

21 Januari 2012 14.13

Absen siang sob :D
sambil baca artikel lain :D

21 Januari 2012 22.15

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

22 Januari 2012 14.01

blog alternativ@
thx sobat *smile

Cirebon-Cyber4rt@
sama2 sobat *smile

22 Januari 2012 17.32

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

9 April 2012 14.53

wah... boleh juga ni..

langsung ke TKP

15 Juni 2012 11.07

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

15 Juni 2012 17.54

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

17 Oktober 2014 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