Tutorial Membuat Media Social Flat Bagus
Fungsi 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, dalam membuat widget sosial media di blog, sudah banyak yang share, hanya saja tutorial yang akan admin jelaskan adalah pengembangan dari beberapa dari widget widget lain.
Tutorial Membuat media Social Falat
Untuk membuat nya, ikuti tutorial nya dibawah ini:
1. Letakkan kode di bawah ini di bagian tag <style> letakkan disini </style>
#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}
<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>
3. Kemudian Save, lalu lihat hasilnya.
Demikian Tutorial cara membuat media social flas, semoga bisa bermanfaat.
0 Response to "Tutorial Membuat Media Social Flat Bagus"