February 29, 2020

Cara Memasang Link Media Sosial di Sidebar Blog

February 29, 2020

Cara Memasang Link Media Sosial di Sidebar Blog Menggunakan Font Awesome. Ringan dan Keren!

Cara Memasang Link Media Sosial di Sidebar Blog

BLOGGER tentu memiliki akun media sosial. Selain sebagai media pertemanan dan membangun jaringan (networking), media sosial juga berperan dalam meningkatkan SEO blog.

Media sosial termasuk salah satu pilar SEO.

Social Signal menjadi salah satu faktor pemeringkat Google di halaman hasil pencarian.

Berikut ini salah satu cara memasang link akun media sosial di sidebar blogger, yakni dengan menggunakan font awesome, sehingga lebih ringan. Ini tampilannya:

Cara Memasang Link Media Sosial di Sidebar Blog Menggunakan Font Awesome

Desain tampilan lainnya bisa Anda lihat di Halaman Label Media Sosial.

Cara Memasang Link Media Sosial di Sidebar Blog

1. Klik Layout > Add a Gadget 
2. Pilih HTML/JavaScript
3. Judul kosongkan
4. Masukka kode berikut ini:

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

#fawesomeicons {text-align: center;margin-bottom:10px;}
#fawesomeicons a {background: #666;color: #fff;display: inline-block;font-size: 16px;width: 30px;height: 30px;line-height: 30px;
margin: 0 1px 6px;}
#fawesomeicons a:hover{background: #hover-color;}
</style>
<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="Linkedin" target="_blank" rel="nofollow"><i class="fa fa-linkedin"></i></a>
<a href="URL-HERE" title="Tumblr" target="_blank" rel="nofollow"><i class="fa fa-tumblr"></i></a>
<a href="URL-HERE" title="RSS" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a>
</div>

Link ke kode Awesome Font yang berwarna merah tidak usah diikutkan jika di template blog Anda sudah ada.

Ganti URL_HERE dengan Url link akun media sosial Anda.

Save!

Link Medsos Sidebar Blog Bulat

Jika ingin desain link media sosial di sidebar blognya berbentuk bulat, seperti gambar di bawah ini, berikut ini kodenya:

Link Medsos Sidebar Blog Bulat

#fawesomeicons {text-align: center;}
#fawesomeicons a {background:#444;color:#fff;display:inline-block;font-size:18px;width:37px;height:36px;line-height:36px;margin:0 1px 6px;border-radius: 20px;}
#fawesomeicons a:hover{background:#2ebff6;}
<div id="fawesomeicons" style="margin-bottom:10px">
<a href="https://facebook.com/cbblogger" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com/contohblogcb" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
<a href="https://instagram.com/" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
<a href="https://feedburner.google.com/fb/a/mailverify?uri=contohblognih" title="RSS" target="_blank" rel="nofollow"><i class="fa fa-rss"></i></a>
<a href="https://www.youtube.com/c/CBBlogger" title="Youtube" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i></a>
<a href="https://www.pinterest.com/cbblogger" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
<a href="https://www.linkedin.com/in/cbblogger" title="Linkedin" target="_blank" rel="nofollow"><i class="fa fa-linkedin"></i></a>
</div>


Save!

Cek juga di CodePen:


See the Pen Link Media Sosial Sidebar Blogger by CB Blogger (@cbblogger) on CodePen.

Demikian Cara Memasang Link Media Sosial di Sidebar Blog Menggunakan Font Awesome. Desain tampilan lainnya bisa dicek di sumber.

Good Luck & Happy Blogging! (www.contohblog.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

No comments on Cara Memasang Link Media Sosial di Sidebar Blog

Post a Comment

Contact Form

Name

Email *

Message *