Cara Membuat Widget Sosial Media Flat

Kegunaan menaruh widget sosial media di blog adalah,selain pengunjung bisa melihat profil kamu,ternyata search engine juga menyukai blog yang menaruh sosial media kedalam blog nya,dan juga blog kamu keliatan user friendly,kebanyakan pengunjung,meyukai blog yang user friendly

sebenarnya,untuk membuat widget sosial media di blog,sudah banyak yang share,yang saya share sekarang,cuma beberapa pengembangan,dari widget widget lain

untuk membuat nya,ikuti tutorial nya dibawah ini

1. Letakkan kode di bawah ini di bagian tag `<style>` letakkan disini `</style>`

Spoiler: Hint

#socialcounter{overflow:hidden;margin:0 0 10px 0}
#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}

2. letakkan kode di bawah ini di bawah kode `<div id="sidebar-wrapper">`

Spoiler: Hint

<div id='socialcounter'>
<h2 class='ripplelink'><span>Media Sosial</span></h2>
<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='https://www.blogger.com/follow-blog.g?blogID=8148874819248516071' 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>