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

<script></script>



Örnekte, font ve css dosyaları mevcuttur. Bol sosyal paylaşımlı :) günlerde kullanmanız dileğiyle.



Kaynak: www.ontedi.com