Memasang Icon Media Sosial di Sidebar Blog dengan Font Awesome

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]]> atau

#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

2. PASANG KODE HTML:
1. Layout > Add a Gadget > HTML/Javascript
2. Masukkan kode ini:

URL-HERE" title="Facebook" target="_blank" rel="nofollow">
URL-HERE" title="Google Plus" target="_blank" rel="nofollow">
URL-HERE" title="Twitter" target="_blank" rel="nofollow">
URL-HERE" title="Pinterest" target="_blank" rel="nofollow">
URL-HERE" title="Instagram" target="_blank" rel="nofollow">
URL-HERE" title="RSS" target="_blank" rel="nofollow">
URL-HERE" title="Youtube" target="_blank" rel="nofollow">

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

reff : http://www.contohblog.com/2015/11/memasang-icon-media-sosial-di-sidebar.html

Related video : Memasang Icon Media Sosial di Sidebar Blog dengan Font Awesome