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.
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.
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 Blogger.com
Utilizing CSS: before To Place Icon
Please go to Blogger.com 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="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" 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 {
max-width:315px;
width:100%;
max-height:300px;
background:transparent;
position:relative;
overflow:hidden;
margin:0;
text-align:center;
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*/
#sosmed a.plus:before{display:block;content:"\f0d4";font-family:FontAwesome;font-size:40px;padding:45px}
#sosmed a.plus:hover{color:#FD7272}
/*twitter*/
#sosmed a.tw:before{display:block;content:"\f081";font-family:FontAwesome;font-size:40px;padding:45px}
#sosmed a.tw:hover{color:#25CCF7}
When it's finished, click SAVE Template.
For those of you who want to replace the Icon I made, please change the fontawesome unicode. look at https://fontawesome.com/v4.7.0/icons/ for unicode fontawesome that can place.
Select HTML/Javascript and paste the code below, replace all social media URL, and click Add/Ok.
* 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:
InfoThe 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 https://fontawesome.com/v4.7.0/icons/ for unicode fontawesome that can place.
Add Social media Widget to Blogger.com
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='https://facebook.com/username' class='fb' target='_blank' rel='nofollow noopener'></a>
<a href='https://instagram.com/username' class='ig' target='_blank' rel='nofollow noopener'></a>
<a href='https://plus.google.com/username' class='plus' target='_blank' rel='nofollow noopener'></a>
<a href='https://twitter.com/username' class='tw' target='_blank' rel='nofollow noopener'></a>
</div>
* 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: