Cara Memasang Link Media Sosial di Sidebar Blogger

Baca Juga

Cara Memasang Link Media Sosial di Sidebar Blogger

Link Media Sosial di Sidebar Blogger penting untuk menambah follower. Widget icon link Medsos juga akan memudahkan pengunjung mengikuti update postingan blog karena biasanya tulisan terbaru dishare di akun media sosial --terutama Facebook dan Twitter.

Bagi Anda yang ingin Memasang Link Media Sosial di Sidebar Blog, misalnya karena tidak ada di navigasi menu atau header, berikut ini alternatifnya. Tampilannya seperti gambar di bawah ini.

Media sosial terpopuler saat ini adalah Facebook, Twitter, Youtube, Google Plus, dan Instagram. Semuanya kita pasang dalam tutorial ini.

Cara Memasang Link Media Sosial di Sidebar Blogger

Berikut ini cara memasang Link Media Sosial di Sidebar Blog Blogger, tanpa harus edit template. Sangat mudah. Pasang melalui layout > widget di dashboard blogger.

1. Login ke akun Blogger Anda.
2. Klik Layout (Tata Letak) > Add a Gadget > pilih widget HTML/JavaScript.
3. Copas kode berikut ini di kolom konten:

<style>
.social-profiles-widget{width:100%;height:auto;padding:0}
.social-profiles-widget ul {list-style: none;float: RIGHT;padding: 0;}
.social-profiles-widget ul li{list-style:none;margin:0;display:inline}
.social-profile .fa {width:50px;height:45px;color:rgba(255,255,255,0.8);text-align:center;line-height: 45px;
font-size: 2em;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;margin-right: 5px;}
.social-profile .fa-facebook{background:#3b5998}
.social-profile .fa-twitter{background:#55acee}
.social-profile .fa-youtube{background:#cc181e}
.social-profile .fa-instagram{background:#9c694c}
.social-profile .fa-google-plus{background:#d34836}
.social-profile .fa:hover,.social-profile .fa:active{color:#FFF;-webkit-box-shadow:1px 1px 3px #333;-moz-box-shadow:1px 1px 3px #333;box-shadow:1px 1px 3px #333}
</style>
<div class='social-profiles-widget'>
 <ul class='social-profile circle'>
 <li><a href='#'><i class='fa fa-facebook'/></i></a></li>
 <li><a href='#'><i class='fa fa-twitter'/></i></a></li>
 <li><a href='#'><i class='fa fa-youtube'/></i></a></li>
 <li><a href='#'><i class='fa fa-google-plus'/></i></a></li>
 <li><a href='#'><i class='fa fa-instagram'/></i></a></li>
 </ul>
</div>

4. Ganti tanda pagar (#) dengan url link akun media sosial Anda.
5. Save! Simpan template.

JIKA tidak muncul, tambahkan kode link ke font awesome berikut ini di atas kode </head> di dalam template Anda.

Klik Tema > Edit HTML, lalu copas kode berikut ini di atas kode </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Selesai!

Demikian Cara Memasang Link Media Sosial di Sidebar Blogger. Good Luck & Happy Blogging! (www.contohblog.com).*