Metro Style Sosyal Butonları

Blogger sosyal butonlar paylaşımlarım devam ediyor ve yeni yeni eklentiler ile yola devam diyoruz.Evet bu eklentinin adı Metro Style eklenti her sosyal sitenin rengini barındıran güzel bir görüntü sağlıyor.

Demo Görünümü
 

Blogger Paneli >>> Şablon >> HTML'yi Düzenle >> CTRL+F tuşuna basın ve ]]></b:skin> kodunu bulun aşağıdaki kodları üstüne yerleştirin.

.widget-item-control a{display:none;} .widget-item-control a{display:none;} #supportive{width: 300px; float: left;margin-top: 10px;} #supportive li{position:relative; cursor:pointer; padding: 0 !important;} #supportive .facebook, .googleplus, .rss, .twitter{ position: relative; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; z-index: 5; display: block; float: left; margin: 1px;} #supportive .icon{overflow:hidden;} #supportive .facebook{width: 147px; height: 150px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmNrL8lE8ZCNao5L2zn6oi-jHF0B1f9_e10JdwlMhz7sqpbKFKvk8FaNSLUPAFGRavojWv4oI2B4dAu5BCGzSTooccV_Lx1Vja3CBbj6PtqnbrVeUSdZnMJutn4ugqgVyl4Vu-WWXC49s/h120/facebook.png") no-repeat center center;} #supportive .twitter{width: 148px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju5oSVxp6p702wFgkAt1er1W3Sd_t1KwEiB9HdKz9yD_d1nNpgUPddbyqnORNVgbgF37WscM_dTVYq6PS4xl4DU1xNTaqwp3zntt1Wyz3gp0cpUZz23tACakncoAX5jXHp8hkPluJanh61/s1600/Twitter.png") no-repeat center center;} #supportive .googleplus{width: 148px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxgJCcEQhDldeWF3oeKQ1FOn3scnOhVFDQfh6DKKBNhlfrygdQcCOCCzkpWMkz2E9miGOcRM7qbKmysTddYyvz0siEb071FP3kl03P3XVoPwldN9o7FEKicrM0s0uLflaPyQz7LGgEzAIS/s1600/google+plus.png") no-repeat center center;} #supportive .rss{ width: 299px; height: 74px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMrGezdRyuAVvLZZs84zP7rCHNmTeSX7VcNvl6zop-yPa7k7KxwS56zpWUjrgYEuHwWvwSNGFxdIc5-l_FFVw56b5z7OtyqZ97OGdXU3_FB0-fZ_eX200YyNRohBSaZz6ykAkdiBYLEfZB/s1600/rss.png") no-repeat center center;} #supportive li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #supportive li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbGCR-hmwuDUFknW2HkvMtE5Vc2ZvoH-50Ik-lWuEyjMV1I_RKoUitKmWEPaUJ43JfP_vof-f4F_-Dd0_K4xk9RKFab-B0VjsYs4bdWkk6yxQmEIIg1S7c9QwqPBOuPeRRUbbyd83FOS8/h120/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #supportive li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLVVo_UMlPotaYSiRF48Ru5hzjvXyZdqNXQ1dXBuy9epBccwY0hqRK9YzvVT_tuFhvZMxFKUQqsqPWoriQMc4vpbHou_QinXY0kim7s1PkyRMRtki4Cgkx8C2PX-sJwELAXm8eL94GAIE/h120/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} #supportive li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikK_5cbO7UhMi7eP01mLMmf37jsKtSQ-sSpkdLZMA0gQR-VQCxgX95-G25oVqFCYPx2EfbDGSbx3jFgl4m7rc0vHPDCgl4kRQxkkU9lcGR1x-aPQG-VG00B7CvOamxmndR7qbZouSw_rE/h120/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out;} 

<div class="metro-social">   <li><a class="fb" href="http://www.facebook.com/facebook"></a></li>   <li><a class="tw" href="http://twitter.com/twitter"></a></li>    <li><a class="gp" href="https://plus.google.com/google id"></a></li>    <li><a class="pi" href="http://pinterest.com/pinterest"></a></li>    <li><a class="in" href="https://www.linkedin.com/in/linkendin"></a></li>    <li><a class="yt" href="http://www.youtube.com/youtube"></a></li>    <li><a class="fd" href="http://feeds.feedburner.com/rss"></a></li>    </div>    <style>   /*Metro Stil sosyal paylaşım butonları eklentisi bloggerturkey.com*/   .metro-social{width:285px}    .metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}    .metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}    .metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}    .metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}    .metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px}    .metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}    .metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}    .metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}    .metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}    .metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}    .metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}    .metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}    .metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}    .metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}   .metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat centercenter #e64a41}    .metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}   </style>   

• Yukardaki değiştirmeniz gereken yerleri mavi renk ile boyadım.