» » CARA MEMBUAT New Awesome Metro Style social media DI BLOGSPOT

CARA MEMBUAT New Awesome Metro Style social media DI BLOGSPOT

Ivankgribatako
Add Comment
WIDGET SOSIAL MEDIA
Minggu, 27 Desember 2015

New Awesome Metro Style social media for blogger 2016

ada 3 cara pasang widget new metro style sosial media
berikut contoh gambarnya,..

1. ROCKET METRO STYLE SOSIAL MEDIA

















<div class="metro-social metro-height" style="width:350px;">

  <li class="metro-facebook"><iframe class="fbhover" src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/New-Trick-Tips-542809662487405/?ref=bookmarks&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=408184442589211" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:65px;" allowtransparency="true"></iframe></li>

  <li class="pinterest-one"><div class="pinteresthover"><a data-pin-do="buttonFollow" href="http://pinterest.com/caslikanoglu/pins/">Follow</a><script type="text/javascript">
(function(d){
  var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
  p.type = 'text/javascript';
  p.async = true;
  p.src = '//assets.pinterest.com/js/pinit.js';
  f.parentNode.insertBefore(p, f);
}(document));
</script></div></li>

  <li class="metro-googleplus"><div class="googlehover">
<div class="g-follow" data-annotation="vertical-bubble" data-height="15" data-href="//plus.google.com/110561987544809067837" data-rel="publisher"></div></div><script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script></li>
       <li class="metro-linkedin"><a  target="_blank" title="Connect to Linkedin profile" alt="Connect to Linkedin profile" href="http://www.linkedin.com/"></a></li>
         <li class="twitter-one"><a href="https://twitter.com/ivankGribatako" class="twitter-follow-button twitterhover" data-show-count="true" data-show-screen-name="false">Follow @digitalhubinc</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li>

          <li><a class="metro-rss" target="_blank" href="http://feedburner.google.com/"></a></li>

  <li class="youtube-one"><div class="googlehover"><div class="g-ytsubscribe" data-channel="windows8tech" data-layout="default"></div></div></li>
    
 </div>

<style type="text/css">.metro-social {
 padding-top:10px;
 padding-bottom:10px;
 }

.metro-height-extend {
 height:145px;
 }

.metro-height {
 height:212px;
 }

.metro-social li {
 position:relative;
 cursor:pointer;
 list-style:none;
 margin:1px;
 }

.metro-social .metro-facebook,.metro-twitter,.metro-googleplus,.metro-pinterest,.metro-linkedin,.metro-youtube,.metro-rss,.rss-feed,.googleplus-one,.twitter-one,.linkedin-one,.pinterest-one,.twitter-one-extend,.pinterest-one-extend,.youtube-one,.twitter-extend-one { 
 float:left;
 margin:1px;
 position:relative;
 display:block;
 }

.metro-social .metro-facebook {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZBjp4Op2cRiGy_LicWSD9H3-DgUdfIeUY3xxAWasUflDxEpbqNwMNaQYDPKQeb_EMHwTz4wCQyWmjlia4jPo3Uq9-dXFsdxKQWfazAECMZE7zsZ9KgUaCNaB17Sxwrd3UB2U6wnMiV58/h120/facebook_128.png) no-repeat center center #1f69b3;
 width:47%;
 height:140px;
 padding:0;
 }

.metro-social .metro-twitter {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirm8q3jvJuV-coLcyiwhUCXS6J4pDYHBVFO1_sncrc4tJKMdgykIGLkZW5XHS_zuhXB-kcp3UMXZF6d1r6i71JrlDr0lLwzp-GkiPEsTr-4QbUQONGiM5kS2tNCF56kCzmy0WpweyH7q4/h120/twitter_60.png) no-repeat center center #43b3e5;
 width:23%;
 height:69px;
 padding:0;
 }

.metro-social .metro-googleplus {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjo3ySJ9vxnL_JvZxngWtaOwlCd_OJ7nkEDuLTOeFU04SrQ79W-Th73H6-ZfNYIeZjVmLxBDFff8zBPRvWcNhppuX2ZJWWY_qkiFq82eGsl7iaTjvYUuba2deGt_R_YzRUgiwTzICu2gI/h120/googleplus_60.png) no-repeat center center #da4a38;
 width:23.3%;
 height:69px;
 padding:0;
 }

.metro-social .metro-pinterest {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWNC1cstv3JJxiBYwOJvAnN0FAKnx_r_sgwkqTv76ojADGkWGHBueLQqK-_FEEcbFOgBADl4ajUNkVY7dCvNoYf2As8sJp3PJ31UqVdg0ImjMrn361imJMHUCDWorjqIsWJj_5wJkYOzU/h120/pinterest_60.png) no-repeat center center #d73532;
 width:23.2%;
 height:69px;
 padding:0;
 }

.metro-social .metro-linkedin {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvZec4_WF_OfXKVu89z8iyuYAE8M4IjT-qACDAgpqG_c-5knf0amBIfuvVDZXr8Y1PKOm1nOIsEfqRl03XmYya6xxqK_1d0AyM4bK2W9sYMSckHyPcw-LC9dHWGOFPMeVX3T3HgfttYfU/h120/linkedin_60.png) no-repeat center center #0097bd;
 width:23%;
 height:69px;
 padding:0;
 }

.metro-social .metro-youtube { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4PmS0Zk17zUDX5Q5l0IE_qfvo1zSOT_JlVyO3e9DQjc_3FQBtI9mDg40XvvVqu9YFecmhltiH6lGEvcejIbGsgzP9qG2cNJft8dDsm0UNGZHN8JF2i7mo3aAbmeUVkTbeApuczYsuCCU/h120/youtube_60.png) no-repeat center center #e64a41; width:47%; height:69px; padding:0; }

.metro-social .metro-rss {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHd7xgBCeDQoJ1jo2ZMFK1RXRiqrsqfGZnYKTJaPIoa2hTNUZjoTpvSo7IQJwjJ9D8PjvbRPH6C3gYWWNvLreXmxOcwEpgQfoNDplf7cCOdQb93WpaBRzQM3zCje4LYy5NDCYvigcKNEo/h120/rss_60.png) no-repeat center center #e9a01c;
 width:47%;
 height:69px;
 padding:0;
 }

.metro-social .rss-feed {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHd7xgBCeDQoJ1jo2ZMFK1RXRiqrsqfGZnYKTJaPIoa2hTNUZjoTpvSo7IQJwjJ9D8PjvbRPH6C3gYWWNvLreXmxOcwEpgQfoNDplf7cCOdQb93WpaBRzQM3zCje4LYy5NDCYvigcKNEo/h120/rss_60.png) no-repeat center center #e9a01c;
 width:95%;
 height:69px;
 padding:0;
 }

.metro-social .youtube-one { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4PmS0Zk17zUDX5Q5l0IE_qfvo1zSOT_JlVyO3e9DQjc_3FQBtI9mDg40XvvVqu9YFecmhltiH6lGEvcejIbGsgzP9qG2cNJft8dDsm0UNGZHN8JF2i7mo3aAbmeUVkTbeApuczYsuCCU/h120/youtube_60.png) no-repeat center center #e64a41; width:94.4%; height:69px; padding:0; }dding:0; }

.metro-social .googleplus-one { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjo3ySJ9vxnL_JvZxngWtaOwlCd_OJ7nkEDuLTOeFU04SrQ79W-Th73H6-ZfNYIeZjVmLxBDFff8zBPRvWcNhppuX2ZJWWY_qkiFq82eGsl7iaTjvYUuba2deGt_R_YzRUgiwTzICu2gI/h120/googleplus_60.png) no-repeat center center #da4a38; width:47%; height:69px; padding:0; }
  
.metro-social .twitter-one {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirm8q3jvJuV-coLcyiwhUCXS6J4pDYHBVFO1_sncrc4tJKMdgykIGLkZW5XHS_zuhXB-kcp3UMXZF6d1r6i71JrlDr0lLwzp-GkiPEsTr-4QbUQONGiM5kS2tNCF56kCzmy0WpweyH7q4/h120/twitter_60.png) no-repeat center center #43b3e5;
 width:47%;
 height:69px;
 padding:0;
 }

.metro-social .twitter-one-extend {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirm8q3jvJuV-coLcyiwhUCXS6J4pDYHBVFO1_sncrc4tJKMdgykIGLkZW5XHS_zuhXB-kcp3UMXZF6d1r6i71JrlDr0lLwzp-GkiPEsTr-4QbUQONGiM5kS2tNCF56kCzmy0WpweyH7q4/h120/twitter_60.png) no-repeat center center #43b3e5;
 width:47%;
 height:140px;
 padding:0;
 }

.metro-social .twitter-extend-one {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirm8q3jvJuV-coLcyiwhUCXS6J4pDYHBVFO1_sncrc4tJKMdgykIGLkZW5XHS_zuhXB-kcp3UMXZF6d1r6i71JrlDr0lLwzp-GkiPEsTr-4QbUQONGiM5kS2tNCF56kCzmy0WpweyH7q4/h120/twitter_60.png) no-repeat center center #43b3e5;
 width:95%;
 height:69px;
 padding:0;
 }

.metro-social .linkedin-one {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvZec4_WF_OfXKVu89z8iyuYAE8M4IjT-qACDAgpqG_c-5knf0amBIfuvVDZXr8Y1PKOm1nOIsEfqRl03XmYya6xxqK_1d0AyM4bK2W9sYMSckHyPcw-LC9dHWGOFPMeVX3T3HgfttYfU/h120/linkedin_60.png) no-repeat center center #0097bd;
 width:47%;
 height:69px;
 padding:0;
 }

.metro-social .pinterest-one {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWNC1cstv3JJxiBYwOJvAnN0FAKnx_r_sgwkqTv76ojADGkWGHBueLQqK-_FEEcbFOgBADl4ajUNkVY7dCvNoYf2As8sJp3PJ31UqVdg0ImjMrn361imJMHUCDWorjqIsWJj_5wJkYOzU/h120/pinterest_60.png) no-repeat center center #d73532;
 width:47%;
 height:69px;
 padding:0;
 }

.metro-social .pinterest-one-extend {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWNC1cstv3JJxiBYwOJvAnN0FAKnx_r_sgwkqTv76ojADGkWGHBueLQqK-_FEEcbFOgBADl4ajUNkVY7dCvNoYf2As8sJp3PJ31UqVdg0ImjMrn361imJMHUCDWorjqIsWJj_5wJkYOzU/h120/pinterest_60.png) no-repeat center center #d73532;
 width:95%;
 height:69px;
 padding:0;
 }

.metro-social li:hover {
 -webkit-opacity: 0.9;
 -moz-opacity: 0.9;
 opacity: 0.9;
 }

.metro-social .fbhover, .twitterhover, .googlehover, .linkedinhover, .pinteresthover{
 visibility:hidden;
 opacity:0;
 transition:visibility 2.5s linear 0.5s,opacity 0.5s linear;
 }
.metro-facebook:hover .fbhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.metro-twitter:hover .twitterhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.twitter-one-extend:hover .twitterhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.metro-googleplus:hover .googlehover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.metro-youtube:hover .googlehover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.youtube-one:hover .googlehover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.googleplus-one:hover .googlehover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.twitter-one:hover .twitterhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.twitter-extend-one:hover .twitterhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.metro-linkedin:hover .linkedinhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.linkedin-one:hover .linkedinhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.metro-pinterest:hover .pinteresthover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.pinterest-one:hover .pinteresthover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.pinterest-one-extend:hover .pinteresthover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }</style>
2. MINI ROCKET METRO STYLE SOSIAL MEDIA

















<div class="metro-social metro-height" style="width:350px;">

  <li class="metro-facebook"><iframe class="fbhover" src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/New-Trick-Tips-542809662487405/?ref=bookmarks&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=408184442589211" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:65px;" allowtransparency="true"></iframe></li>

  <li class="pinterest-one"><div class="pinteresthover"><a data-pin-do="buttonFollow" href="http://pinterest.com/">Follow</a><script type="text/javascript">
(function(d){
  var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
  p.type = 'text/javascript';
  p.async = true;
  p.src = '//assets.pinterest.com/js/pinit.js';
  f.parentNode.insertBefore(p, f);
}(document));
</script></div></li>

  <li class="metro-googleplus"><div class="googlehover">
<div class="g-follow" data-annotation="vertical-bubble" data-height="15" data-href="//plus.google.com/110561987544809067837" data-rel="publisher"></div></div><script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script></li>
         <li class="metro-twitter"><a href="https://twitter.com/ivankGribatako" class="twitter-follow-button twitterhover" data-show-count="false" data-show-screen-name="false">Follow @digitalhubinc</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li>

          <li><a class="metro-rss" target="_blank" href="http://feedburner.google.com/"></a></li>

  <li class="metro-youtube"><div class="googlehover"><div class="g-ytsubscribe" data-channel="windows8tech" data-layout="default"></div></div></li>

 </div>
<style type="text/css">.metro-social {
 padding-top:10px;
 padding-bottom:10px;
 }

.metro-height-extend {
 height:145px;
 }

.metro-height {
 height:212px;
 }

.metro-social li {
 position:relative;
 cursor:pointer;
 list-style:none;
 margin:1px;
 }

.metro-social .metro-facebook,.metro-twitter,.metro-googleplus,.metro-pinterest,.metro-linkedin,.metro-youtube,.metro-rss,.rss-feed,.googleplus-one,.twitter-one,.linkedin-one,.pinterest-one,.twitter-one-extend,.pinterest-one-extend,.youtube-one,.twitter-extend-one { 
 float:left;
 margin:1px;
 position:relative;
 display:block;
 }

.metro-social .metro-facebook {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZBjp4Op2cRiGy_LicWSD9H3-DgUdfIeUY3xxAWasUflDxEpbqNwMNaQYDPKQeb_EMHwTz4wCQyWmjlia4jPo3Uq9-dXFsdxKQWfazAECMZE7zsZ9KgUaCNaB17Sxwrd3UB2U6wnMiV58/h120/facebook_128.png) no-repeat center center #1f69b3;
 width:47%;
 height:140px;
 padding:0;
 }

.metro-social .metro-twitter {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirm8q3jvJuV-coLcyiwhUCXS6J4pDYHBVFO1_sncrc4tJKMdgykIGLkZW5XHS_zuhXB-kcp3UMXZF6d1r6i71JrlDr0lLwzp-GkiPEsTr-4QbUQONGiM5kS2tNCF56kCzmy0WpweyH7q4/h120/twitter_60.png) no-repeat center center #43b3e5;
 width:23%;
 height:69px;
 padding:0;
 }

.metro-social .metro-googleplus {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjo3ySJ9vxnL_JvZxngWtaOwlCd_OJ7nkEDuLTOeFU04SrQ79W-Th73H6-ZfNYIeZjVmLxBDFff8zBPRvWcNhppuX2ZJWWY_qkiFq82eGsl7iaTjvYUuba2deGt_R_YzRUgiwTzICu2gI/h120/googleplus_60.png) no-repeat center center #da4a38;
 width:23.3%;
 height:69px;
 padding:0;
 }

.metro-social .metro-pinterest {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWNC1cstv3JJxiBYwOJvAnN0FAKnx_r_sgwkqTv76ojADGkWGHBueLQqK-_FEEcbFOgBADl4ajUNkVY7dCvNoYf2As8sJp3PJ31UqVdg0ImjMrn361imJMHUCDWorjqIsWJj_5wJkYOzU/h120/pinterest_60.png) no-repeat center center #d73532;
 width:23.2%;
 height:69px;
 padding:0;
 }

.metro-social .metro-linkedin {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvZec4_WF_OfXKVu89z8iyuYAE8M4IjT-qACDAgpqG_c-5knf0amBIfuvVDZXr8Y1PKOm1nOIsEfqRl03XmYya6xxqK_1d0AyM4bK2W9sYMSckHyPcw-LC9dHWGOFPMeVX3T3HgfttYfU/h120/linkedin_60.png) no-repeat center center #0097bd;
 width:23%;
 height:69px;
 padding:0;
 }

.metro-social .metro-youtube { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4PmS0Zk17zUDX5Q5l0IE_qfvo1zSOT_JlVyO3e9DQjc_3FQBtI9mDg40XvvVqu9YFecmhltiH6lGEvcejIbGsgzP9qG2cNJft8dDsm0UNGZHN8JF2i7mo3aAbmeUVkTbeApuczYsuCCU/h120/youtube_60.png) no-repeat center center #e64a41; width:47%; height:69px; padding:0; }

.metro-social .metro-rss {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHd7xgBCeDQoJ1jo2ZMFK1RXRiqrsqfGZnYKTJaPIoa2hTNUZjoTpvSo7IQJwjJ9D8PjvbRPH6C3gYWWNvLreXmxOcwEpgQfoNDplf7cCOdQb93WpaBRzQM3zCje4LYy5NDCYvigcKNEo/h120/rss_60.png) no-repeat center center #e9a01c;
 width:47%;
 height:69px;
 padding:0;
 }

.metro-social .rss-feed {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHd7xgBCeDQoJ1jo2ZMFK1RXRiqrsqfGZnYKTJaPIoa2hTNUZjoTpvSo7IQJwjJ9D8PjvbRPH6C3gYWWNvLreXmxOcwEpgQfoNDplf7cCOdQb93WpaBRzQM3zCje4LYy5NDCYvigcKNEo/h120/rss_60.png) no-repeat center center #e9a01c;
 width:95%;
 height:69px;
 padding:0;
 }

.metro-social .youtube-one { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4PmS0Zk17zUDX5Q5l0IE_qfvo1zSOT_JlVyO3e9DQjc_3FQBtI9mDg40XvvVqu9YFecmhltiH6lGEvcejIbGsgzP9qG2cNJft8dDsm0UNGZHN8JF2i7mo3aAbmeUVkTbeApuczYsuCCU/h120/youtube_60.png) no-repeat center center #e64a41; width:94.4%; height:69px; padding:0; }dding:0; }

.metro-social .googleplus-one { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjo3ySJ9vxnL_JvZxngWtaOwlCd_OJ7nkEDuLTOeFU04SrQ79W-Th73H6-ZfNYIeZjVmLxBDFff8zBPRvWcNhppuX2ZJWWY_qkiFq82eGsl7iaTjvYUuba2deGt_R_YzRUgiwTzICu2gI/h120/googleplus_60.png) no-repeat center center #da4a38; width:47%; height:69px; padding:0; }
  
.metro-social .twitter-one {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirm8q3jvJuV-coLcyiwhUCXS6J4pDYHBVFO1_sncrc4tJKMdgykIGLkZW5XHS_zuhXB-kcp3UMXZF6d1r6i71JrlDr0lLwzp-GkiPEsTr-4QbUQONGiM5kS2tNCF56kCzmy0WpweyH7q4/h120/twitter_60.png) no-repeat center center #43b3e5;
 width:47%;
 height:69px;
 padding:0;
 }

.metro-social .twitter-one-extend {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirm8q3jvJuV-coLcyiwhUCXS6J4pDYHBVFO1_sncrc4tJKMdgykIGLkZW5XHS_zuhXB-kcp3UMXZF6d1r6i71JrlDr0lLwzp-GkiPEsTr-4QbUQONGiM5kS2tNCF56kCzmy0WpweyH7q4/h120/twitter_60.png) no-repeat center center #43b3e5;
 width:47%;
 height:140px;
 padding:0;
 }

.metro-social .twitter-extend-one {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirm8q3jvJuV-coLcyiwhUCXS6J4pDYHBVFO1_sncrc4tJKMdgykIGLkZW5XHS_zuhXB-kcp3UMXZF6d1r6i71JrlDr0lLwzp-GkiPEsTr-4QbUQONGiM5kS2tNCF56kCzmy0WpweyH7q4/h120/twitter_60.png) no-repeat center center #43b3e5;
 width:95%;
 height:69px;
 padding:0;
 }

.metro-social .linkedin-one {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvZec4_WF_OfXKVu89z8iyuYAE8M4IjT-qACDAgpqG_c-5knf0amBIfuvVDZXr8Y1PKOm1nOIsEfqRl03XmYya6xxqK_1d0AyM4bK2W9sYMSckHyPcw-LC9dHWGOFPMeVX3T3HgfttYfU/h120/linkedin_60.png) no-repeat center center #0097bd;
 width:47%;
 height:69px;
 padding:0;
 }

.metro-social .pinterest-one {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWNC1cstv3JJxiBYwOJvAnN0FAKnx_r_sgwkqTv76ojADGkWGHBueLQqK-_FEEcbFOgBADl4ajUNkVY7dCvNoYf2As8sJp3PJ31UqVdg0ImjMrn361imJMHUCDWorjqIsWJj_5wJkYOzU/h120/pinterest_60.png) no-repeat center center #d73532;
 width:47%;
 height:69px;
 padding:0;
 }

.metro-social .pinterest-one-extend {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWNC1cstv3JJxiBYwOJvAnN0FAKnx_r_sgwkqTv76ojADGkWGHBueLQqK-_FEEcbFOgBADl4ajUNkVY7dCvNoYf2As8sJp3PJ31UqVdg0ImjMrn361imJMHUCDWorjqIsWJj_5wJkYOzU/h120/pinterest_60.png) no-repeat center center #d73532;
 width:95%;
 height:69px;
 padding:0;
 }

.metro-social li:hover {
 -webkit-opacity: 0.9;
 -moz-opacity: 0.9;
 opacity: 0.9;
 }

.metro-social .fbhover, .twitterhover, .googlehover, .linkedinhover, .pinteresthover{
 visibility:hidden;
 opacity:0;
 transition:visibility 2.5s linear 0.5s,opacity 0.5s linear;
 }
.metro-facebook:hover .fbhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.metro-twitter:hover .twitterhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.twitter-one-extend:hover .twitterhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.metro-googleplus:hover .googlehover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.metro-youtube:hover .googlehover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.youtube-one:hover .googlehover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.googleplus-one:hover .googlehover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.twitter-one:hover .twitterhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.twitter-extend-one:hover .twitterhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.metro-linkedin:hover .linkedinhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.linkedin-one:hover .linkedinhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.metro-pinterest:hover .pinteresthover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.pinterest-one:hover .pinteresthover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.pinterest-one-extend:hover .pinteresthover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }</style>
3. CIRCLE METRO STYLE SOSIAL MEDIA





















<div class="metro-social metro-height" style="width:350px;">

  <li class="metro-facebook"><iframe class="fbhover" src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/New-Trick-Tips-542809662487405/?ref=bookmarks&amp;send=false&amp;layout=box_count&amp;width=450&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;appId=408184442589211" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:65px;" allowtransparency="true"></iframe></li>

  <li class="pinterest-one"><div class="pinteresthover"><a data-pin-do="buttonFollow" href="http://pinterest.com/">Follow</a><script type="text/javascript">
(function(d){
  var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
  p.type = 'text/javascript';
  p.async = true;
  p.src = '//assets.pinterest.com/js/pinit.js';
  f.parentNode.insertBefore(p, f);
}(document));
</script></div></li>

  <li class="metro-googleplus"><div class="googlehover">
<div class="g-follow" data-annotation="vertical-bubble" data-height="15" data-href="//plus.google.com/110561987544809067837" data-rel="publisher"></div></div><script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script></li>
       <li class="metro-linkedin"><a  target="_blank" title="Connect to Linkedin profile" alt="Connect to Linkedin profile" href="http://www.linkedin.com/"></a></li>
         <li class="twitter-one"><a href="https://twitter.com/ivankGribatako" class="twitter-follow-button twitterhover" data-show-count="true" data-show-screen-name="false">Follow @digitalhubinc</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li>

          <li><a class="metro-rss" target="_blank" href="http://feedburner.google.com/"></a></li>

  <li class="youtube-one"><div class="googlehover"><div class="g-ytsubscribe" data-channel="windows8tech" data-layout="default"></div></div></li>
    
</div><style type="text/css">

.metro-social {
 padding-top:10px;
 padding-bottom:10px;
 }

.metro-height-extend {
 height:145px;
 }

.metro-height {
 height:212px;
 }

.metro-social li {
 position:relative;
 cursor:pointer;
 list-style:none;
 margin:1px;
 }

.metro-social .metro-facebook,.metro-twitter,.metro-googleplus,.metro-pinterest,.metro-linkedin,.metro-youtube,.metro-rss,.rss-feed,.googleplus-one,.twitter-one,.linkedin-one,.pinterest-one,.twitter-one-extend,.pinterest-one-extend,.youtube-one,.twitter-extend-one { 
 float:left;
 margin:1px;
 position:relative;
 display:block;
 }

.metro-social .metro-facebook {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3j82YHI0Jx4ph3cpLGW-wQL6wAunuNADduatK22W855HRz3_PNKxShH0g3FX8uUpaa68SkGux2NMOwDljayZ2xDdHTglsv7obgqYDlmzuIEhnlBUAhcWeOZ9I-fwbOH7lsQhsdJrCjT8/h120/facebook.png) no-repeat center center #1f69b3;
 width:47%;
 height:140px;
 padding:0;
 }

.metro-social .metro-twitter {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXuDPuukoZN8uNM85B75_puKio94LDrRmx55mu5L7v4zrQTcL5MhqK7rnu2DU9Xm_8hybSjp2PwbXYX_7WmoeAl-lHoDTHY4HkV4nGpcJA-G5SVzByiK876F0hbqUoTdLO2Ugb_0FqjJo/h120/twitter.png) no-repeat center center #43b3e5;
 width:23%;
 height:69px;
 padding:0;
 }

.metro-social .metro-googleplus {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ZjW8p83U9e5tXR8bso0jJRcFKiY9XpzdTXuNC_Pzbm4gAx1w2xgI2RiLp0jeaDxMS4xZ_8MOk8cSHQXh3IhjBwn1nV_uxd2nMSHX-RI5KJuebcq7ksIR6PZpTv8ShoDxICSG_KoKKQw/h120/google_plus.png) no-repeat center center #da4a38;
 width:23.3%;
 height:69px;
 padding:0;
 }

.metro-social .metro-pinterest {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMKK-XW3_mUWFKaFV_ZfFvWWTGxXgfwhStqMfJsB3kr6Cd8XMwwyBEsDzsOUzr2VBqebrRmQrBVtdNrAlEU3buDB9tuXFzRQNkRXGPYmYANWNMroxGlNjOelnul9ASegqimq64fIfu5yg/h120/pinterest.png) no-repeat center center #d73532;
 width:23.2%;
 height:69px;
 padding:0;
 }

.metro-social .metro-linkedin {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHPC4R54HDyebEF5JOowyArdVbho_0w4_hH_iZ0uqYVRIDqGY9db8g8MvYNuSG3zHRSBrlG6gRD1iwt3x30e__Wyr_3JCRdktdd0vdr6di9tAQFHPQrJQhT5rnx7prPKxAUBoAjA7rW8Y/h120/linkedin.png) no-repeat center center #0097bd;
 width:23%;
 height:69px;
 padding:0;
 }

.metro-social .metro-youtube {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8XSDyGo0lf2SxVjhsjmcc6lcsmkAL-q572q8RYPbJapWKadgKuQHCP1kdm6tteOKzTy5qb9OUlDzC-UgZcBidx5yYvMMKZ1A9zmafOKfu7P-B0W4iVhzrjabgBKhmEzIlrLP0bzROJt0/h120/youtube.png) no-repeat center center #e64a41;
 width:47%;
 height:69px;
 padding:0;
 }

.metro-social .metro-rss {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQCRKYSFehkJ0Cj366XQPrRkWiTXMgOX6iAEcESvNMAfU9nYEVspdWy0ZkLkzkSWkTKvpvOilzoBNHuzZL1yN0El1SZHllE0rWrjweCTW7RWygr-kGsLG_7-3nEh1EXvRlSo_CGLPmNb0/h120/rss.png) no-repeat center center #e9a01c;
 width:47%;
 height:69px;
 padding:0;
 }

.metro-social .rss-feed {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQCRKYSFehkJ0Cj366XQPrRkWiTXMgOX6iAEcESvNMAfU9nYEVspdWy0ZkLkzkSWkTKvpvOilzoBNHuzZL1yN0El1SZHllE0rWrjweCTW7RWygr-kGsLG_7-3nEh1EXvRlSo_CGLPmNb0/h120/rss.png) no-repeat center center #e9a01c;
 width:95%;
 height:69px;
 padding:0;
 }

.metro-social .youtube-one {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8XSDyGo0lf2SxVjhsjmcc6lcsmkAL-q572q8RYPbJapWKadgKuQHCP1kdm6tteOKzTy5qb9OUlDzC-UgZcBidx5yYvMMKZ1A9zmafOKfu7P-B0W4iVhzrjabgBKhmEzIlrLP0bzROJt0/h120/youtube.png) no-repeat center center #e64a41;
 width:95%;
 height:69px;
 padding:0;
 }

.metro-social .googleplus-one {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ZjW8p83U9e5tXR8bso0jJRcFKiY9XpzdTXuNC_Pzbm4gAx1w2xgI2RiLp0jeaDxMS4xZ_8MOk8cSHQXh3IhjBwn1nV_uxd2nMSHX-RI5KJuebcq7ksIR6PZpTv8ShoDxICSG_KoKKQw/h120/google_plus.png) no-repeat center center #da4a38;
 width:47%;
 height:69px;
 padding:0;
 }

.metro-social .twitter-one {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXuDPuukoZN8uNM85B75_puKio94LDrRmx55mu5L7v4zrQTcL5MhqK7rnu2DU9Xm_8hybSjp2PwbXYX_7WmoeAl-lHoDTHY4HkV4nGpcJA-G5SVzByiK876F0hbqUoTdLO2Ugb_0FqjJo/h120/twitter.png) no-repeat center center #43b3e5;
 width:47%;
 height:69px;
 padding:0;
 }

.metro-social .twitter-one-extend {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXuDPuukoZN8uNM85B75_puKio94LDrRmx55mu5L7v4zrQTcL5MhqK7rnu2DU9Xm_8hybSjp2PwbXYX_7WmoeAl-lHoDTHY4HkV4nGpcJA-G5SVzByiK876F0hbqUoTdLO2Ugb_0FqjJo/h120/twitter.png) no-repeat center center #43b3e5;
 width:47%;
 height:140px;
 padding:0;
 }

.metro-social .twitter-extend-one {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXuDPuukoZN8uNM85B75_puKio94LDrRmx55mu5L7v4zrQTcL5MhqK7rnu2DU9Xm_8hybSjp2PwbXYX_7WmoeAl-lHoDTHY4HkV4nGpcJA-G5SVzByiK876F0hbqUoTdLO2Ugb_0FqjJo/h120/twitter.png) no-repeat center center #43b3e5;
 width:95%;
 height:69px;
 padding:0;
 }

.metro-social .linkedin-one {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHPC4R54HDyebEF5JOowyArdVbho_0w4_hH_iZ0uqYVRIDqGY9db8g8MvYNuSG3zHRSBrlG6gRD1iwt3x30e__Wyr_3JCRdktdd0vdr6di9tAQFHPQrJQhT5rnx7prPKxAUBoAjA7rW8Y/h120/linkedin.png) no-repeat center center #0097bd;
 width:47%;
 height:69px;
 padding:0;
 }

.metro-social .pinterest-one {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMKK-XW3_mUWFKaFV_ZfFvWWTGxXgfwhStqMfJsB3kr6Cd8XMwwyBEsDzsOUzr2VBqebrRmQrBVtdNrAlEU3buDB9tuXFzRQNkRXGPYmYANWNMroxGlNjOelnul9ASegqimq64fIfu5yg/h120/pinterest.png) no-repeat center center #d73532;
 width:47%;
 height:69px;
 padding:0;
 }

.metro-social .pinterest-one-extend {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMKK-XW3_mUWFKaFV_ZfFvWWTGxXgfwhStqMfJsB3kr6Cd8XMwwyBEsDzsOUzr2VBqebrRmQrBVtdNrAlEU3buDB9tuXFzRQNkRXGPYmYANWNMroxGlNjOelnul9ASegqimq64fIfu5yg/h120/pinterest.png) no-repeat center center #d73532;
 width:95%;
 height:69px;
 padding:0;
 }

.metro-social li:hover {
 -webkit-opacity: 0.9;
 -moz-opacity: 0.9;
 opacity: 0.9;
 }

.metro-social .fbhover, .twitterhover, .googlehover, .linkedinhover, .pinteresthover{
 visibility:hidden;
 opacity:0;
 transition:visibility 2.5s linear 0.5s,opacity 0.5s linear;
 }
.metro-facebook:hover .fbhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.metro-twitter:hover .twitterhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.twitter-one-extend:hover .twitterhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.metro-googleplus:hover .googlehover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.metro-youtube:hover .googlehover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.youtube-one:hover .googlehover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.googleplus-one:hover .googlehover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.twitter-one:hover .twitterhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.twitter-extend-one:hover .twitterhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.metro-linkedin:hover .linkedinhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.linkedin-one:hover .linkedinhover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.metro-pinterest:hover .pinteresthover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.pinterest-one:hover .pinteresthover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
.pinterest-one-extend:hover .pinteresthover{
 opacity:1;
 transition-delay:0s;
 visibility: visible;
 }
</style>
>>> CATATAN <<<
        [ Ganti warna kuning dengan url sosmed ente ]
# silahkan di save / simpan
***  SELAMAT  MENGGUNAKANNYA  SOBAT  ***


Baca Juga Artikel Terkait Lainnya

Thanks For Your Comment Here
Langganan: Posting Komentar (Atom)