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 renta 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 diperlukan sanggup menawarkan hasil yang anda inginkan.
Pada dasarnya, situs dan media umum kebutuhan untuk saling mengisi. Satu tidak sanggup hidup tanpa yang lain, kalau Anda ingin cara lain untuk menggambarkannya. Media sosial ialah salah satu pembalap terbaik dari kemudian lintas di internet, dan kalau 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 karakter 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 pribadi diubahsuaikan - ukuran, warna, drop shadow, dan apa pun yang sanggup dilakukan dengan kekuatan CSS".
Pada intinya, itu berfungsi sebagai toolkit di mana Anda mendapat saluran ke lebih dari 500 ikon untuk dipakai di situs Anda secara gratis. Sekarang, kalau 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 anggun 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, kalau 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 Anda terjebak dengan ikon yang Anda pilih.
- Kecepatan . Gambar vektor yang ringan dan alasannya 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 instruksi referensi lokasi stylesheet font-awesome.min.css Anda.
 |
Atau kalau 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 instruksi 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 korelasi antara tanda kutip dan pastikan untuk tidak menghapus salah satu tanda kutip. Jika Anda ingin menghapus ikon sosial, hapus saja baris instruksi yang dimulai dengan "<a href" dan berakhir dengan "</a>".
Sekarang, perlu diingat bahwa Font awesome karya mana saja dengan <i> tag ibarat 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 instruksi ini:
 |
Untuk menyertakan ikon dalam daftar, salin setiap baris dimulai dengan "<a href" dan berakhir dengan "</a> dari instruksi di atas, tempelkan di mana Anda ingin untuk muncul dan ganti instruksi dimulai dengan" <i class = " fa "dan diakhiri dengan" </ i> "dengan ikon yang Anda pilih.
Akhirnya, sehabis menambahkan ikon, daftar akan terlihat ibarat 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 instruksi 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 ketika ini. tugas yang dibentuk sederhana dengan memakai CSS.
Berikut ialah referensi 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 instruksi warna. Anda sanggup memakai alat ini untuk menghasilkan instruksi 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 kalau 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 ibarat 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 instruksi CSS ibarat 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 instruksi 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 ibarat yang Anda lihat dalam referensi di atas, kalau 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.
Mari berteman dengan saya
Follow my Instagram _yudha58
0 Response to "Cara Menambahkan Font Awesome Ikon Sosial Di Blogger"
Posting Komentar