How to make a social Media Widget, for example / demo you can on the Sidebar on this blog,
then how do you install it? Just follow the instructions below the
First Way through
HTML Templates
You go to your Blog,> Template> Edit HTML
and Copy the CSS Script below, and enter before the </style> code
#socialblock{overflow:hidden;margin:0 0 10px 0}
#socialblock h2{margin:0 auto 4px auto}
#socialblock .vam_social{margin-left:-.5%;margin-right:-.5%}
#socialblock .vam_social:before,.vam_social:after{content:"";display:table}
#socialblock .vam_social:after{clear:both}
#socialblock .vam_social .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}
#socialblock .vam_social .scl_social.facebookx{background:#3e64ad}#socialblock .vam_social .scl_social.twitterx{background:#58ccff}#socialblock .vam_social .scl_social.bloggerx{background:#f79738}#socialblock .vam_social .scl_social.instagramx{background:#4d749f}#socialblock .vam_social .scl_social.googlex{background:#dd4b39}#socialblock .vam_social .scl_social.youtubex{background:#e62119}
#socialblock .vam_social .scl_social.facebookx:hover{background:#2d4980}#socialblock .vam_social .scl_social.twitterx:hover{background:#4aaeda}#socialblock .vam_social .scl_social.bloggerx:hover{background:#d78432}#socialblock .vam_social .scl_social.instagramx:hover{background:#3c5d81}#socialblock .vam_social .scl_social.googlex:hover{background:#bf3c2c}#socialblock .vam_social .scl_social.youtubex:hover{background:#c71f18}
#socialblock .vam_social .scl_social a{position:relative;overflow:hidden;display:block;color:#fff;padding:22px 5px}
#socialblock .vam_social .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}
#socialblock .vam_social .scl_social:hover a:before{transform:rotate(-30deg) scale(1.3);}
#socialblock .vam_social .scl_social span{display:block}
#socialblock .vam_social .scl_social span.app_icon i{font-size:24px;margin-bottom:5px}
#socialblock .vam_social .scl_social span.app_type{font-size:13px;margin:5px auto 0 auto}
#socialblock h2,#Label1 h2{background:#1abc9c}
Then add the HTML script after the sidebar
look for <aside id = 'sidebar-wrapper'
and place it after the following code, or enter between the code <aside id = 'sidebar-wrapper' and </aside>
<div id='socialblock'>
<div class='vam_social'>
<div class='scl_social facebookx'>
<a href='fb.com/myabdurrahim.id' 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='twitter.com/abdurrahim_ID' 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=7216711388501110503' 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='https://plus.google.com/u/0/110857132806605497220' 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='instagram.com/abdurrahim_id' 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='https://www.youtube.com/channel/UCnUzeQMof2aHNJOveCY9eWQ' 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>
Sidebar code usually varies, depending on the template name.
If you are confused about the method above, there is a second way
Via the Layout Widget
it's quite easy, you just need to go to your blogger,
select Layout> Add Widget> HTML / JavaScript
and enter the script below.
<style type='text/css'>
/* www.vamous.id */
#socialblock{overflow:hidden;margin:0 0 10px 0}
#socialblock h2{margin:0 auto 4px auto}
#socialblock .vam_social{margin-left:-.5%;margin-right:-.5%}
#socialblock .vam_social:before,.vam_social:after{content:"";display:table}
#socialblock .vam_social:after{clear:both}
#socialblock .vam_social .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}
#socialblock .vam_social .scl_social.facebookx{background:#3e64ad}#socialblock .vam_social .scl_social.twitterx{background:#58ccff}#socialblock .vam_social .scl_social.bloggerx{background:#f79738}#socialblock .vam_social .scl_social.instagramx{background:#4d749f}#socialblock .vam_social .scl_social.googlex{background:#dd4b39}#socialblock .vam_social .scl_social.youtubex{background:#e62119}
#socialblock .vam_social .scl_social.facebookx:hover{background:#2d4980}#socialblock .vam_social .scl_social.twitterx:hover{background:#4aaeda}#socialblock .vam_social .scl_social.bloggerx:hover{background:#d78432}#socialblock .vam_social .scl_social.instagramx:hover{background:#3c5d81}#socialblock .vam_social .scl_social.googlex:hover{background:#bf3c2c}#socialblock .vam_social .scl_social.youtubex:hover{background:#c71f18}
#socialblock .vam_social .scl_social a{position:relative;overflow:hidden;display:block;color:#fff;padding:22px 5px}
#socialblock .vam_social .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}
#socialblock .vam_social .scl_social:hover a:before{transform:rotate(-30deg) scale(1.3);}
#socialblock .vam_social .scl_social span{display:block}
#socialblock .vam_social .scl_social span.app_icon i{font-size:24px;margin-bottom:5px}
#socialblock .vam_social .scl_social span.app_type{font-size:13px;margin:5px auto 0 auto}
#socialblock h2,#Label1 h2{background:#1abc9c}
/* www.vamous.id */
</style>
<div id='socialblock'>
<div class='vam_social'>
<div class='scl_social facebookx'>
<a href='fb.com/myabdurrahim.id' 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='twitter.com/abdurrahim_ID' 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=7216711388501110503' 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='https://plus.google.com/u/0/110857132806605497220' 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='instagram.com/abdurrahim_id' 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='https://www.youtube.com/channel/UCnUzeQMof2aHNJOveCY9eWQ' 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>
Don't forget to replace your Facebook, Twitter, and links with your links,
if, you are having problems or problems, please comment bro