Blogger ile ilgili derslerimize ara vermiş idik ancak kısa süre önce 1 gün boyunca kodlamasını yapıp, tarayıcı uyumluluğunu da kontrol sağladığım bir sosyal medya butonları eklentisini sizlerle paylaşmaktan heyecan duyuyorum. İlgili eklenti Chrome, Mozilla Firefox, Yandex Browser, Safari, Microsoft Edge, Internet Explorer 11, Opera, Maxthon ve Vivaldi Browser gibi tarayıcılarda tamamen uyumluluk içerisindedir. Sizin yapmanız gereken ise bağlantı alanlarını güncellemektir.

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

Blogger için Mükemmel Sosyal Medya Butonları (Benzersiz)

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


Not: Lütfen kırmızı "#" bağlantı alanlarını değiştirmeyi unutmayınız.

Görünüm