Good day readers of TechBrainaic guess you're doing great? In this article I will be sharing with you the Ultimate step by step guide on how to add social media icon in Blogger in 2020, make sure you read to the end and follow every Steps.
Blogger Social Media Icon |
In this digital dispensation it is often very difficult to come across a website or blog without social media handles icons. Popular website or blog often have at least four to five social media accounts connected to it.
Bloggers using Google Blogger/Blogspot platform might experience difficulties in adding social media icons to their Blog.
But for WordPress and other CMS users it's a lot more easier.
Although most of the new Blogger templates already have social media icons installed, in case you are using an old Blogger theme then you might not have them.
How to Integrate WhatsApp Chat Widget on Blogger
How to Add Custom Permalink on Blogger for Better SEO
How to Create a Sitemap on Blogger and Submit it to Google and Bing
Incase you're still using an old template and don’t know how to add social media icons in Blogger, then follow the simple and complete steps given in this tutorial.
Before we proceed into the full course of this tutorial, I would like to make this clear that you don't have to be an expert in coding or Blogger Webmaster guru before you can add social media icons to your Blogger Blog.
I have written this article in a simple and easy to understand format, with each steps clearly and pictorially stated and explained on how to add social media icons in Blogger.
I will be sharing all the information related to icons as well as social media icons and the HTML code for social media icons on Blogger in this tutorial. Just ensure to read to the end and follow of the guidelines mentioned.
Generally, an icon is a picture or a symbol that serves as a representation of some sort of content on the website or blog. The most popular icon extensions are PNG and SVG.
The content written in a blog, many times sounds boring and the user might lose focus if too much text is provided.
For this reason, using icons to describe different functions or features is a good and effective approach.
Not only does it help to make the content more attractive but users can understand it easily with a visual explanation.
For example, instead of writing down, “Share on Twitter”, one can easily use the Twitter icon instead.
Font Awesome provides you with a used repository of icons that are highly customizable. One can easily increase or decrease the size, can change the colour, can change the shape, or can customize as per the need with the help of CSS.
Font Awesome |
There are several benefits of using font awesome, some of them are mentioned below.
Font awesome icons are available in vector format which means they won't impact page speed.
Note: before editing your blog template it's always advisable to take a backup so that you can easily restore it incase there's an error.
1. Log into your Blogger Dashboard
2. Select "Theme" and click on "Dropdown icon beside Customize" then Click on "EDIT HTML".
3. Add the below script just before </head> tag.
<script src="https://kit.fontawesome.com/2a22590b5b.js" crossorigin="anonymous"></script>
4. Go to "Layout" and click on "Add A Gadget" in the right sidebar area and select "HTML/ Javascript" and paste the below code.
<div style="font-size: 2rem ;text-align:center">
<a href="YOUR-URL" title="Facebook" target="_blank" rel="nofollow"><i
class="fa-brands fa-facebook"></i></a>
<a href="YOUR-URL" title="Twitter" target="_blank" rel="nofollow"><i
class="fa-brands fa-twitter"></i></a>
<a href="YOUR-URL" title="Pinterest" target="_blank"
rel="nofollow"><i class="fa-brands
fa-pinterest"></i></a>
<a href="YOUR-URL" title="Instagram" target="_blank"
rel="nofollow"><i class="fa-brands
fa-instagram"></i></a>
<a href="YOUR-URL" title="Youtube" target="_blank" rel="nofollow"><i
class="fa-brands fa-youtube"></i></a>
</div>
<a href="YOUR-URL" title="Replace with Icon Name" target="_blank" rel="nofollow">Add Font Awesome code here></a>
You can further customize the Font Awesome icons using CSS but for that, you need to have some basic knowledge of using CSS you can refer to this guide to know more.All Our Posts Are Protected by DMCA. Therefore Copying Or Reproducing Of The Contents Of This Blog Without Our Permission Is Highly Prohibited!
If Found, Legal Action Will Be Taken Against Offender.