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

Henüz hiçbir yorum yazılmamış. İlk yorumu siz yapın.

Yorum Yaz

Avatar

REKLAM

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

REKLAM

Çizgi Filmler

EN

  • Popüler
  • Yeni
  • Son Yorum