Cara Memasang Widget Ikon Sosial Media Di Sidebar Blog

Memasang widget ikon sosial media pada suatu blog merupakan salah satu cara yang efektif dalam mempererat hubungan pengunjung blog dengan pemilik blog.

Dengan anda menerapkan ikon sosial media ini pula, maka para pengunjung anda bisa mengetahui setiap update artikel yang mungkin anda bagikan melalui sosial media.

Ada beberapa jenis tema atau template blog yang sudah secara default memiliki fitur ikon sosial media ini, jadi anda hanya perlu mengisi link akun sosial media anda saja.

Namun bagaimana dengan mereka yang menggunakan tema blog tanpa adanya widget ikon sosial media?

Tenang saja, karena pada kesempatan kali ini saya akan memberikan sebuah cara mudah untuk memasang widget ikon sosial media di blog anda.

Untuk lebih jelasnya anda bisa melihat caranya dibawah ini:

1. Login terlebih dahulu ke blogger
2. Pada dashboard blogger silahkan pilih Tata Letak>>Tambahkan Gadget>>HTML/Javascript
3. Kemudian masukan kode berikut:

<style>
.social-proles-widget{width:100%;height:auto;padding:0}
.social-proles-widget
ul {list-style: none;oat:
RIGHT;padding: 0;}
.social-proles-widget
ul li{list-style:none;margin:0;display:inline}
.social-prole
.fa {width:50px;height:45px;color:rgba(255,255,255,0.8);textalign:center;line-height:
45px;
font-size: 2em;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s easein-out;-ms-transition:
all 0.5s ease-in-out;-o-transition: all 0.5s ease-inout;transition:
all 0.5s ease-in-out;margin-right: 5px;}
.social-prole
.fa-facebook{background:#3b5998}
.social-prole
.fa-twitter{background:#55acee}
.social-prole
.fa-youtube{background:#cc181e}
.social-prole
.fa-instagram{background:#9c694c}
.social-prole
.fa-google-plus{background:#d34836}
.social-prole
.fa:hover,.social-prole
.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-proles-widget'>
 <ul class='social-prole
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 semua kode "#" dengan link url akun sosial media anda
5. Simpan dan selesai

Jika cara diatas belum berhasil, maka anda harus memasukkan terlebih dahulu kode font awesome kedalam tema blog anda. Caranya adalah sebagai berikut:

1. Masuk ke Tema>>Edit HTML
2. Cari kode </head>
3. Lalu pastekan kode berikut diatas kode </head> tadi

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

4. Simpan Tema dan selesai.

Penutup

Nah itu cara memasang ikon sosial media di sidebar blog. Dengan adanya ikon ini, maka para pengunjung anda akan lebih mengenal siapa sih pemilik blog yang mereka kunjungi.

Oke saya rasa hanya itu saja yang dapat saya sampaikan, kurang lebihnya mohon maaf. Akhir kata saya ucapkan terimakasih dan sampai jumpa.

Bagikan Artikel ini