Memasang Icon Media Sosial di Sidebar Blog dengan Font Awesome
IMAGE atau gambar, termasuk gambar icon media sosial, sering menimbulkan masalah dalam hal SEO Blog, jika tidak dilengkapi deskripsi gambar (image description) berupa Alt Text dan Title Text.
Jalan yang 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.
Memasang Icon Media Sosial di Sidebar Blog dengan Font Awesome
1. Pasang Code 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" />
3. Pasang Code HTML:
Lihat cara memasangnya
1. Layout > Add a Gadget > HTML/Javascript
2. Masukkan kode di bawah 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!
0 Response to "Memasang Icon Media Sosial di Sidebar Blog dengan Font Awesome"