2. Visit Theme then Edit HTML
3. Copy the following code to the above]]> </ b: skin>
CSS
====================
#socialcounter h2{color:#fff;margin:0 auto 4px auto}
#socialcounter .ztn_socialize{margin-left:-.5%;margin-right:-.5%}
#socialcounter .ztn_socialize:before,.ztn_socialize:after{content:"";display:table}
#socialcounter .ztn_socialize:after{clear:both}
#socialcounter .ztn_socialize .scl_social{margin:0 .5% 1%;width:32.3%;float:left;text-align:center;background:#111;border:1px solid rgba(0,0,0,0.03);transition:all .3s}
#socialcounter .ztn_socialize .scl_social.facebookx{background:#3e64ad}#socialcounter .ztn_socialize .scl_social.twitterx{background:#58ccff}#socialcounter .ztn_socialize .scl_social.bloggerx{background:#f79738}#socialcounter .ztn_socialize .scl_social.instagramx{background:#4d749f}#socialcounter .ztn_socialize .scl_social.googlex{background:#dd4b39}#socialcounter .ztn_socialize .scl_social.youtubex{background:#e62119}
#socialcounter .ztn_socialize .scl_social.facebookx:hover{background:#2d4980}#socialcounter .ztn_socialize .scl_social.twitterx:hover{background:#4aaeda}#socialcounter .ztn_socialize .scl_social.bloggerx:hover{background:#d78432}#socialcounter .ztn_socialize .scl_social.instagramx:hover{background:#3c5d81}#socialcounter .ztn_socialize .scl_social.googlex:hover{background:#bf3c2c}#socialcounter .ztn_socialize .scl_social.youtubex:hover{background:#c71f18}
#socialcounter .ztn_socialize .scl_social a{position:relative;overflow:hidden;display:block;color:#fff;padding:22px 5px}
#socialcounter .ztn_socialize .scl_social a:before{content:'';position:absolute;left:0;right:0;bottom:0;top:0;background-image:linear-gradient(150deg,rgba(0,0,0,0.02) 45%,rgba(255,255,255,.12) 45%);transition:all .6s}
#socialcounter .ztn_socialize .scl_social:hover a:before{transform:rotate(-30deg) scale(1.3);}
#socialcounter .ztn_socialize .scl_social span{display:block}
#socialcounter .ztn_socialize .scl_social span.app_icon i{font-size:24px;margin-bottom:5px}
#socialcounter .ztn_socialize .scl_social span.app_type{font-size:13px;margin:5px auto 0 auto}
4. Copy the following code add a gadgeta in your Blog
HML
===================
<div class='ztn_socialize'>
<div class='scl_social facebookx'>
<a href='#' rel='nofollow' target='_blank' title='Like our Facebook'>
<span class='app_icon'><i class='fa fa-facebook'></i></span>
<span class='app_type'>Facebook</span>
</a>
</div>
<div class='scl_social twitterx'>
<a href='#' rel='nofollow' target='_blank' title='Follow our Twitter'>
<span class='app_icon'><i class='fa fa-twitter'></i></span>
<span class='app_type'>Twitter</span>
</a>
</div>
<div class='scl_social bloggerx'>
<a href='#' rel='nofollow' target='_blank' title='Join our Site'>
<span class='app_icon'><i class='fa fa-user'></i></span>
<span class='app_type'>Blogger</span>
</a>
</div>
<div class='scl_social googlex'>
<a href='#' rel='nofollow' target='_blank' title='Get in touch'>
<span class='app_icon'><i class='fa fa-google-plus'></i></span>
<span class='app_type'>Google+</span>
</a>
</div>
<div class='scl_social instagramx'>
<a href='#' rel='nofollow' target='_blank' title='Follow our Instagram'>
<span class='app_icon'><i class='fa fa-instagram'></i></span>
<span class='app_type'>Instagram</span>
</a>
</div>
<div class='scl_social youtubex'>
<a href='#' rel='nofollow' target='_blank' title='Visit our Channel'>
<span class='app_icon'><i class='fa fa-youtube'></i></span>
<span class='app_type'>Youtube</span>
</a>
</div>
</div>
</div>
5. Exchange links to your social networks.
