Cara Pasang Widget Akun Media Sosial di Sidebar Blog

Baca Juga

Cara Memasang Widget Akun Media Sosial di Sidebar Blog

MEMASANG widget sosial media di blog/website merupakan salah satu cara untuk meningkatkan follower, pengikut, fans, atau jaringan pertemanan. (Lihat Demo)

Berikut ini salah satu jenis widget media sosial di sidebar blog yang cukup menarik, atraktif, simple, dan tentu saja keren. Berikut ini penampakannya:

CARA PASANG
Cara memasangnya sebagai berikut:

1. Layout > Add a Gadget > HTML/Javascript
2. Isi Judul dengan "Join us" atau Kosongkan
3. Copas kode berikut ini di kolom "Content"

<style type="text/css">
.cb_socialwidget { width: 300px; }
.cb_socialwidget ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; }
.cb_socialwidget ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; }
.cb_socialwidget ul li:first-child { border-top: 0 none; }
.cb_socialwidget ul li:last-child { border-bottom: 0 none; }
.cb_socialwidget ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; }
.cb_socialwidget ul li a:hover { background-color: #949494 !important;color: #0d0354; }
.cb_socialwidget ul li .rss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFJih2hSnKfwUDWXZ_cK3rAx9d94scTuAgfuR7dikre2q3EPfbLdhCdDmeC4ezDVA3rIiD3m8UlQC2yaOEhXq9u_MzvwQFCjQyEpN7aA7_ezZc8DIi1n3KUsZDm-A-Xg9DDYmpyJFBINA/s1600/bt-RSS.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; }
.cb_socialwidget ul li .twitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwRDF_-aEMYsV_fKWxoTfnjoUA2qw1HY3oDydAbfJDjtszdZwHV4hUOto8WEzzqVcZwLvxiy2hQpiZ3kt74AS1wUWmcTIfrSEmU_rnRA5_ztkVm6y2EsQjOnWW9PRRDSx-Tu8KAj_eNXw/s1600/bt-Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;}
.cb_socialwidget ul li .facebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLD9w-AmKeBI1drjterQLkaPiOeGI5yE7dnsWaw_yvRPjmxgKUEBHnepS1moGNjHh6truGA56AbnWFZLFUf3dvMOTGyfRp9x5n2l9cGKL01op4pwOoc82ud0KAZHzJAVSea_fwHzLJ51c/s1600/bt-Facebook.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; }
.cb_socialwidget ul li .google { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpMh9Rd3T_9U3dKFTC25wGqoTDV_K5NHdiB9Qfz0iV7gIMy2K__aA-nU2AVjazxC9dp0QPdMF8Ttz0CL5pKG__zzMuhCToKXLq_XXoD7YfQzGb0ZbV9eC115eu7Cm2H7EFcw3frzS6IC4/s1600/bt-google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; }
.cb_socialwidget ul li .linkedin { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLBIeZZ2IKQjC8xF-MNEA275_nAeexSNZPHO0dwtvU-RxLBM7U54OvwsTelfmBTbmCRmFSseaXBjpda-glHrLV6a0RdiKKPxV3HU6BzqPi0u1JCWJZONMTA6u8SvNju_u8578Z1TLOz2w/s1600/bt-LinkedIn.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; }
.cb_socialwidget ul li .youtube { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMAx0b_pxLG16rQgdjzIBFazZ5zjVqsAUdbpK_PXV9R74p7fph6XjxvtyaUcxsc4xIIrxp5tgunF-Di03c7VFsx5Mx_zNO-2Gfa4OgbSGUIBaMX4Ba1b5qdnGDMRBQpKDQSR0py0spQCU/s1600/bt-Youtube.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; }
.social-about { display: none; }
</style>
<div class="cb_socialwidget">
<ul>
<li><a class="rss" href="https://feedburner.google.com/fb/a/mailverify?uri=contohblog&amp;loc=en_US" target="popupwindow">Subscribe to CB Blogger</a></li>
<li><a class="twitter" href="http://twitter.com/contohblog/">Follow us on Twitter</a></li>
<li><a class="facebook" href="http://facebook.com/cbblogger/">Find us on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/106869251529186655236/" rel="author">Join us on Google+</a></li>
<li><a class="linkedin" href="https://www.linkedin.com/in/cbblogger/">Connect on LinkedIn</a></li>
<li><a class="youtube" href="https://www.youtube.com/c/CBBlogger/">Watch us on YouTube</a></li>
</ul>
</div>

Ganti ID Medsos warna merah dengan kepunyaan Anda.

Demikian Cara Pasang Widget Akun Media Sosial di Sidebar Blog. Lihat: Gaya & Jenis Widget Media Sosial Lainnya. Good luck and Happy Blogging! (http://www.contohblog.com).*