Memasang Icon Media Sosial di Sidebar Blog dengan Font Awesome

Memasang Icon Media Sosial di Sidebar Blog dengan Font Awesome

 Icon Media Sosial di Sidebar Blog
Cara Memasang Widget Icon Media Sosial di Sidebar Blog Fast Loading & SEO Friendly dengan Font Awesome, tanpa Gambar (Image).

IMAGE atau gambar, termasuk gambar ikon (icon) media sosial, sering menimbulkan masalah dalam hal SEO Blog, yaitu jika tidak dilengkapi deskripsi gambar (image description) berupa Alt Text dan Title Text.

Jalan terbaik adalah menggunakan Font Awesome, yakni huruf-huruf yang menampilkan berbagai icon gambar atau simbol. Karena berupa font, bukan image, maka Font Awesome mendukung kecepatan dan seo blog.

Berikut ini Cara terbaru Memasang Icon Media Sosial di Sidebar Blog dengan Font Awesome agar fast loading dan seo friendly. (Lihat DEMO)

Memasang Icon Media Sosial di Sidebar Blog dengan Font Awesome

1. PASANG KODE CSS
Copas berikut ini di atas kode ]]></b:skin> atau </style>


#fawesomeicons {text-align: center;}
#fawesomeicons a {
background: #48d;
color: #fff;
display: inline-block;
font-size: 18px;
width: 38px;
height: 36px;
line-height: 36px;
margin: 0 1px 6px;
}
#fawesomeicons a:hover{
background: #777;
}

Catatan: 
- Kode di atas menggunakan warna background seragam, yakni biru twitter.
- Ubah kode latar belakang sesuai dengan warna khas masing-masing media sosial. Lihat Kode Warna HTML.

2. PASANG LINK FONT AWESOME
Copas di bawah kode <head>


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

2. PASANG KODE HTML:
1. Layout > Add a Gadget > HTML/Javascript
2. Masukkan kode 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="Pinterest" 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="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>

3. Ubah URL-HERE dengan link akun media sosial Anda.
4. Save!

Sumber: http://helplogger.blogspot.co.id/2015/10/how-to-add-font-awesome-social-icons.html

Related Posts

2 Komentar untuk "Memasang Icon Media Sosial di Sidebar Blog dengan Font Awesome"

Sebenarnya mas...pengertian atau definisi dari font awesome itu apa ya?

definisinya ada di alinea ketiga di atas
harfiyahnya: font = huruf, awesome = mengagumkan, membuat terpesona. Jadi, font awesome = huruf yang mengagumkan --karena bisa memunculkan icon gambar

1. Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *