Funkysst.com: Desain Blog
Showing posts with label Desain Blog. Show all posts
Showing posts with label Desain Blog. Show all posts

Saturday, March 3, 2018

Bagaimana Cara Menambahkan Font Ikon Sosial yang Luar Biasa di Blogger

Hampir tidak mungkin menemukan blog atau situs akhir-akhir ini tanpa setidaknya satu akun media sosial untuk nama mereka. Baik itu Twitter atau Facebook, Instagram atau Pinterest , atau semua hal dalam hal ini, apa yang menjadi semakin jelas adalah media sosial membantu meningkatkan kehadiran online Anda.

Lewatlah sudah hari-hari ketika Anda terbiasa mengandalkan hasil pencarian mesin telusur yang bagus saja. Hari-hari ini, mungkin Anda tidak berperingkat bagus dalam hasil kata kunci Anda di Google atau mesin pencari lainnya, namun Anda bisa meluncurkan kampanye media sosial yang semoga bisa memberi Anda hasil yang Anda inginkan.

Intinya, situs dan media sosial Anda perlu hidup berdampingan. Seseorang tidak bisa hidup tanpa yang lain, jika Anda menginginkan cara lain untuk menaruhnya. Media sosial adalah salah satu penggerak lalu lintas terbaik di internet, dan jika Anda ingin meningkatkan kesempatan Anda terlihat, maka Anda harus mendapatkan akun di satu atau beberapa platform asalkan sesuai dengan identitas merek Anda.

ikon sosial keren

Menyebarkan Kesadaran Keberadaan Media Sosial Anda

Begitu Anda menyiapkan akun media sosial Anda, Anda tidak hanya membiarkannya ditemukan. Tentu, Anda bisa memanfaatkan hashtag dan berkomunikasi dengan para pemimpin industri, tapi itu tidak cukup untuk membawa kesadaran kepada pelanggan Anda. Agar mereka tahu bahwa Anda hadir di Facebook, Twitter, Instagram, Vine atau Pinterest, Anda harus memanfaatkan real estat di situs Anda.

Bagaimana tepatnya Anda melakukan itu, Anda bertanya? Nah, dengan menggunakan ikon sosial.

Ikon sosial adalah gambar kecil yang Anda lihat yang mewakili simbol yang terkait dengan jaringan sosial tertentu. Misalnya, ikon sosial untuk Twitter biasanya menampilkan burung biru. Jika tidak, maka huruf kecil T.

Kehadiran gambar-gambar ini mengingatkan pemirsa bahwa mereka memiliki cara lain untuk selalu mengikuti apa pun yang Anda keluarkan. Penggunaan media sosial cukup tinggi akhir-akhir ini berkat kedekatan media sekaligus faktor asyiknya. Dan lebih mungkin daripada tidak, audiens Anda ingin tahu apakah Anda berada di jaringan sosial manapun.

Jika Anda berada di platform Blogger, Anda dapat menambahkan representasi media sosial ini melalui ikon sosial Ikhtisar Awesome .

Apa itu font yang keren?

Font Awesome "memberi Anda ikon vektor terukur yang bisa langsung disesuaikan - ukuran, warna, drop shadow, dan apapun yang bisa dilakukan dengan kekuatan CSS". Intinya, ini berfungsi sebagai toolkit tempat Anda mendapatkan akses ke lebih dari 500 ikon untuk digunakan di situs Anda - secara gratis.

Sekarang, jika Anda pernah menggunakan ikon media sosial sebelumnya, Anda tahu bahwa ada varietas non-vektor. Tapi yang ditawarkan oleh Font Awesome adalah ikon vektor terukur, dan dalam jangka panjang, itu adalah pilihan yang lebih baik untuk situs Anda.

Mengapa demikian?

Nah, alasan yang sangat bagus adalah gambar butuh waktu untuk memuat . Ya, gambar-gambar ini kecil tapi intinya masih berdiri. Plus, gambar cenderung kehilangan kualitas seiring peningkatan resolusi komputer. Dengan kata lain, jika Anda ingin ikon Anda dimuat lebih cepat dan terlihat bagus, segar dan bersih, berarti Anda lebih baik menggunakan koleksi Font Awesome. Selain itu, kesempatan untuk menyesuaikan ikon Anda sesuai juga merupakan faktor yang menarik juga.

Mengapa Anda harus mulai menggunakan Font Awesome?

Dari sekian banyak provider di luar sana, kenapa tetap dengan Font Awesome?
  • Koleksi besar ikon . Anda tidak hanya akan menemukan ikon media sosial di sini, tapi ikon tradisional lainnya juga.
  • Dukungan CSS . Dengan CSS, Anda dapat menyesuaikan ikon sesuai dengan yang paling sesuai dengan situs Anda. Anda bisa bermain-main dengan warna, ukuran, bayangan dan komponen lainnya. Ini adalah sesuatu yang sangat kurang dengan gambar non-vektor karena Anda terjebak dengan ikon yang Anda pilih.
  • Kecepatan . Citra vektor ringan dan karena itu memuat lebih cepat.
  • Gratis . Anda tidak perlu membayar apapun saat menggunakan Font Awesome.
Jadi sekarang Anda tahu pentingnya ikon di situs Anda, saatnya untuk mempelajari cara menambahkan ikon Ikon Awesome di Blogger .

Menambahkan Ikon Sosial Ikon Awesome di Blogger

Penambahan ikon ke Blogger Anda bukanlah ilmu roket. Padahal, prosesnya cukup mudah.
Inilah yang harus Anda lakukan:

Tambahkan Font Awesome Stylesheet ke Blogger

Ikuti langkah-langkah di bawah ini untuk mendapatkan Font Awesome bekerja dengan blog Anda:

1. Buka dashboard Blogger Anda, pergi ke Template dan tekan tombol Edit HTML.
2. Klik di manapun di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian.
3. Ketik tag <head> di dalam kotak pencarian dan tekan Enter untuk menemukannya.

font stylesheet yang bagus

4. Tambahkan baris kode berikut yang merujuk pada lokasi stylesheet font-awesome.min.css persis di bawah tag <head> :
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

5. Klik tombol 'Simpan template' untuk menyimpan perubahan dan mulai bermain dengan Font Awesome!

Menggunakan Ikon Awesome Font

Setelah Anda mendapatkan langkah-langkah di bagian sebelumnya, Anda sekarang siap untuk menggunakan Font Awesome di blog Anda. Hal pertama yang perlu Anda lakukan adalah menambahkan link ikon sosial ke HTML dan menghapus ikon yang tidak Anda butuhkan lagi. Ini adalah contoh HTML yang dapat Anda tambahkan:
<div id = "fawesomeicons">
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"> <i class = "fa fa-facebook"> </ i> </a>
<a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow"> <i class = "fa fa-google-plus"> </ i> </a>
<a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"> <i class = "fa fa-twitter"> </ i> </a>
<a href="URL-HERE" title="Pintaran" target="_blank" rel="nofollow"> <i class = "fa fa-pinterest"> </ i> </a>
<a href="URL-HERE" title="Instagram" target="_blank" rel="nofollow"> <i class = "fa fa-instagram"> </ i> </a>
<a href="URL-HERE" title="Bloglovin" target="_blank" rel="nofollow"> <i class = "fa fa-heart"> </ i> </a>
<a href="URL-HERE" title="Tumblr" target="_blank" rel="nofollow"> <i class = "fa fa-tumblr"> </ i> </a>
<a href="URL-HERE" title="RSS" target="_blank" rel="nofollow"> <i class = "fa fa-rss"> </ i> </a>
</ div>
Pada kode HTML di atas, kita bisa melihat 8 ikon sosial terpisah yang bisa dikenali dengan melihat atribut judul link. Misalnya yang pertama adalah untuk Facebook.

Untuk menggunakan ikon sosial, tempelkan URL Anda yang berisi URL-HERE untuk setiap ikon sosial yang ingin Anda sertakan. Letakkan link di antara tanda kutip dan pastikan untuk tidak menghapus tanda kutip.

Jika Anda ingin menghapus ikon sosial, cukup hapus baris kode yang dimulai dengan "<a href" dan diakhiri dengan "< ".

Sekarang, ingatlah bahwa Font Awesome bekerja di mana saja dengan tag <i> karena dirancang untuk bekerja dengan elemen sebaris. Meskipun Anda dapat menggunakan <span>, dokumentasi resmi lebih memilih opsi <i> untuk singkatnya.

Ikon Ikon Awesome dapat ditempatkan di manapun menggunakan awalan CSS fa bersama dengan nama ikon. Untuk daftar nama ikon media sosial , Anda bisa merujuk ke situs resmi Font Awesome.

Katakanlah Anda ingin menampilkan ikon Youtube sehingga Anda bisa menautkannya ke akun resmi Anda di peron. Temukan ikon Youtube di daftar dan klik di atasnya:

ikon keren

Itu akan membawa Anda ke halaman Youtube dimana Anda akan melihat kode ini:

ikon sosial keren

Untuk menyertakan ikon dalam daftar, salin baris yang dimulai dengan "<a href" dan diakhiri dengan "< dari kode di atas, tempelkan di tempat yang Anda inginkan dan ganti kode yang dimulai dengan" <i class = " fa "dan diakhiri dengan" </ i> "dengan ikon yang Anda pilih.

Akhirnya, setelah menambahkan ikonnya, daftarnya akan terlihat seperti ini:
<div id = "fawesomeicons">
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"> <i class = "fa fa-facebook"> </ i> </a>
<a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow"> <i class = "fa fa-google-plus"> </ i> </a>
<a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"> <i class = "fa fa-twitter"> </ i> </a>
<a href="URL-HERE" title="Pintaran" target="_blank" rel="nofollow"> <i class = "fa fa-pinterest"> </ i> </a>
<a href="URL-HERE" title="Instagram" target="_blank" rel="nofollow"> <i class = "fa fa-instagram"> </ i> </a>
<a href="URL-HERE" title="Bloglovin" target="_blank" rel="nofollow"> <i class = "fa fa-heart"> </ i> </a>
<a href="URL-HERE" title="Tumblr" target="_blank" rel="nofollow"> <i class = "fa fa-tumblr"> </ i> </a>
<a href="URL-HERE" title="RSS" target="_blank" rel="nofollow"> <i class = "fa fa-rss"> </ i> </a>
<a href="URL-HERE" title="Youtube" target="_blank" rel="nofollow"> <i class = "fa fa-youtube"> </ i> </a>
</ div>
Catatan: jangan lupa ganti judul dan tambahkan URL anda diantara tanda petik.

Setelah selesai mengedit ikon, masukkan kode ke gadget HTML / Javascript dengan membuka "Tata Letak" dan klik pada link "Tambahkan gadget". Jika Anda menggunakan WordPress, tempelkan di widget Teks.

Sesuaikan Ikon Ikon Awesome Menggunakan CSS

Misalkan Anda ingin membuat ikon jauh lebih besar dari yang ada saat ini. Tugas itu dibuat sederhana dengan penggunaan CSS. Berikut adalah contoh kode:
#fawesomeicons a {
    ukuran huruf: 16px;
    lebar: 30px;
    tinggi: 30px;
    garis-tinggi: 30px;
}
Untuk mengubah ukuran font, tingkatkan atau kurangi nilai 16px. Berikut adalah nilai (30px) untuk lebar dan tinggi wadah yang harus selalu cocok. Meningkat / menurunkan nilai ini, akan menambah / menurunkan ukuran wadah dimana font.

Berikut adalah beberapa gaya yang berbeda untuk ikon sosial keren. Di CSS, cari teks warna # background-color , # border-color , # font-color dan # hover-color sehingga Anda dapat mengetahui di sini untuk memasukkan kode warna. Anda bisa menggunakan alat ini untuk menghasilkan kode warna: Color Code Generator . Jika Anda tidak tahu cara menambahkan CSS, ikuti tutorial ini .

ikon sosial keren

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
latar belakang: # background-color ;
warna: # font-warna ;
display: inline-blok;
ukuran huruf: 16px;
lebar: 30px;
tinggi: 30px;
garis-tinggi: 30px;
margin: 0 1px 6px;
}
#fawesomeicons a: hover {
latar belakang: # hover-warna ;
}

ikon sosial keren

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
latar belakang: # background-color ;
warna: # font-warna ;
display: inline-blok;
ukuran huruf: 16px;
lebar: 30px;
tinggi: 30px;
garis-tinggi: 30px;
margin: 0 1px 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#fawesomeicons a: hover {
latar belakang: # hover-warna ;
}

ikon sosial keren

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
border: 1px solid # border-color ;
warna: # font-warna ;
display: inline-blok;
ukuran huruf: 16px;
lebar: 30px;
tinggi: 30px;
garis-tinggi: 30px;
margin: 0 1px 6px;
}
#fawesomeicons a: hover {
latar belakang: # hover-warna ;
}

ikon sosial keren

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
border: 1px solid # border-color ;
warna: # font-warna ;
display: inline-blok;
ukuran huruf: 16px;
lebar: 30px;
tinggi: 30px;
garis-tinggi: 30px;
margin: 0 1px 6px;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
}
#fawesomeicons a: hover {
latar belakang: # hover-warna ;
}

ikon sosial keren

#fawesomeicons {
text-align: center;
}
#fawesomeicons a {
warna: # font-warna ;
display: inline-blok;
ukuran font: 23px;
margin: 0 6px 6px;
}
#fawesomeicons a: hover {
latar belakang: # hover-warna ;
}

Nah, bagaimana jika kita ingin mengubah warna background atau font dari icon tertentu? Pertama, kita perlu mengidentifikasi kelas ikon yang baru saja setelah <i class = "fa ..." dan menambahkannya seperti ini:
#fawesomeicons a. fa-facebook {
latar belakang: # background-color ;
warna: # font-warna ;
}
Di sini, kita bisa mengubah background dan warna untuk ikon Facebook tapi kita bisa melakukannya untuk icon yang anda inginkan. Misalnya, mari tambahkan aturan lain untuk ikon twitter:
#fawesomeicons a. fa-facebook {
latar belakang: # background-color ;
warna: # font-warna ;
}
 #fawesomeicons a. fa-twitter {
latar belakang: # background-color ;
warna: # font-warna ;
}
Untuk membuat font lebih besar, kita bisa menambahkan kode CSS seperti ini:
#fawesomeicons {
text-align: center;
}
#fawesomeicons a .fa {
display: inline-blok;
ukuran huruf: 16px;
lebar: 30px;
tinggi: 30px;
garis-tinggi: 30px;
}
#fawesomeicons a. fa-facebook {
latar belakang: # background-color ;
warna: # font-warna ;
}
 #fawesomeicons a. fa-twitter {
latar belakang: # background-color ;
warna: # font-warna ;
}
Untuk mendaftar, salin kode di atas dan tambahkan aturan CSS dengan kelas ikon yang ingin Anda ubah.

Penting: Saat menambahkan kelas untuk ikon Anda, selalu beri tanda titik (.) Di depannya seperti yang dapat Anda lihat pada contoh di atas, jika tidak, itu tidak akan berhasil.

Dan itu dia! Semoga tutorial ini membantu Anda menambahkan ikon sosial Font Awesome di Blogger. Jika Anda masih kesulitan menambahkannya, lihatlah halaman Contoh .

Thursday, February 8, 2018

Tambahkan Latar Belakang yang Berbeda untuk Penulis Komentar di Blogger's Threaded Comments

Dalam tutorial ini kita akan belajar bagaimana untuk menyoroti komentar penulis sehingga mereka akan memiliki warna yang berbeda latar belakang, perbatasan, atau apapun yang membuat mereka menonjol dari yang lain. Untuk mencapai hal ini, kita perlu menambahkan kode dalam template Blogger dan memodifikasi gaya sesuai dengan preferensi kita.
blogger trik, komentar blogger
  

Bagaimana untuk menyoroti komentar penulis di Blogger:

Langkah 1. Masuk ke Template, klik Edit HTML

blogger ulir komentar, menyesuaikan komentar blogger

Langkah 2. Klik di mana saja di dalam area kode dan mencoba untuk menemukan - menggunakan tombol CTRL + F - tag ini:
</ Body>
screenshot:
blogger komentar, trik blogger

Langkah 3. Tepat di atas itu, paste kode berikut:
<Script src = 'http: //code.jquery.com/jquery-latest.js'/>
<Script>
$ (Function () {
Fungsi sorot () {
$ ( 'User.blog-penulis). Terdekat ('. Komentar-blok')
Css ( 'perbatasan', ' 1px solid # FFA500 ')
Css ( 'background', ' # F1F1F2 url ( " http://www.blogblog.com/1kt/transparent/white80.png ")')
Css ( 'warna', ' # 444444 ')
Css ( 'font-size', ' 12px ')
Css ( 'bantalan', '10px');
}
$ (Document) .bind ( 'siap scroll klik', sorot);
});
</ Script>

Menyesuaikan Penulis Komentar:


Berbatasan:
Garis ditandai orange mewakili gaya perbatasan ini.
Apa yang bisa dilakukan:
  • 1px - Anda dapat meningkatkan nilai untuk mengubah ketebalan perbatasan ini
  • padat - mengubah gaya perbatasan untuk putus-putus , putus-putus, inset, awal dll
  • # FFA500 - ini adalah nilai warna perbatasan ini, mengubahnya dengan warna Anda sendiri
Latar Belakang:
Garis ditandai dengan warna biru mewakili gaya latar belakang ini. Anda dapat menggunakan warna polos atau gambar. Secara default ada kombinasi keduanya (gambar transparan putih dengan warna polos abu-abu).
Untuk mengubah / menambahkan:
  • warna yang berbeda: ganti # F1F1F2 nilai dengan Anda sendiri (menggunakan alat ini untuk menemukan kode hex warna yang Anda inginkan)
  • gambar: mengganti defaul url http://www.blogblog.com/1kt/transparent/white80.png dengan itu gambar Anda

Warna huruf:
Untuk mengubah warna font, ganti nilai # 444444 warna hijau dengan Anda sendiri. (Anda dapat menggunakan alat ini untuk menemukan kode hex warna yang Anda inginkan)

Ukuran huruf:
Mengubah nilai merah dengan meningkatkan / menurunkan "12" value untuk mengubah ukuran teks.

Langkah 4. Sekarang Simpan Template Anda.

Untuk menyesuaikan seluruh gaya komentar threaded, silakan cek tutorial saya sebelumnya tentang Cara Customize Latar Belakang Komentar ini, Font Color dan Border di Blogger.