Cara Pasang Widget Akun Media Sosial di Sidebar Blog

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:

Widget Akun Media Sosial di Sidebar Blog

CARA PASANG
Cara memasangnya sebagai berikut:

    Layout > Add a Gadget > HTML/Javascript
    Isi Judul dengan "Join us" atau Kosongkan
    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("http://2.bp.blogspot.com/-NdgYDGOx2WU/UXTEcMCT-

_I/AAAAAAAAAfQ/VtwyVKuNdJY/s1600/bt-RSS.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; }
.cb_socialwidget ul li .twitter { background: url("http://4.bp.blogspot.com/-9sG2X-

wrCeY/UXTEchAQ2HI/AAAAAAAAAfg/gtq9mwSHC1g/s1600/bt-Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px

60px;}
.cb_socialwidget ul li .facebook { background: url("http://4.bp.blogspot.com/-

Q6uMZtVZjHo/UXTEcAQSlHI/AAAAAAAAAfY/ePt9AJoqCrE/s1600/bt-Facebook.png") no-repeat scroll 10px center #3B5998; padding:

17.5px 60px; }
.cb_socialwidget ul li .google { background: url("http://3.bp.blogspot.com/-57g4ooxoC6U/UXTEc0EniXI/AAAAAAAAAfk/G1HU6s-

_UTM/s1600/bt-google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; }
.cb_socialwidget ul li .linkedin { background: url("http://1.bp.blogspot.com/-sSNL3X-

MkxE/UXTEcJxsHGI/AAAAAAAAAfU/MFYv7v3vAPo/s1600/bt-LinkedIn.png") no-repeat scroll 10px center #3692C3; padding: 17.5px

60px; }
.cb_socialwidget ul li .youtube { background: url("http://3.bp.blogspot.com/-

foQvV9Mgig4/UXTEcjfOZPI/AAAAAAAAAfo/kTKqKaFiKNU/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.