Bu sitedeki her şey ile kodlanmıştır.

Kategori Listesini Göster

Blogger için Responsive Sosyal Medya Butonları Yapımı


Blogger için Responsive Sosyal Medya Butonları Yapımı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

Blogger için Responsive Sosyal Medya Butonları Yapımı
  1. Yorum bulunmamaktadır.

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.