Metro Stil Temel Sosyal Butonlar Eklentisi

Bu eklentide sizde farkettiyseniz her blogculuk ilk önceliği olan sosyal medya butonları var facebook,twitter,google plus ve feedburner hesabları bir blogcu için ve bloguna ziyaretçi çekmek için en temel sosyal medya hesablarıdır.Şimdi bu eklentileri resimdede görmüş olduğunuz gibi DEMO'suda benim blogumun en altında görmüş olucağınız gibidir.Ekleme kısmına gemeden önce daha önce neler paylaştım onlarıda göstereyim sizlere.

Metro Style Sosyal Butonları
Yeni Metro Stil Sosyal Butonları Eklentisi
Blogger Metro Menü Eklentisi

Blogger Paneline, giriyoruz daha sonra Şablon bölümünü seçiyoruz oradan HTML Düzenle diyoruz
Daha sonra  CTRL+F yardımı ile ]]></b:skin> kodunu buluyoruz ve aşağıdaki kodları üstüne yerleştiriyoruz.

.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/AVvXsEh_omEIccjYi3WgIZwzGF6bUpqqL2rFB8fLeS4T_tlO8kl_PeNn1N851WhKnKbvY38jXGnGJwnMlN9f-FqZaY8SK6n4790PCUF0lr51ydz_E6UV-FtxFGufqPiJ0FbrYE6vUJ8X3XvT2q4/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/AVvXsEhLvaBx8YA9h-p4-sPRqmK1Uxe8cqzeCnPk8EBeXUFROfWvBPN-r2wMxHNUtDgewBPeeXuwRTAvzVswaPox5uYI_yMOdUXfJ6Olpn1Qn3dDq7jI2Mj6G5wlhfnZq1VP-gI5leQth_eLQDpA/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/AVvXsEiEaOVUNkg8yYegN8WLAC3R3-j1TRLdp3E78W9bJ7fewfqkaS1obQa7xA2IuTDaJEuy-vKiEHgIsAYUBJdz0HoU1eUOG5RoPGG4W2ahvMYL1uL4GicRjvnPv-7PfhbzKSw8LvK8deZ3bPkp/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/AVvXsEhlib8r791ch2Dt2zil70R2sU3ZM62UNB4yxijVOXJMGc7Rc3z0IqBs-2T5QskiZKpsBLy4Ai6wlCVfKbz5SoK2K483gaD-mzy-nsTrXODhNLXk3gAoIGBeeMZOeFSCazGD0jO4Hh4LM8Zb/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/AVvXsEja1PaAEmnh5JNweB8As7pq1JKsmfeEJ9kUhF4FLv0mHDudwyLTkWa48IlQorqw_5-7TV08e2hhtcoVAGQ8fq3WzMTZu7ur54vtbhyphenhyphenkKqI3y4UmYkw03cqqrnF23SVALu4ek3HjeMQ-FpE/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/AVvXsEied7i6ZF8zEtzsnq26pNDc85FKPN7a9XOb0_JroiIQZumKLe8h4vwBzniNylzExDGfsIWT0DoFQoTXmF_oiNe_vZgkxZICdZke2oO7iFs7fBWCsUv7Osoug8c1S-uRCNZb4Fe-pu-mn5c/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/AVvXsEj-9Hnd3S8sT3_DBqTlV65R8-b6wAFtejuGFMfpl3HDzyS63JVN7QNug5LssYIX61yCV58rqV7bXUexiPsEl76GkATVeeZ8AFC2HXDCI0Crh_9k5HAwHjdNusTy_3ksBQuVZ0IzKhQ7ouU/h120/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;

    -webkit-transition: all 0.1s ease-in-out;} 

ve son adımlara doğru devam ediyoruz Şablon kısmının üstündeki Yerleşim tıklıyoruz sağ taraftan Gatget Ekle diyoruz ve HTML/JavaScript eklentisini tıklıyoruz ve aşağıdaki kodları içersine yerleştirip Kaydet diyoruz.

<ul id='supportive'>
<li><a class='icon facebook' href='http://www.facebook.com/Facebook/'/></a></li>
<li><a class='icon twitter' href='http://twitter.com/Twitter'/></a></li>
<li><a class='icon googleplus' href='https://plus.google.com/GooglePlus ID'/></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/FeedBurner'/></a></li>
</ul>

Şimdi ise yukarıdaki kodlar içersinde mavi renk olan bölümleri kendi sosyal medya blog isimlerinizi yazmanız yeterlidir.