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.
Hello, my name is Aamir khan. I'm a 24year old blogger from Pakistan.
No comments:
Post a Comment
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.