Cara Menambahkan Font Awesome Ikon Sosial Di Blogger
Ini hampir tidak mungkin hari ini kita temukan blog atau situs tanpa setidaknya satu akun media umum milik mereka. Baik itu Twitter atau Facebook, Instagram atau Pinterest , atau sejenisnya. Dalam hal ini, semakin terang ialah bahwa media umum membantu meningkatkan kehadiran online Anda.
Lewatlah sudah hari-hari Anda untuk mengandalkan hasil mesin pencari bau tanah saja. Hari-hari ini, mungkin Anda tidak mendapat peringkat yang baik untuk kata kunci di Google atau mesin pencari lain, tetapi Anda sanggup meluncurkan kampanye media umum yang dibutuhkan sanggup memperlihatkan hasil yang anda inginkan.
Pada dasarnya, situs dan media umum kebutuhan untuk saling mengisi. Satu tidak sanggup hidup tanpa yang lain, bila Anda ingin cara lain untuk menggambarkannya. Media sosial ialah salah satu pembalap terbaik dari kemudian lintas di internet, dan bila Anda ingin meningkatkan peluang Anda untuk terlihat, maka Anda harus mendapat account di satu atau lebih platform asalkan cocok dengan identitas Anda.
Penyebaran Kesadaran Kehadiran Sosial Media Anda
Setelah Anda menyiapkan akun media umum Anda, Anda tidak hanya meninggalkannya di sana untuk ditemukan. Tentu, Anda dapat menggunakan hashtags dan berkomunikasi dengan para pemimpin industri, tetapi itu tidak cukup untuk membawa kesadaran kepada pelanggan Anda.
Untuk memberi tau mereka bahwa anda juga hadir di Facebook, Twitter, Instagram, Vine atau Pinterest, Anda harus memanfaatkan real estate di website Anda.
Bagaimana tepatnya, Anda bertanya? Nah, dengan cara ikon sosial. Ikon sosial ialah gambar-gambar kecil yang Anda lihat yang mewakili simbol terkait dengan jejaring sosial tertentu. Misalnya, ikon sosial Twitter biasanya mempunyai burung biru. Jika tidak, maka surat T abjad kecil.
Kehadiran gambar-gambar ini mengingatkan pemirsa bahwa mereka mempunyai cara lain yang up to date. Penggunaan media umum cukup tinggi hari ini berkat kedekatan medium serta faktor menyenangkan.
Dan lebih mungkin daripada tidak, audiens Anda akan ingin tahu apakah Anda berada di jejaring sosial. Jika Anda pada platform Blogger, Anda sanggup menambahkan representasi media umum melalui Font ikon sosial yang mengagumkan/keren .
Apa Font Awesome?
Font Awesome "memberikan ikon scalable vector yang sanggup eksklusif diadaptasi - ukuran, warna, drop shadow, dan apa pun yang sanggup dilakukan dengan kekuatan CSS".
Pada intinya, itu berfungsi sebagai toolkit di mana Anda mendapat kanal ke lebih dari 500 ikon untuk dipakai di situs Anda secara gratis. Sekarang, bila Anda telah memakai ikon media umum sebelumnya, Anda tahu bahwa ada varietas non-vektor. Tapi yang ditawarkan oleh Font Awesome ialah ikon scalable vector, dan dalam jangka panjang, mereka ialah pilihan yang lebih baik untuk situs Anda.
Mengapa? Yah, alasan yang sangat cantik akan bahwa gambar meluangkan waktu untuk memuat. Ya, gambar-gambar ini kecil tapi pada dasarnya masih berdiri. Plus, gambar cenderung kehilangan kualitas mereka sebagai kenaikan resolusi komputer.
Dengan kata lain, bila Anda ingin ikon Anda memuat lebih cepat dan mempunyai tampilan yang bagus, segar dan bersih, maka Anda lebih baik dengan memakai koleksi Font awesome. Juga, kesempatan untuk menyesuaikan ikon yang sesuai terang merupakan faktor yang menarik juga.
Mengapa Anda harus mulai memakai Font Awesome?
Dari sekian banyak penyedia di luar sana, mengapa tetap dengan Font Awesome?
- Koleksi ikon . Anda tidak hanya akan menemukan ikon sosial media di sini, tapi ikon tradisional lainnya juga.
- Dukungan CSS . Dengan CSS, Anda sanggup menyesuaikan ikon sesuai dengan apa yang sesuai dengan situs anda. Anda sanggup bermain-main dengan warna, ukuran, bayangan dan komponen lainnya. Ini ialah sesuatu yang sangat kurang dengan gambar non-vektor alasannya ialah Anda terjebak dengan ikon yang Anda pilih.
- Kecepatan . Gambar vektor yang ringan dan alasannya ialah itu memuat lebih cepat.
- Gratis . Anda tidak perlu membayar sepeserpun ketika Anda memakai Font Keren.
Jadi kini Anda tahu pentingnya ikon sosial di situs Anda, saatnya untuk belajar bagaimana menambahkan Font Keren ikon di Blogger .
Menambahkan Font Keren Ikon Sosial di Blogger
Penambahan ikon untuk Blogger Anda bukan ilmu roket. Bahkan, proses ini cukup sederhana.
Inilah yang harus Anda lakukan:
Tambahkan Font Keren Stylesheet ke Blogger
Ikuti langkah-langkah di bawah ini untuk mendapat Font Keren kerja dengan blog Anda:
2. Menyalin seluruh direktori font-mengagumkan dalam proyek Anda .
3. Buka Dashboard Blogger Anda, pergi ke Template dan tekan tombol Edit HTML. Cari <head> tag kemudian tambahkan baris isyarat acuan lokasi stylesheet font-awesome.min.css Anda.
 |
Atau bila Anda lebih menentukan cara termudah, tambahkan baris ini sempurna di bawah <head> tag:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
4. Mulai bermain dengan Font Awesome!
Menggunakan Font Awesome Icons
Setelah Anda melaksanakan langkah-langkah di bab sebelumnya, Anda kini siap untuk memakai Font Keren di blog Anda.
Hal pertama yang perlu Anda lakukan ialah menambahkan ikon sosial link ke HTML dan menghapus ikon yang tidak perlu lagi. Ini ialah HTML sampel yang sanggup Anda tambahkan:
<div id="fawesomeicons"><a href="URL-HERE" title="Cara Menambahkan Font Awesome Ikon Sosial di Blogger" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a><a href="URL-HERE" title="Cara Menambahkan Font Awesome Ikon Sosial di Blogger" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a><a href="URL-HERE" title="Cara Menambahkan Font Awesome Ikon Sosial di Blogger" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a><a href="URL-HERE" title="Cara Menambahkan Font Awesome Ikon Sosial di Blogger" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a><a href="URL-HERE" title="Cara Menambahkan Font Awesome Ikon Sosial di Blogger" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a><a href="URL-HERE" title="Cara Menambahkan Font Awesome Ikon Sosial di Blogger" target="_blank" rel="nofollow"><i class="fa fa-heart"></i></a><a href="URL-HERE" title="Cara Menambahkan Font Awesome Ikon Sosial di Blogger" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a><a href="URL-HERE" title="Cara Menambahkan Font Awesome Ikon Sosial di Blogger" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a></div>
Dalam isyarat HTML di atas, kita sanggup melihat 8 ikon sosial yang terpisah yang sanggup dikenali dengan melihat atribut link judul. Misalnya, yang pertama ialah untuk Facebook.
Untuk memakai ikon sosial, tempelkan URL Anda di mana dikatakan URL-HERE untuk setiap ikon sosial yang ingin Anda sertakan.
Menempatkan kekerabatan antara tanda kutip dan pastikan untuk tidak menghapus salah satu tanda kutip. Jika Anda ingin menghapus ikon sosial, hapus saja baris isyarat yang dimulai dengan "<a href" dan berakhir dengan "</a>".
Sekarang, perlu diingat bahwa Font awesome karya mana saja dengan <i> tag menyerupai yang dirancang untuk bekerja dengan elemen inline. Meskipun Anda sanggup memakai <span>, dokumentasi resmi lebih suka <i>pilihan untuk singkatnya.
Font Keren ikon sanggup ditempatkan di manapun dengan memakai CSS awalan fa bersama-sama dengan nama ikon. Untuk daftar nama ikon media sosial , Anda sanggup merujuk ke situs resmi Font Keren.
Mari kita menyampaikan bahwa Anda ingin menampilkan ikon Youtube sehingga Anda sanggup menghubungkannya dengan akun resmi pada platform. Cari ikon Youtube pada daftar dan klik di atasnya:
 |
Yang akan membawa Anda ke sebuah halaman untuk Youtube di mana Anda akan melihat isyarat ini:
 |
Untuk menyertakan ikon dalam daftar, salin setiap baris dimulai dengan "<a href" dan berakhir dengan "</a> dari isyarat di atas, tempelkan di mana Anda ingin untuk muncul dan ganti isyarat dimulai dengan" <i class = " fa "dan diakhiri dengan" </ i> "dengan ikon yang Anda pilih.
Akhirnya, sehabis menambahkan ikon, daftar akan terlihat menyerupai ini:
<div id="fawesomeicons"><a href="URL-HERE" title="Cara Menambahkan Font Awesome Ikon Sosial di Blogger" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a><a href="URL-HERE" title="Cara Menambahkan Font Awesome Ikon Sosial di Blogger" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a><a href="URL-HERE" title="Cara Menambahkan Font Awesome Ikon Sosial di Blogger" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a><a href="URL-HERE" title="Cara Menambahkan Font Awesome Ikon Sosial di Blogger" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a><a href="URL-HERE" title="Cara Menambahkan Font Awesome Ikon Sosial di Blogger" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a><a href="URL-HERE" title="Cara Menambahkan Font Awesome Ikon Sosial di Blogger" target="_blank" rel="nofollow"><i class="fa fa-heart"></i></a><a href="URL-HERE" title="Cara Menambahkan Font Awesome Ikon Sosial di Blogger" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a><a href="URL-HERE" title="Cara Menambahkan Font Awesome Ikon Sosial di Blogger" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a><a href="URL-HERE" title="Cara Menambahkan Font Awesome Ikon Sosial di Blogger" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i></a></div>
Catatan: jangan lupa untuk mengubah judul dan menambahkan URL Anda antara tanda kutip. Setelah Anda selesai mengedit ikon, masukkan isyarat ke dalam HTML / Javascript gadget dengan pergi ke "Layout" dan klik pada "Tambah gadget "link.
Jika Anda memakai WordPress, paste di widget Text.
Menyesuaikan Font Keren Ikon Menggunakan CSS
Misalkan Anda ingin menciptakan ikon jauh lebih besar dikala ini. tugas yang dibentuk sederhana dengan memakai CSS.
Berikut ialah pola kode:
#fawesomeicons a {font-size: 16px;width: 30px;height: 30px;line-height: 30px;}
Untuk mengubah ukuran font, tambah atau kurangi angka 16px. Berikut ialah nilai-nilai (30px) untuk lebar dan tinggi wadah yang harus disesuai.
Peningkatan/penurunan nilai-nilai ini, akan meningkatkan/mengurangi ukuran wadah di mana font. Berikut ialah beberapa gaya yang berbeda untuk font ikon sosial mengagumkan.
Dalam CSS, mencari # background-color , # border-color , # font-warna dan # hover warna teks sehingga Anda sanggup tahu di sini untuk menempatkan isyarat warna. Anda sanggup memakai alat ini untuk menghasilkan isyarat warna: Warna Kode Generator.
 |
#fawesomeicons {text-align: center;}#fawesomeicons a {background: #background-color;color: #font-color;display: inline-block;font-size: 16px;width: 30px;height: 30px;line-height: 30px;margin: 0 1px 6px;}#fawesomeicons a:hover{background: #hover-color;}
 |
#fawesomeicons {text-align: center;}#fawesomeicons a {background: #background-color;color: #font-color;display: inline-block;font-size: 16px;width: 30px;height: 30px;line-height: 30px;margin: 0 1px 6px;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;}#fawesomeicons a:hover{background: #hover-color;}
 |
#fawesomeicons {text-align: center;}#fawesomeicons a {border: 1px solid #border-color;color: #font-color;display: inline-block;font-size: 16px;width: 30px;height: 30px;line-height: 30px;margin: 0 1px 6px;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;}#fawesomeicons a:hover{background: #hover-color;}
 |
#fawesomeicons {text-align: center;}#fawesomeicons a {border: 1px solid #border-color;color: #font-color;display: inline-block;font-size: 16px;width: 30px;height: 30px;line-height: 30px;margin: 0 1px 6px;}#fawesomeicons a:hover{background: #hover-color;}
 |
#fawesomeicons {text-align: center;}#fawesomeicons a {color: #font-color;display: inline-block;font-size: 23px;margin: 0 6px 6px;}#fawesomeicons a:hover{background: #hover-color;}
Sekarang, bagaimana bila kita ingin mengubah latar belakang atau warna font dari ikon tertentu?
Pertama, kita perlu mengidentifikasi kelas icon yang hanya sehabis <i class = "fa ..." dan tambahkan menyerupai ini:
#fawesomeicons a .fa-facebook {background: #background-color;color: #font-color;}
Di sini, kita sanggup mengubah warna latar belakang ikon Facebook, kita sanggup melakukannya untuk setiap ikon yang Anda inginkan. Sebagai contoh, mari kita tambahkan hukum lain untuk ikon twitter:
#fawesomeicons a .fa-facebook {background: #background-color;color: #font-color;} #fawesomeicons a .fa-twitter {background: #background-color;color: #font-color;}
Untuk menciptakan font lebih besar, kita sanggup menambahkan isyarat CSS menyerupai ini:
#fawesomeicons {text-align: center;}#fawesomeicons a .fa{display: inline-block;font-size: 16px;width: 30px;height: 30px;line-height: 30px;}#fawesomeicons a .fa-facebook {background: #background-color;color: #font-color;} #fawesomeicons a .fa-twitter {background: #background-color;color: #font-color;}
Untuk menerapkan, copy isyarat di atas dan tambahkan hukum CSS dengan class ikon yang ingin Anda ubah.
Penting: (.) Ketika menambahkan class untuk ikon Anda, selalu menempatkan sebuah titik di depannya menyerupai yang Anda lihat dalam pola di atas, bila tidak maka tidak akan bekerja.
Itu saja! Mudah-mudahan, tutorial ini membantu Anda untuk menambahkan Font ikon sosial yang mengagumkan di Blogger. Jika Anda masih dalam kesulitan menambahkan mereka, silakan lihat di halaman Contoh.