Great News! Try our new tool to convert img to amp-img. Try Now!

Friday, September 28, 2018

Create Social Media Widget With Font Awesome Icon (Valid AMP)

How to Create Social Media Widget With Font Awesome Icon only with CSS without Javascript for Blogspot Widget and Wordpress.

Create Social Media Widget With Font Awesome Icon using CSS

Social Media is one of the media that becomes a business field. Many people sell products and services only by utilizing social media such as Facebook, Twitter, Instagram and Google Plus. They don't even have a website, only relying on social media as a promotional field.

For those of you who have a website, of course social media widgets are also important so that your interactions and website visitors are wider. With this you can also use your website as a medium to develop your social media.

This time, I will share a tutorial on how to create a Social Media Widget using CSS.

I made this widget complete with popular social media icons, namely Facebook, Instagram, Google Plus and Twitter. I get the icon by using Font Awesome 4.7.

You can apply this widget to all CMS because it only uses CSS and HTML. But this time, I will explain the application on

Utilizing CSS: before To Place Icon

Please go to and open one of your blogs. Then open the Themes - Edit HTML tab. You need to add Font Awesome before the </head> tag. Please copy and paste the code below

<link href="" rel="stylesheet" crossorigin="anonymous">

Then copy the CSS code below. For those of you who use non-AMP templates, copy before ]]</b:skin> . For those of you who use the Blogger AMP template, copy it under  <style amp-custom='amp-custom'>

#sosmed {
  text-align: align;
  text-justify: inter-word;
#sosmed a{color:#444;text-align:align;display:inline-block;text-decoration:none;width:calc(48%);height:48%;margin:4px 0;background:#f5f5f5}
#sosmed a:hover{background:#444}
/*facebook plus*/
#sosmed a.fb:before{display:block;content:"\f230";font-family:FontAwesome;font-size:40px;padding:45px}
#sosmed a.fb:hover{color:#1B9CFC}
/*instagram plus*/
#sosmed a.ig:before{display:block;content:"\f16d";font-family:FontAwesome;font-size:40px;padding:45px}
#sosmed a.ig:hover{color:#B33771}
/*google plus*/

When it's finished, click SAVE Template.

The CSS above, I used CSS :before to call the awesome font icon into the class that I created. For information, css:before will place the class before the main content in your class / selector

For those of you who want to replace the Icon I made, please change the fontawesome unicode. look at for unicode fontawesome that can place.

Add Social media Widget to

Next, we will add a new Widget on the Blogger template. Click the Layout tab, then click Add a Gadget, then a pop-up window will appear.

Select HTML/Javascript and paste the code below, replace all social media URL,  and click Add/Ok.

<div id='sosmed'>
  <a href='' class='fb' target='_blank' rel='nofollow noopener'></a>
  <a href='' class='ig' target='_blank' rel='nofollow noopener'></a>
  <a href='' class='plus' target='_blank' rel='nofollow noopener'></a>
  <a href='' class='tw' target='_blank' rel='nofollow noopener'></a>

* Ganti semua username dengan username akun sosial media anda.

For Demo Widget, please click the button below

By only utilizing CSS, you can create easily. Can be seen from the results of the combination of CSS: before and: hover above, the social media widget looks more attractive.

That's the tutorial on How to create a Social Media Widget with Awesome Fonts on Blogger. May be useful

Read Other Blogger HTML Tricks: