How to Add Stylish Social Media Icon Widget on Blogger

Adding this stylish social media widget will help you make your blog look more attractive, will help you to get more returning visitors

Widgets can be very helpful. They are small codes/scripts, don’t need much space but will add extra useful functionality to your blog or website. Adding widgets in blogger blog is really easy. You don’t need to know any advanced coding or anything. You can go to layout and click on add a gadget, select one and save; that easy. You can also add a custom widget by selecting ‘add html/javascript’ widgets.

In this post i am going to show you how to add social icon windget in blogger blog. Having social icon widget like facebook, twitter, youtube are really important since it will help you increase your visitors.

When i started blogging on blogger, i used to search for different kind of widgets to use on my blog. I would just play around with various kind of widgets and see how my blog looks like and keep whichever seems good to me. I would also ask my friends to choose a design. It would take me hours to decide on which widget to keep. 

There are literally thousands of widgets available and most of them still works very good. Developers are creating new widgets for blogger platform as it is very popular now a days.

If you want to get returning visitors, then an attractive social icon widget is the best way to achieve it. Stylish widgets will always catch the eyes, This way people will click on your widget and like or subscribe your pages for further updates. Now a days almost everyone uses social media and it is the best way to get instant updates, news regarding favorite blogs or products.

To tell the truth, almost everyone uses a social media widget. Blogger has one but it’s very simple looking. Obviously you would want to make your blog nice and stylish, not old and un-attractive. Good thing blogger lets you use custom html/javascript codes and in this post I will be showing you, how you can very easily add a custom widget in your blogger blog. 

Adding this stylish social media widget will help you make your blog look more attractive, will help you to get more returning visitors and will also help people to get engaged with you in social media.

Lets get started –

Step 1) Login to your blogger account.

Step 2) Choose your desired blog in which you would like to add this widget (If you have multiple blog on same account)

Step 3) From the blogger dashboard, go to Theme and click on EDIT HTML.

*For new updated dashboard, click on the vertical 3 dots and click on edit html*

Step 4) Search for the below code. You can press CTRL + F to bring up the search bar.

[]]></b:skin>]

Step 5) Copy the below codes and paste them right before the above “]]></b:skin>” code.

[body{ background : #ccc; }

h2{ font-family: cursive; font-weight: 100; font-size: 40px; text-align: center; padding: 20px; margin: 0; color: #888; }

#social-wrapper{ background : #000; height : 400px; width : 50%; margin : auto; }

#social-wrapper a{ float : left; text-align : center; color : #FFF; font-size : 45px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; height : 50%; }

#social-wrapper i{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

#social-wrapper a:hover{ background : #888; }

#social-wrapper .fb{ background : #3b5998; }

#social-wrapper .tw{ background : #4099FF; }

#social-wrapper .yt{ background : #e52d27; }

#social-wrapper .gp{ background : #D34836; }

#social-wrapper .fb{ width : 75%; }

#social-wrapper .gp{ width : 25%; }

#social-wrapper .tw , #social-wrapper .yt{ width : 50%; }

.ahsancy{ position : fixed; right : 10px; bottom : 5px; color : #888; text-decoration : none; }

/* Media Queries */

@media screen and (max-width: 1000px){ #social-wrapper .fb{ width : 100%; }

#social-wrapper .tw , #social-wrapper .yt , #social-wrapper .gp{ width : 33.3333333333%; }

}

@media screen and (max-width: 650px){ #social-wrapper .tw , #social-wrapper .yt , #social-wrapper .gp , #social-wrapper .fb{ width : 50%; } } @media screen and (max-width: 300px){ #social-wrapper .tw , #social-wrapper .yt , #social-wrapper .gp , #social-wrapper .fb{ width : 100%; height : 25%; }

}]

Step 6) Click on save and save the template.

Now we need to add a gadget from the layout option to make the widget visible on your blog and customize it.

Step 7) Go to layout

Step 8) Click on add a gadget and select “HTML/JAVASCRPT” from the pop-up window.

Step 9) Copy the below codes and paste it on the content box.

[<link href=’//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css’ rel=’stylesheet’/> <h2>Join With US</h2>

<div id=”social-wrapper”>

<a class=”fb” href=”https://www.facebook.com/a.habib.cy” target=”_blank”> <i class=”fa fa-facebook”></i> </a>

<a class=”gp” href=”https://instagram.com/#″ target=”_blank”> <i class=”fa fa-instagram”></i> </a>

<a class=”yt” href=”https://www.youtube.com/channel/ahsanhabibcy” target=”_blank”> <i class=”fa fa-youtube”></i> </a>

<a class=”tw” href=”https://twitter.com/ahsanhabibcy” target=”_blank”> <i class=”fa fa-twitter”></i> </a> </div>

<a class=”ahsancy” href=”https://facebook.com/bdbloggerhub″ target=”_blank”> Created by Ahsan Habib CY</a>]

Step 10) Change the red links with your desired ones and click on save. Don't change anything else or it might not work.

That's it. You have successfully added the attractive social media icon widget in your blogger blog.

Final Words

I hope my tutorial was easy to follow. If you still get some problems while adding the widget or if you have any questions, please leave a comment below. I'd really appreciate it. Share it with your friends if you liked it. Thanks for reading, peace.