Widget Sosial Button Flat Dengan Font Awesome

Widget merupakan salah satu cara untuk memperindah tampilan blog, tapi ada baiknnya menggunakan widget yang perlu-perlu saja  di karenakan kalau blog anda kebnyakan widget itu bukannya memperindah tampilan tapi malah terkesan membuat blog anda penuh dengan hal tidak penting contohnya menggunakan 2 widget sosial yang di khusukan untuk tujuan yang sama mempromosikan media sosial anda di blog padahal satu saja cukup, kali ini saya akan memberikan widget sosial yang fla, fast loading karena tidak menggunakan image tetapi font awesome.


Font awesome adalah font icon yang sedang ngetrend di tahun2015-2016 ini karena kemudahan menggunaknnya dan lebih baik dari pada menggunakan icon berupa image.

1.langsung saja jika belum terdapat  CSS stylesheet Font Awesome  di blog anda bisa menerapkan scr berikut di atas </head> untuk mempermudahkan gunakan CTRL+F untuk mencarinya.

 
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

2. Salin dan letakkan Code CSS ini di atas </style>

 /* CSS Social Media Kecoa INDO */
#sosmed{margin:20px 0;padding-top:15px;}
.nengah{text-align:center!important}
.smGlobalBtn{display:inline-block;position:relative;width:40px;height:40px;padding:0px;text-align:center;color:#fff!important;font-size:20px;font-weight:normal;line-height:2em;border-radius:25px;-moz-border-radius:25px;-webkit-border-radius:25px}
.facebookBtn{background:#3b5998; }
.facebookBtn:before{font-family:"FontAwesome";content:"\f09a"}
.facebookBtn:hover,.twitterBtn:hover,.googleplusBtn:hover,.linkedinBtn:hover,.pinterestBtn:hover,.rssBtn:hover{color:#fff;opacity:1}
.twitterBtn{background:#00ABE3; }
.twitterBtn:before{font-family:"FontAwesome";content:"\f099"}
.googleplusBtn{background:#e13138; }
.googleplusBtn:before{font-family:"FontAwesome";content:"\f0d5"}
.linkedinBtn{background:#0094BC; }
.linkedinBtn:before{font-family:"FontAwesome";content:"\f0e1"}
.pinterestBtn{background:#26ae91; }
.pinterestBtn:before{font-family:"FontAwesome";content:"\f0d2"}
.rssBtn{background:#fb5a03; }
.rssBtn:before{font-family:"FontAwesome";content:"\f09e"} 

3.Langkah terakhir masuk Tata Letak dan pilih  HTML/JavaScript (taruh dimana saja terserah anda)

 <link href=
<div class="sosmed"><div class="nengah">
<a rel="nofollow" class="facebookBtn smGlobalBtn" title="Facebook" href="#" target="_blank"></a>
<a rel="nofollow" class="twitterBtn smGlobalBtn" title="Twitter" href="#" target="_blank"></a>
<a rel="nofollow" class="googleplusBtn smGlobalBtn" title="Google +" href="#" target="_blank"></a>
<a rel="nofollow" class="linkedinBtn smGlobalBtn" title="Linkedin" href="#" target="_blank"></a>
<a rel="nofollow" class="pinterestBtn smGlobalBtn" title="Pulsk" href="#" target="_blank"></a>
<a rel="nofollow" class="rssBtn smGlobalBtn" title="RSS Feeds" href="#" target="_blank"></a><br><br>
</div></div>'//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/&gt; 

DEMOWidget Sosial Button Flat