Memasang Icon Media Sosial di Sidebar Blog dengan Font Awesome
November 8, 2015
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 CSSCopas 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;
}
#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>
<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
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
Sebenarnya mas...pengertian atau definisi dari font awesome itu apa ya?
ReplyDeletedefinisinya ada di alinea ketiga di atas
Deleteharfiyahnya: font = huruf, awesome = mengagumkan, membuat terpesona. Jadi, font awesome = huruf yang mengagumkan --karena bisa memunculkan icon gambar