detikjam.com - Cara Memasang Widget Media Sosial di Sidebar Blog. Tips Membuat Ikon Link Akun Medsos di Sidebar Blog untuk SEO, Trafik, dan Likers/Followers.
SOCIAL atau media sosial menjadi salah satu pilar SEO blog. Widgetnya bisa dipasang di sidebar blog, misalnya di atas kotak berlanggganan (subscription box). Ini salah satu jenis tampilannya:
Menurut para ahli, fungsi link akun media sosial yang dipasang di blog antara lain "attract new readers and engage with regulars", menarik pembaca baru dan "merawat" pengunjung setia.
Berikut ini cara menampilkan, menambah, atau memasang widget icon/link media sosial di sidebar blog yang juga berfungsi menambah follower, liker, dan teman. DEMO-nya bisa dilihat di ilustrasi gambar posting ini.
Tentu atuh, sebelumnya teh, Anda harus sudah punya akun-akun medsosnya, terutama: facebook, twitter, google plus, linkedin, pinterest, instagram, dan youtube.
Banyak pilihan Widget Ikon Link Media Sosial di Sidebar Blog. Anda tinggal pilih salah satu.
Cara Memasang Widget Ikon Media Sosial di Sidebar Blog
Pilihan pertama icon link medsos di sidebar blogger. Bisa dipasang di sidebar, header, atau footer.
Cara Memasangnya.
Untuk memasang di sidebar blog, sangat mudah.
1. Login ke Blogger.
2. Klik Layout (Tata Letak) > Add a Gadget > pilih HTML/JavaScript.
3. Copas kode berikut ini di kolom konten:
<style>
.social-profiles-widget{width:100%;height:auto;padding:10px 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><div class='clear'/>
4. Ganti tanda pagar (#) dengan url link akun media sosial Anda.
5. Save! Simpan.
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'/>