Gönderen Konu: CSS ile Sosyal Paylaş Tasarımi  (Okunma sayısı 513 defa)

Çevrimiçi Ata

  • Yönetici
  • Trade Sayısı: (0)
  • *
  • İleti: 134
  • Karma +1/-0
    • Profili Görüntüle
CSS ile Sosyal Paylaş Tasarımi
« : 14 May 2015, 10:52:13 »
Merhaba Bugün size css ile Paylaş butonu yapmayi anlatiyorum ikon olarak font icon kulanalım sisteminde font icon olmayan burdan indire bilir
http://fortawesome.github.io/Font-Awesome/
css kodlari
Kod: [Seç]
.kapsul{width:500px;margin:10px auto;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);background: #fff;}
.sosyal-mecralar-v2{list-style-type:none;margin:0px auto;display:block;width:465px;border-top:1px solid #EBEBEB;padding:10px;}
.sosyal-mecralar-v2:after{content:'';display:block;clear:both;}
.sosyal-mecralar-v2 li{margin-right:15px;width:145px;float:left;padding:0px;}
.sosyal-mecralar-v2 li:last-child{margin-right:0px;}
.sosyal-mecralar-v2 li u{font-size:12px;text-decoration:none;margin-left:4px;line-height:30px;float:left;display:block;}
.sosyal-mecralar-v2 li a{color:#fff;text-align:center;padding:4px 0px !important;}
.sosyal-mecralar-v2 li span{display:none !important;}
.sosyal-mecralar-v2 li.facebook{background:#3b5998;}
.sosyal-mecralar-v2 li .fa-facebook{background:#3b5998;}
.sosyal-mecralar-v2 li.twitter{background:#00aced;}
.sosyal-mecralar-v2 li .fa-twitter{background:#00aced;}
.sosyal-mecralar-v2 li.google-plus{background:#dd4b39;}
.sosyal-mecralar-v2 li .fa-google-plus{background:#dd4b39;}
.sosyal-mecralar-v2 li.comments{background:#FB8F3D;}
.sosyal-mecralar-v2 li .fa-comments{background:#FB8F3D;}
.sosyal-mecralar-v2 li i{color:#fff;float:left;display:block;width:24px;border-right:1px solid #fff;}
.sosyal-mecralar-v2 li i:before{font-size:16px;line-height:30px;} 
HTML
Kod: [Seç]
<div class="kapsul">
    <script async type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
    <ul class="sosyal-mecralar-v2 addthis_default_style">
        <li class="facebook"><a class="addthis_button_facebook"><i class="fa fa-facebook"></i><u>Facebook'ta Paylaş</u></a></li>
        <li class="twitter"><a class="addthis_button_twitter"><i class="fa fa-twitter"></i><u>Twitter'da Paylaş</u></a></li>
        <li class="google-plus"><a class="addthis_button_google"><i class="fa fa-google-plus"></i><u>Google+'da Paylaş</u></a></li>
    </ul>
</div> 

[eklenti yönetici tarafından silindi]