Sitene kod ekle Sitene sosyal paylaşım butonu ekle | Sitene kod ekle
Home » , , , » Sitene sosyal paylaşım butonu ekle

Sitene sosyal paylaşım butonu ekle

Sitene sosyal paylaşım butonu ekle yazımızda; çeşitli değişik sosyal paylaşım butonlarını sizlerle paylaşıyoruz.

 Daha öncede şekli ve boyutları farklı sosyal ağlar için paylaşım butonu yayınlamıştık.






Bu yazımızda size iki farklı renkte buton kodu vereceğiz. Bu kodları, sosyal paylaşım butonları nerede gözükmesini istiyorsanız o kısımlarda ki gadgetlere eklemeniz yeterli.
Kod 1
<div class="kt-social-buttons-widget"><ul class="sidebar-social clearfix"><li><a href="#!" class="social-btn-twitter">Follow on Twitter <i class="fa fa-twitter"></i> </a></li><li><a href="#!" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook"></i> </a></li><li><a href="#!" class="social-btn-youtube">Subscribe on Youtube <i class="fa fa-youtube"></i> </a></li><li><a href="#!" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram"></i> </a></li></ul></div>
<style>
.kt-social-buttons-widget ul {
list-style: none;
padding-left: 0;
}
.kt-social-buttons-widget li a {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
display: block;
color:#fff;
padding: 10px 1px 10px 10px;
}
.kt-social-buttons-widget ul li {
width: 100%;
margin-bottom: 10px;
}
.kt-social-buttons-widget li a.social-btn-twitter {
background: #1da1f2;
}
.kt-social-buttons-widget li a i {
float: right;
width: 35px;
height: 14px;
line-height: 14px;
text-align: ;
margin: 0;
padding: 0 0 0 10px;
font-size: 14px;
}
.kt-social-buttons-widget li a i {
border-left: 1px solid #fff;
line-height: 14px;
}
.kt-social-buttons-widget li a.social-btn-facebook {
background: #3b5998;
}
.kt-social-buttons-widget li a.social-btn-youtube {
background: #cd201f;
}
.kt-social-buttons-widget li a.social-btn-instagram {
background: #405de6;
}
.kt-social-buttons-widget li:hover a {
background:#FE7549;
}
.kt-social-buttons-widget ul li:last-child {
    margin-bottom: 0;
}
</style>

Kod 2
<div class="kt-social-buttons-widget"><ul class="sidebar-social clearfix"><li><a href="#!" class="social-btn-twitter">Follow on Twitter <i class="fa fa-twitter"></i> </a></li><li><a href="#!" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook"></i> </a></li><li><a href="#!" class="social-btn-youtube">Subscribe on Youtube <i class="fa fa-youtube"></i> </a></li><li><a href="#!" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram"></i> </a></li></ul></div>
<style>
.kt-social-buttons-widget ul {
list-style: none;
padding-left: 0;
}
.kt-social-buttons-widget li a {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
display: block;
color: #0a0a0a;
padding: 10px 1px 10px 10px;
    -webkit-box-shadow: 2px 2px 0px #f4e6c9;
    -moz-box-shadow: 2px 2px 0px #f4e6c9;
    box-shadow: 2px 2px 0px #f4e6c9;
    background: url(http://1.bp.blogspot.com/-ObtNnI3H0BM/WbavfUJH1oI/AAAAAAAAD20/YLmNdnASSugJ9mVn-p3SmLAC1DavYVuHgCK4BGAYYCw/s400/widget-bg.jpg) repeat;
}
.kt-social-buttons-widget ul li {
width: 100%;
margin-bottom: 10px;
}
.kt-social-buttons-widget li:hover a.social-btn-twitter {
background: #1da1f2;
color:#fff;
}
.kt-social-buttons-widget li a i {
float: right;
width: 35px;
height: 14px;
line-height: 14px;
text-align: ;
margin: 0;
padding: 0 0 0 10px;
font-size: 14px;
}
.kt-social-buttons-widget li a i {
border-left: 1px solid #666;
line-height: 14px;
}
.kt-social-buttons-widget li:hover a.social-btn-facebook {
background: #3b5998;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-youtube {
background: #cd201f;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-instagram {
background: #405de6;
color:#fff;
}
</style>