How to add social media on blogger / blogspot website with gadget | KhmerueTeams Official

How to add social media on blogger / blogspot website with gadget

Social media plug in is the best to promote your Social Network by putting the link ans description to them, and all visitor can click through those links to find you in other platform 


Step 1. Go to blogger.com and sign in with your account and select the blogger name you really want to add on it. Now click on the Layout on the left hand side.


Step 2. Click on Add a Gadget and choose the HTML/Javascript 


Step 3. Copy and paste the following codes in to empty box and then click on save.

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

Note: this work for some blogger template only....especially for the new version of blogger Templates.

 

Share on Google Plus

About KhmerueTeams Official

Welcome to KhmerueTeams Officials Blogger. I am Mr. Chhuye The Admin of this blogger. If you have quetion contact me : +855968555664 / +855976235033 or watch my video on

YOUTUBE HERE

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment