SEO (Arama Motoru Optimizasyonu) Mikro İnteraktif ÜCRETSİZ - Google Play'den İndirin

CSS ile Sosyal Mecralarda Paylaş Tasarımları Örnek 1

Bu makalede, sitenizde 'Sosyal Mecralarda Paylaş' tasarımlarını CSS'e döküp, AddThis aracılığıyla işlevsellik kazandırıyoruz.

Bu makaleyi hazırlarken yaptığım bir projede css tasarımı sizlere aktarmaya çalışayım. Öncelikle, AddThis sitesinde yayınlanan paylaşım betiklerinin özelleştirilmiş hali olduğunu belirteyim.
CSS'e dökülen tasarımda ayrıca Font Awesome kullanılarak ikonlarla zenginleştirilmiştir.
CSS betiklerini hazırlayalım.
CSS Betikleri
.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 Betikleri
<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>
Örnekte, font ve css dosyaları mevcuttur. Bol sosyal paylaşımlı :) günlerde kullanmanız dileğiyle.
Örnek
CSS ile Sosyal Mecralarda Paylaş Tasarımları Örnek 1

Yorumlar

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

REKLAM

Çocuk Etkinlikleri Uygulaması

EN

  • Popüler
  • Yeni
  • Son Yorum