Hello, bloggers and web developers! Here, I am going to share a cool social icon widget for your website and blog. This widget is responsive and cool in look. Pure CSS social icon widget for your website’s footer and header. So, hope you will like it.

Hello friends, here today I will tell you how to add custom social media icons to your blog sidebar.Social Media icon- Social media icon associated with your social media profile as Facebook, Pinterest, Twitter account or contact information etc. If anyone clicks, then they will send them to your social media profile page, Peoples can also follow your Facebook, Pinterest, Twitter or RSS feed with it updated. Many people have been included in this by adding social media icons to their blogs. People also share their blogs with others. You can add social networking icons to your blog with a simple HTML code that will customize the icons on your site.

Copy all the code and follow the video and keep smile 🙂 with me…

<div class="kt-social-buttons-widget"><ul class="sidebar-social clearfix"><li><a href="https://twitter.com/Yogeshphulwar" class="social-btn-twitter">Follow on Twitter <i class="fa fa-twitter"></i> </a></li><li><a href="https://www.facebook.com/official.truEVision/" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook"></i> </a></li><li><a href="https://www.youtube.com/channel/UCulpoO4CxHBXK5EOvS4u2XA" class="social-btn-youtube">Subscribe on Youtube <i class="fa fa-youtube"></i> </a></li><li><a href="https://www.instagram.com/yogesh_phulwariya/" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram"></i> </a></li></ul></div>


.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;



.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;



.kt-social-buttons-widget li:hover a.social-btn-youtube {

background: #cd201f;



.kt-social-buttons-widget li:hover a.social-btn-instagram {

background: #405de6;




By admin

Leave a Reply

Your email address will not be published. Required fields are marked *