Blogger için düzenlediğim veya oluşturduğum Responsive uyumlu eklentileri sizlerle paylaşmaya devam ediyorum. Şimdi ise, responsive sosyal medya butonları paylaşıyor olacağım. Aşağıdaki kodları sidebar'ınıza ekleyerek, %100 Responsive uyumlu sosyal medya butonları elde edebilirsiniz. Sadece sosyal medya hesaplarınızın adreslerini değiştirmeniz yeterli olacak olup, farklı bir kodu değiştirmenize ise gerek bulunmamaktadır.

AYRICA: En Faydalı Blogger İpuçları (2018)

<div class='metro-social'>
<a class="fb" href="#" title="Facebook" target="_blank"></a>
<a class="tw" href="#" title="Twitter" target="_blank"></a>
<a class="gp" href="#" title="Google+" target="_blank"></a>
<a class="pi" href="#" title="Pinterest" target="_blank"></a>
<a class="in" href="#" title="VKontakte" target="_blank"></a>
<a class="yt" href="#" title="Tumblr" target="_blank"></a>
<a class="fd" href="#" title="Flickr" target="_blank"></a>
<a class="nebu" href="#" title="Instagram" target="_blank"></a>
</div>
<style>
.metro-social1{padding:20px;font-size:18px;font-weight:normal;text-align:center;z-index:7;position:relative;display:block;border-bottom:5px solid #7DA1BB;margin-bottom:10px;background-color:#f5f5f5;}
.metro-social{padding:0;}
.metro-social{position:relative;padding:0;list-style:none;}
.metro-social .fb,.nebu,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;position:relative;display:block;float:left;}
.metro-social .fb{background: url(http://3.bp.blogspot.com/-87yToG1Jgv8/W60ZE2PIPZI/AAAAAAAARqU/CjMK14Wu6UkWr18WS8MZpU5UfaRPNkSuACK4BGAYYCw/s1600/facebook.png) no-repeat center center #3A5897;width:50%;height:75px;}
.metro-social .nebu{background:url(http://1.bp.blogspot.com/-vunK7iLAHyc/W60ZukNjJGI/AAAAAAAARrU/JJqyxEppy9sGRoGjlDaj-tGN-GOufc_aACK4BGAYYCw/s1600/instagram.png) no-repeat center center #517FA6;width:50%;height:75px;}
.metro-social .tw{background:url(http://4.bp.blogspot.com/-FUHOp2IJiM8/W60ZL6BVuEI/AAAAAAAARqc/DKMZUJQd9MsVc_d7syj-tc9Hd-frDbPLACK4BGAYYCw/s1600/twitter.png) no-repeat center center #1DA1F2;width:50%;height:75px}
.metro-social .gp{width:50%;height:75px;background:url(http://3.bp.blogspot.com/-EujyXBNUzMc/W60ZTmz1RYI/AAAAAAAARqk/Ly0h5ohK1U4p81JWBmttpbkAxB7u-7_vwCK4BGAYYCw/s1600/googleplus.png) no-repeat center center #D36259}
.metro-social .pi{background:url(http://4.bp.blogspot.com/-PJmldYns4QY/W60ZaN4cAwI/AAAAAAAARqw/4OZrLV97BuA5xDTZ1ecgP2OgLfYxO4TUQCK4BGAYYCw/s1600/pinterest.png) no-repeat center center #C1404A;width:50%;height:75px}
.metro-social .in{background:url(http://1.bp.blogspot.com/-IKR5JXtltjI/W60ZisyndaI/AAAAAAAARq8/Q6IgIi84pEYfgP9GCjLMTJD3VyXmzVDsgCK4BGAYYCw/s1600/vkontakte.png) no-repeat center center #4C75A3;width:50%;height:75px;}
.metro-social .yt{background:url(http://2.bp.blogspot.com/-nHy60Wgz2vA/W60ZoRGRV8I/AAAAAAAARrI/GlLWIAcVMJkWBfuqrZCXFCTWS4wcGX9dQCK4BGAYYCw/s1600/tumblr.png) no-repeat center center #44546B;width:50%;height:75px;}
.metro-social .fd{background:url(http://2.bp.blogspot.com/-bRG01NIEna0/W60Z3DWeIEI/AAAAAAAARrc/6IiKrhu9GW0TCC8JkW5iEJJ7ipA4v6NyACK4BGAYYCw/s1600/flickr.png) no-repeat center center #4085E0;width:50%;height:75px}
</style>

Görünüm