Widget Social Media

Cara menciptakan Widget social Media, untuk contoh/ demonya dapat kalian pada Sidebar di blog ini,
kemudian bagaimana cara memasangnya ? Ikuti aja intruksinya dibawah ini

Cara Pertama melalui

HTML Template

Kalian pergi ke Blog kalin, > Template > Edit HTML
dan Copy Script CSS dibawah, dan masukkan sebelum instruksi </style>

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

Lalu Tambahkan Script HTMLnya sesudah Sidebar
cari instruksi <aside id='sidebar-wrapper'
dan letakkan sesudah instruksi berikut, atau masukkan antara instruksi <aside id='sidebar-wrapper' dan </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>

Kode Sidebar biasanya berbeda-beda, tergantung dari nama template

Jika kalian resah dengan cara diatas, ada cara ke 2

Melalui Widget Tata Letak

caranya cukup mudah, kalian hanya perlu pergi ke blogger kalian,
pilih Tata Letak > Tambah Widget > HTML / JavaScript
dan masukkan scriptnya dibawah ini.

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