Myscript2010: Kode tampilan tombol share

KODE TAMPILAN TOMBOL SHARE
login ke akun blog klik tataletak dan klik tambah gadged
copy kode berikut :
pastekan kedalam gadged klik simpan selesai

<style> #social a:hover { background-color: transparent;opacity:0.7; } #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center>
 <div id="social">
 <a title="Facebook" href="https://www.facebook.com" target="_blank">  <img src="http://www.topproducerwebsite.com/images/site_defaults/generic/facebook.png" name="e902" border="0" width="30" height="30" " style="margin-right:1px;" alt="icon"/></a>   <a title="Gg Pluss" href="https://plus.google.com" target="_blank"> <img src="http://www.topproducerwebsite.com/images/site_defaults/generic/Googleplus.png" name="e902" border="0" width="30" height="30" " style="margin-right:1px;" alt="icon"/></a>   <a title="Twitter" href="https://twitter.com" target="_blank"> <img src="http://www.topproducerwebsite.com/images/site_defaults/generic/twitter.png" name="e902" border="0" width="30" height="30" " style="margin-right:1px;" alt="icon"/></a>  </div>
</center>

  <style>
ul.flatflipbuttons{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
perspective: 10000px;
}

ul.flatflipbuttons li{
margin:0;
display: inline-block;
width: 50px; /* dimensions of buttons. */
height: 50px;
margin-right: 15px; /* spacing between buttons */
background: white;
text-transform: uppercase;
text-align: center;
}

ul.flatflipbuttons li a{
display:table;
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
width: 100%;
height: 100%;
margin-bottom: 4px;
color: black;
background: #3B9DD5;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out; /* CSS3 transition. Last value is pause before transition play */
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}

ul.flatflipbuttons li:nth-of-type(1) a{
color: white;
background: #3B9DD5;
}

ul.flatflipbuttons li:nth-of-type(2) a{
background: #A1CD3A;
}

ul.flatflipbuttons li:nth-of-type(3) a{
background: #80C5EC;
}

ul.flatflipbuttons li:nth-of-type(4) a{
color: white;
background: #635746;
}

ul.flatflipbuttons li:nth-of-type(5) a{
background: #F2C96D;
}

ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}

ul.flatflipbuttons li b{ /* CSS for text beneath button */
display: block;
position: relative;
width: 100%;
opacity: 0;
-webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */
-moz-transition: all 300ms ease-out 0.2s;
transition: all 300ms ease-out 0.2s;
}


ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}


ul.flatflipbuttons li:hover a{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #c1e4ec; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}

ul.flatflipbuttons li:hover a span{
color: black; /* color of icon font onMouseover */
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}


ul.flatflipbuttons li:hover b{
opacity: 1;
}

/* CSS for 2nd menu below specifically */

ul.second li a{
background: #eee !important;
}

ul.second li a:hover{
background: #ddd !important;
}

</style>  <center>
<ul class="flatflipbuttons second"></li>
<li><a href="http://Your link FB" target="_blank"><span> <img class="expando" border="0" src="http://www.asybijela.com/images/icon_fb.png " width="50" height="50">  </span></a></li>
<li><a href="http://Your link Twitter" target="_blank"><span>  <img class="expando" border="0" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/3d-glossy-blue-orbs-icons-social-media-logos/097196-3d-glossy-blue-orb-icon-social-media-logos-twitter.png " width="50" height="50">  </span></a></li>
<li><a href="http://Your link G+" target="_blank"><span> <img class="expando" border="0" src="http://cdn.mysitemyway.com/etc-mysitemyway/webtreats/assets/posts/731/icons/glossy-blue-orb-googleplus.png " width="50" height="50"> </span></a></li>
</ul>

<style>
#facebook,#twitter,#pinterest,#linkedin{text-align:center;-o-transition: all 0.4s ease-in;-moz-transition: all 0.4s ease-in;-webkit-transition: all 0.4s ease-in;z-index: 1000;font-family:arial;width:150px;position: fixed;left:0;margin-left:-120px;border:1px solid #ffffff;background-position:top right no-repeat;padding:5px;font:15px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;}#facebook {background:-moz-linear-gradient(top,#1E90FF,#00BFFF );background: -webkit-gradient(linear, left top, left bottom, from(#001C5A), to(#001551));top:350px;}#facebook:hover,#twitter:hover,#linkedin:hover,#pinterest:hover{width:150px;opacity:1.0;margin-left:0;cursor:hand}#facebook a:hover,#facebook  a:visited,#twitter a:hover,#twitter  a:visited,#linkedin a:hover,#linkedin a:visited,#pinterest a:visited,#pinterest a:hover{text-shadow:none;color:#ffffff}#twitter {background:-moz-linear-gradient(top,#67C9E9,#029BC5);background: -webkit-gradient(linear, left top, left bottom, from(#67C9E9), to(#029BC5));top:382px;}#linkedin{background: #51A104 -moz-linear-gradient(top,#F5FFFA,#C71585);background: -webkit-gradient(linear, left top, left bottom, from(#51A104), to(#000));top:414px;}#pinterest,#mys2010 ul li{background: -moz-linear-gradient(top, #AFEEEE, #4169E1);background: -webkit-gradient(linear, left top, left bottom, from(#AF0000), to(#6B0000));}#pinterest {top:446px;}</style>  <div id='pinterest'>
<a href='https://www.pinterest.com/myscript2010/'target='_blank'>pinterest</a></div>
<div id='linkedin'>
<a href='https://www.linkedin.com/nhome/'target='_blank'>linkedin</a></div>
<div id='facebook'>
<a href='http://www.facebook.com'target='_blank'>Facebook</a></div>
<div id='twitter'>
<a href='http://twitter.com'target='_blank'>twitter</a></div>

<style>

p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

p#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

p#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

p#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

p#socialicons3 img:hover{ 
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}</style>  <p id="socialicons3">
<a href="https://www.facebook.com/learn.editing.myscript2010" target="_blank"> <img border="0" src="http://www.topproducerwebsite.com/images/site_defaults/generic/facebook.png" /></a> <a href="https://plus.google.com/u/0/101254379497511200564/posts" target="_blank"> <img border="0" src="http://www.topproducerwebsite.com/images/site_defaults/generic/Googleplus.png" /></a> <a href="https://twitter.com/myscript2010s" target="_blank"> <img border="0" src="http://www.topproducerwebsite.com/images/site_defaults/generic/twitter.png" /></a> <a href="https://www.pinterest.com/myscript2010/" target="_blank"> <img border="0" src="http://www.topproducerwebsite.com/images/site_defaults/generic/Pinterest.png" /></a> <a href="https://www.linkedin.com/nhome/" target="_blank"> <img border="0" src="http://www.topproducerwebsite.com/images/site_defaults/generic/linkedin.png" /></a> </p>

<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" href="https://www.blogger.com/null"></a> <a class="addthis_button_tweet" href="https://www.blogger.com/null"></a> <a class="addthis_button_google_plusone" g:plusone:size="medium" href="https://www.blogger.com/null"></a> <a class="addthis_counter addthis_pill_style" href="https://www.blogger.com/null"></a> </div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script> <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5156a09e76c1568f" type="text/javascript"></script>

<style>
.techprevue-fb-like-box-pure{width:250px;height:200px;border-radius:3px;position:relative;background:#fff;padding:10px}.techprevue-fb-like-box-pure,.techprevue-fb-like-box-pure:before,.techprevue-fb-like-box-pure:after{background:gray;border:2px solid aqua}.techprevue-fb-like-box-pure:before,.techprevue-fb-like-box-pure:after{position:absolute;content:"";bottom:-3px;left:2px;right:3px;height:3px;border-top:none}.techprevue-fb-like-box-pure:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #1E90FF}
</style><br />
<div class="techprevue-fb-like-box-pure">
<div style="height: 155px; overflow: hidden;">
<div class="g-plus" data-action="followers" data-height="350" data-href="https://plus.google.com/u/0/101254379497511200564/posts" data-source="blogger:blog:followers" data-width="400">
</div>
<script type="text/javascript">
      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'http://yourjavascript.com/904315511712/google-apis-mys2010.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script></div>
</div>

 <style>
#Mys2010{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#Mys2010 a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#Mys2010 li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#Mys2010 .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeq4DlTrVKF1mZBMjfi2pXym5hzKugGXKBN9TLdxsMXB_qM-O5UvK13ky8yVbkRDj_Pg-4KeQSBKjmhEo45mYIfMohuIxdKz3r7H8yw9I-PK82vWXvS0LH-x_7rriLr2RJG6-25My7pyc/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#Mys2010 li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#Mys2010 .icon{overflow:hidden; color:#fafafa;}
#Mys2010 .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#Mys2010 .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#Mys2010 .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#Mys2010 .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#Mys2010 .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#Mys2010 li:hover .icon,
.touch #Mys2010 li .icon{width:210px;}
.touch #Mys2010 li .facebook, #Mys2010 li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #Mys2010 li .twitter, #Mys2010 li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #Mys2010 li .googleplus, #Mys2010 li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #Mys2010 li .pinterest, #Mys2010 li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #Mys2010 li .rss, #Mys2010 li:hover .rss{background-color:rgba(255,102,0,1);}
</style> <ul id="Mys2010">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="Link FB">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="Link Twitter">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="Link G +">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="Link Pinterest">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/~u/17068674145136893494">Subscribe with RSS</a></li>
</ul>

All Sources
edited by. Myscript2010

Get Code Test Script

Myscript2010

Menu

Menu Tab

Pages

Kode tampilan tombol share

Random Posts

Popular Posts

Blog Archive

M2010