how to add social media buttons to blogger sidebar - FindersAdda : Tutorials of Make Money, Computer or Internet

Friday, 17 November 2017

how to add social media buttons to blogger sidebar

Hello Friends! How are You? I hope, you will be good. Today, I am present once again with a new post. In this article, I am going to share that how to add social media buttons to blogger sidebar? And Why should we add social media buttons? I have already written a post about how to add social media share icon in blog?

How to add social media button in blog sidebar

What is Social Media Button/Icons?

Social Media Buttons or icons is like a buttons which contains a link of our social media pages that helps to connect people with us on social media. 

In other words, we can say that social media button or icons helps to make best blog look and also helps to increase traffic on our blog.

Why should we add social media button or icon in blog?

We must add social media buttons or icon in our blog, so that each and every people who is the visitors of our blog could connect with us on various social media pages and got updated from our new activity.

How to add social media buttons to blogger sidebar?

Step 1: First of all, copy the below code.

<style> .widget_social_apps { margin-left : -1%; margin-right : -1%; } .widget_social_apps:after { clear : both; } .widget_social_apps .app_social { margin : 1% 0.5%; width : 49%; height : 50px; float : left; text-align : center; background-color : #111; transition : all 0.2s; border-radius: 5px; } .widget_social_apps .app_social.facebook { background-color : #3e64ad; } .widget_social_apps .app_social.twitter { background-color : #58ccff; } .widget_social_apps .app_social.pinterest { background-color : #de010d; } .widget_social_apps .app_social.instagram { background-color : #125688; } .widget_social_apps { background-color : #dd4b39; } .widget_social_apps .app_social.linkedin { background-color : #007bb6; } .widget_social_apps { background-color : #ff0084; } .widget_social_apps { background-color : #ef4e41; } .widget_social_apps .app_social.rss { background-color : #ea8914; } .widget_social_apps .app_social.tumblr { background-color : #38466a; } .widget_social_apps .app_social:hover { background-color : #777; } .widget_social_apps .app_social a { display : block; color : #fff; padding : 15px 5px; } .widget_social_apps .app_social span { display : block; } .widget_social_apps .app_social span.app_icon i { font-size : 15px; margin-bottom : 10px; } </style> <div class="widget_social_apps"> <div class="app_social facebook"> <a href="#" target="_blank" title="Follow on facebook"> <span class="app_icon"><i class="fa fa-facebook"></i> 1545 Likes</span></a></div> <div class="app_social twitter"> <a href="#" target="_blank" title="Follow on twitter"> <span class="app_icon"><i class="fa fa-twitter"></i> 24 Followers</span></a></div> <div class="app_social pinterest"> <a href="#" target="_blank" title="Follow on pinterest"> <span class="app_icon"><i class="fa fa-pinterest"> 84 Followers</i></span></a></div> <div class="app_social instagram"> <a href="#?hl=en" target="_blank" title="Follow on instagram"> <span class="app_icon"><i class="fa fa-instagram"></i> 857 Followers</span></a></div> <div class="app_social google"> <a href="#" target="_blank" title="Follow on google+"> <span class="app_icon"><i class="fa fa-google-plus"></i> 10 Followers</span></a></div> <div class="app_social linkedin"> <a href="#" target="_blank" title="Follow on linkedin"> <span class="app_icon"><i class="fa fa-linkedin"> 71 Followers</i></span></a></div> <div class="app_social flickr"> <a href="#" target="_blank" title="Follow on flicker"> <span class="app_icon"><i class="fa fa-flickr"></i> 12 Followers</span></a></div> <div class="app_social youtube"> <a href="#" target="_blank" title="Subscribe on youtube"> <span class="app_icon"><i class="fa fa-youtube"></i> 100 Subscribers</span></a></div> <div class="app_social rss"> <a href="#" target="_blank" title="Subscribe blog feed"> <span class="app_icon"><i class="fa fa-rss"></i> 432 Subscribers</span></a></div> <div class="app_social tumblr"> <a href="#" target="_blank" title="Follow on tumblr"> <span class="app_icon"><i class="fa fa-tumblr"></i> 12 Followers</span></a></div> </div>

This code is copied from Iamhappylife blog.

Step 2 : Now open a new tab and then open your blogger account. After opening your blogger account click on the Layout option in blogger dashboard.

Step 3 : Then click on the Add Widget option where you want to add social media icons.

click on the add widget option

Step 4 : Then open a pop-up box. In this pop-up box, click on the HTML/JavaScript option.

click on the html javascript option

Step 5 : Then again open a new box. In this box, there are two text fields. Write "Connect with us" in the first text field and then paste the code in the second text field.

Step 6 : Now add your social media pages links instead of # symbol in anchor tag.

Step 7 : After adding social media pages links click on the Save option. Then click on the Save Arrangement option.

NOTE : - You can drag or drop this widget later at the another place.

In this article, I told that what is social media buttons, Why should we add social media icons and how to add social media buttons or icons in blogger sidebar?

I hope you liked this post so much. If you loved this post, Then, share with your friends and also give some suggestion that what should i improve in this post. Thank You So Much......

About Author


Author & Editor

Myself Sumit Kumar Gupta & 21 year's old person. I am a programmer and blogger. I spend much more time on programming and blogging and helps other programmers and bloggers.


Post a Comment

We are eager to see your comments.
Comment Rule :

1. Don't use any link in the comment box. If you have any problem related to link then contact me with the contact form.

2. Don't use the wrong word if you write the wrong word in comment box then it will get spam.