Home » , » 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

Thanks for reading & sharing Memasang Icon Media Sosial di Sidebar Blog dengan Font Awesome

Previous
« Prev Post

2 comments:

Comment Page:
  1. Sebenarnya mas...pengertian atau definisi dari font awesome itu apa ya?

    ReplyDelete
    Replies
    1. 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

      Delete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox