Mint Share Mini Style

Mint Share Mini Style Publish By PalmaHutabarat

by Palma Hutabarat92

HTML

<!-- 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...

CSS

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

   ...