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 ibarat Facebook, Twitter, Instagram dan Google Plus. Mereka bahkan tidak mempunyai website, hanya mengandalkan sosial media sebagai media promosi.
Bagi anda yang mempunyai website, tentunya widget sosial media juga penting semoga interaksi anda dan pengunjung website lebih luas. Dengan ini anda juga sanggup memanfaatkan website anda sebagai media untuk menyebarkan sosial media anda.
Kali ini, saya akan membagikan tutorial mengenai cara menciptakan Widget Sosial Media dengan memakai CSS. Widget ini saya buat lengkap dengan icon sosial media populer, yaitu Facebook, Instagram, Google Plus dan Twitter. Icon saya dapatkan dengan memakai Font Awesome.
Anda sanggup menerapkan widget ini pada semua CMS alasannya yakni hanya memakai 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 instruksi 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 instruksi CSS di bawah ini. Bagi anda yang memakai template non-AMP, copy sebelum instruksi
]]</b:skin> atau style. Bagi anda yang memakai template Blogger AMP, copy di bawah instruksi <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.
Bagi kau yang ingin mengganti Icon yang saya buat, silagan ganti unicode nya. Lihat di
Pilih HTML/Javascript dan paste instruksi di bawah ini, ganti sosial media URL, dan klik Add/Ok.
* Ganti semua username dengan username akun sosial media anda.
Untuk demo widget diatas, silahkan klik button di bawah
Dengan hanya memanfaatkan CSS, anda sanggup 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 menciptakan Widget Sosial Media Dengan Font Awesome di Blogger. Semoga bermanfaat
Baca Trik HTML Blogger Lainnya:
InformasiKode 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 kau yang ingin mengganti Icon yang saya buat, silagan ganti unicode nya. Lihat di
https://fontawesome.com/v4.7.0/icons/ untuk unicode fontawesome yang sanggup diterapkan.Menambkan Widget Sosial Media
Selanjutnya, kita akan menambahkan Widget gres pada template Blogger. Klik tab Layout, kemudian klik Add a Gadget, maka akan muncul windows pop-up.Pilih HTML/Javascript dan paste instruksi 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 sanggup 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 menciptakan Widget Sosial Media Dengan Font Awesome di Blogger. Semoga bermanfaat
Baca Trik HTML Blogger Lainnya:
