How to Add Stylish Social Media Icon Widget on Blogger

SHARE:

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

add social media widget in blogger

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*

how to edit html blogger


edit html blogger


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.

COMMENTS

BLOGGER
Name

Adsense Tips,2,Blogger,5,Blogger Widgets,3,Blogging,8,Money making tips,3,SEO,5,tech,2,Tips & Tricks,10,
ltr
item
BD BLOGGER'S HUB | SEO, BLOGGING, ADSENSE, ONLINE INCOME: How to Add Stylish Social Media Icon Widget on Blogger
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
https://1.bp.blogspot.com/-hTQP5REgqEM/XyHvZxHITsI/AAAAAAAAANg/3MOIb-xAujATgkCt8ZLbivK7f7AXea20wCPcBGAYYCw/w640-h360/How%2BTo%2BAdd%2BSocial%2BIcon%2BWidget%2BIn%2BBlogger%2BBlog-min.jpg
https://1.bp.blogspot.com/-hTQP5REgqEM/XyHvZxHITsI/AAAAAAAAANg/3MOIb-xAujATgkCt8ZLbivK7f7AXea20wCPcBGAYYCw/s72-w640-c-h360/How%2BTo%2BAdd%2BSocial%2BIcon%2BWidget%2BIn%2BBlogger%2BBlog-min.jpg
BD BLOGGER'S HUB | SEO, BLOGGING, ADSENSE, ONLINE INCOME
https://www.bdbloggerhub.com/2020/08/add-stylish-social-media-widget.html
https://www.bdbloggerhub.com/
https://www.bdbloggerhub.com/
https://www.bdbloggerhub.com/2020/08/add-stylish-social-media-widget.html
true
1150118172119971250
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content