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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSqWglwXagEVVpTKE_jy_EKxHaKku0-1jJ68eNckK0wDoVb4XFMcsTYf_bTcPtDeSx4OJg_Ou_YK3q8F398CvEEBWuLnOur6M8dLqXGEaUEXDbhCZ4t2Fkj1q8Dq5nIjIop5hrmFMUUNI/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>

cxxx

* Sayfa Yazarı: Murat Marti 
* Diğer Kaynaklar: GEMİNİ - Google Yapay Zeka. CHATGPT - Copilot
* Fotoğraflar: Pixabay Ücretsiz Fotoraflardan Alınmıştır...