Add Social Connecting Widget by Using Font Awesome Icons
Add Social Connecting Widget by Using Font Awesome Icons
From the middle of the 2014 Font Awesome massively used on
web designing. Almost all website designer from all platform using Font Awesome
for designing site. We knows that Font Awesome is a pictographic language of
web-related actions. It is also known as iconic font. Actually this is a pre coded icons. Just you have
to add the code but in output it will display iconic symbols. Still there are
not any massive use of Font Awesome on
single widget design. So I have focus on it to create some beautiful widget by
using Font Awesome. As a result Today I am going to share with you Font
Awesome based social connection widget for Blogger site.
I will show you how easily we can add a social connecting
widget in Blogger sidebar. Just follow the below steps-
Adding Font Awesome Main file on Template
First we have to add the Font
Awesome file in Blogger template head section. Including Font awesome in Blogger
template is very easy. Just you have to follow some simple steps from below-
Step 1 Go to https://www.blogger.com and
Sign in to your account
Step 2 From Blogger Dashboard click on ->Template
->Edit HTML
Step 3 And
locate the <head> section Ctrl+F (Windows) or CMD+F (Mac) in your Blogger template
Step 4 Finally
copy following line of markup and paste it below <head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet'/>
Step 5 Now simply hit the Save Template button.
Adding CSS and HTML code for Social connecting Widget
Now we will blend the CSS and HTML code in a single script to
display Font Awesome icons for social connecting widget.
Step 1 Log in to your Blogger
account and Go to your Blogger Dashboard
Step 2 Go to
your Layout tab.
Step 3 Click on
"Add a Gadget" then select "HTML/JavaScript"
Widget.
Step 4 Now Copy
the below code and Paste it in "HTML/JavaScript"
Gadget.
<style>
.fa{color: #000000;font-size: 30px;display: inline-block;}
</style>
<div style='text-align: center; letter-spacing: 5px;'>
<a href='Facebook URL'><i class='fa fa-facebook'/></i></a>
<a href='Twitter URL'><i class='fa fa-twitter'/></i></a>
<a href='Pinterest URL'><i class='fa fa-pinterest'/></i></a>
<a href='RSS Feed URL'><i class='fa fa-rss'/></i></a>
<a href='Stumbleupon URL'><i class='fa fa-stumbleupon'/></i></a>
<a href='Google+ URL'><i class='fa fa-google-plus'/></i></a>
</div>
Step 5 Now simply hit the Save button.
Customization
- Change #000000 for altering the social icon’s color. Use our Color Picker for changing unlimited color.
- For increase or decreasing the icon size change font-size: 30px to 20px or 40px
- Replace all Facebook URL, Twitter URL, Pinterest URL, RSS Feed URL, Stumbleupon URL and Google+ URL with your Blogger site’s social pages URL.
That’s it your Font Awesome
based social connecting widget is ready for use. Hope your Blog visitors will
like it. You can change with unlimited color code for changing the icon color.
So whatever your theme color this will fit with your Blogger Template. Thank
you. For more exciting tutorial please stay tune.
Open Comment Box