Cara Membuat Widget Sosial Media Keren Di Blog Ala Arlina Design

Cara Membuat Widget Sosial Media Keren Di Blog Ala Arlina Design - Sudah tau maksud dari Widget Sosial Media ? jika belum maksudnya adalah sekumpulan widget untuk memberitahu kepada pengunjung akun sosial media yang kita miliki dalam bentuk sebuah button atau tombol, nah button disini sudah dimodifikasi oleh Arlina Design dalam templatenya yang bernama Invision, tampilan button widget sosial media ini sudah keren dan dilengkapi dengan Font Awesome untuk mempercantiknya.

Jadi diperlukan javascript Font Awesome di blog sobat agar widget ini bekerja dengan baik dan tampilannya sempurna tentunya, karena bisa dibilang 50% dari widget ini didiominasi oleh Font Awesome sebagai logo dari sosial medianya, di widget ini ada sosial media Facebook, Instagram, Google+, Twitter, dan Pinterest, sobat bisa menggantinya sesuka hati sobat dengan mengganti icon Font Awesomenya.

Membuat Widget Sosial Media Keren Di Blog Dengan Font Awesome

1. Pertama - tama silahkan sobat menuju ke Blogger > Template > Edit HTML

Sebelumnya karena widget ini menggunakan Font Awesome, jika blog sobat tidak memiliki Font Awesome silahkan letakkan Javascript dibawah ini tepat diatas kode </head>

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
//]]>
</script>

2. Cari kode ]]></b:skin> atau </style> di template sobat, untuk template zaman sekarang sih biasanya letakkan di atas </style> saja, gunakan Ctrl+F untuk memudahkan pencarian kodenya, lalu letakkan kode CSS widget sosial media di bawah ini tepat diatasnya

.extender{text-align:center;font-size:16px;margin:0;padding:0;}
.extender .aboutme-icon{background:rgba(0,0,0,.06);display:inline-block;border:0;margin:0;padding:0;border-radius:3px}
.extender .aboutme-icon:hover{background:#bbb;}
.extender .aboutme-icon a{display:inline-block;font-family:fontawesome;font-weight:400;color:#aaa;height:32px;width:32px;line-height:32px;border-radius:3px}
.extender .aboutme-icon:hover a,.extender .aboutme-icon a:hover{color:#fff;}

3. Klik Simpan template
4. Sekarang klik menu Tata Letak > lalu klik Tambahkan Gadget > lalu cari dan pilih HTML/Javascript
5. Masukkan HTML widget sosial media dibawah ini kedalamnya, untuk bagian judul terserah sobat, tidak di isi juga tidak apa - apa

<ul class='extender'>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'></i></a></li>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Instagram'><i class='fa fa-instagram'></i></a></li>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Google+'><i class='fa fa-google-plus'></i></a></li>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'></i></a></li>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Pinterest'><i class='fa fa-pinterest-p'></i></a></li>
</ul>

6. Ganti dan sesuaikan tanda pagar " # " dengan link sesuai sosial media sobat
7. Klik tombol Simpan, dan lihat perubahannya di blog sobat.

Sekian artikel kali ini mengenai Cara Membuat Widget Sosial Media Keren Di Blog Ala Arlina Design, semoga berhasil membuatnya.