CSS Widget Sosial Media dengan Icon Font Awesome

Cara Membuat Widget Sosial Media dengan Icon Font Awesome, Trik CSS Blogger

Sosial Media merupakan salah satu media yang jadi ladang bisnis. Banyak orang menjual produk dan jasa hanya dengan memanfaatkan sosial media seperti Facebook, Twitter, Instagram dan Google Plus. Mereka bahkan tidak memiliki website, hanya mengandalkan sosial media sebagai media promosi.

Bagi anda yang memiliki website, tentunya widget sosial media juga penting agar interaksi anda dan pengunjung website lebih luas. Dengan ini anda juga bisa memanfaatkan website anda sebagai media untuk mengembangkan sosial media anda.

Kali ini, saya akan membagikan tutorial mengenai cara membuat Widget Sosial Media dengan menggunakan CSS. Widget ini saya buat lengkap dengan icon sosial media populer, yaitu Facebook, Instagram, Google Plus dan Twitter. Icon saya dapatkan dengan menggunakan Font Awesome.

Anda bisa menerapkan widget ini pada semua CMS karena hanya menggunakan CSS dan HTML. Tapi kali ini, saya akan mencontohkan penerapan pada Blogger.com

Memanfaatkan CSS :before Untuk Menempatkan Icon

Silahkan pergi ke Blogger.com dan buka salah satu blog anda. Lalu buka tab Themes - Edit HTML.

Anda perlu menambahkan Font Awesome sebelum tag </head>. Silahkan copy dan paste kode di bawah ini


<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">

Kemudian copy kode CSS di bawah ini. Bagi anda yang menggunakan template non-AMP, copy sebelum kode ]]</b:skin> atau style. Bagi anda yang menggunakan template Blogger AMP, copy di bawah kode <style amp-custom='amp-custom'>


#sosmed {

  max-width:315px;

  width:100%;

  height:300px;

  background:transparent;

  position:relative;

  overflow:hidden;

  margin:0;

  text-align:center;

  text-align: align;

  text-justify: inter-word;

}


#sosmed a{color:#444;text-align:align;display:inline-block;text-decoration:none;width:calc(48%);height:48%;margin:4px 0;background:#f5f5f5}

#sosmed a:hover{background:#444}


/*facebook plus*/

#sosmed a.fb:before{display:block;content:"\f230";font-family:FontAwesome;font-size:40px;padding:45px}

#sosmed a.fb:hover{color:#1B9CFC}

/*instagram plus*/

#sosmed a.ig:before{display:block;content:"\f16d";font-family:FontAwesome;font-size:40px;padding:45px}

#sosmed a.ig:hover{color:#B33771}

/*google plus*/

#sosmed a.plus:before{display:block;content:"\f0d4";font-family:FontAwesome;font-size:40px;padding:45px}

#sosmed a.plus:hover{color:#FD7272}

/*twitter*/

#sosmed a.tw:before{display:block;content:"\f081";font-family:FontAwesome;font-size:40px;padding:45px}

#sosmed a.tw:hover{color:#25CCF7}

Jika sudah selesai, Klik SAVE Template.

Informasi

Kode CSS di atas, saya memanfaatkan CSS :before untuk memanggil icon font awesome ke dalam class yang saya buat. Sebagai informasi, css:before akan menempatkan class sebelum konten utama pada class/selector anda.

Bagi kamu yang ingin mengganti Icon yang saya buat, silagan ganti unicode nya. Lihat di https://fontawesome.com/v4.7.0/icons/ untuk unicode fontawesome yang bisa diterapkan.

Menambkan Widget Sosial Media

Selanjutnya, kita akan menambahkan Widget baru pada template Blogger. Klik tab Layout, lalu klik Add a Gadget, maka akan muncul windows pop-up.

Pilih HTML/Javascript dan paste kode di bawah ini, ganti sosial media URL, dan klik Add/Ok.


<div id='sosmed'>

  <a href='https://facebook.com/username' class='fb' target='_blank' rel='nofollow noopener'></a>

  <a href='https://instagram.com/username' class='ig' target='_blank' rel='nofollow noopener'></a>

  <a href='https://plus.google.com/username' class='plus' target='_blank' rel='nofollow noopener'></a>

  <a href='https://twitter.com/username' class='tw' target='_blank' rel='nofollow noopener'></a>

</div>

* Ganti semua username dengan username akun sosial media anda.

Untuk demo widget diatas, silahkan klik button di bawah

Dengan hanya memanfaatkan CSS, anda bisa berkreasi dengan mudah. Bisa dilihat dari hasil kombinasi css :before dan :hover di atas, widget sosial media tersebut terlihat semakin menarik.

Itulah tutorial mengenai Cara membuat Widget Sosial Media Dengan Font Awesome di Blogger. Semoga bermanfaat

Baca Trik HTML Blogger Lainnya: