πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡ πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡

OPEN NOW

HOW TO ADD SOCIAL MEDIA BUTTONS ON BLOGGER:

 How to add social media buttons to blogger:


Hey guys whats up.In this post, I will show you How to add social follow button to  Blogger blog. Social media icon allows your readers to follow your social pages and profiles. Here you get the most popular social icon services like Facebook, twitter, Instagram etc.

These social follow widgets are designed with HTML and CSS, which are 100% responsive. Blogger custom templates also come with social follow buttons. But if you don’t like them, then you can use these widgets for Blogger.

How to add social follow button in Blogger

Follow the procedure below to add a responsive and beautiful social media widget inside your Blogger blog.

Step 1: First login to your Blogger account and go to the Theme menu. Click on Edit HTML button here.

HOW TO ADD SOCIAL MEDIA BUTTUON ON BLOGGER

Step 2: Click anywhere in the HTML code and press Ctrl + F. Then a search box will open, here you type “</head>” and press enter.

HOW TO ADD SOCIAL MEDIA BUTTUON ON BLOGGER

Step 3: Now copy the code given below and paste it before the </head> code. Click on the Save Theme button.

HOW TO ADD SOCIAL MEDIA BUTTUON ON BLOGGER

Code-

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”/>

Now it is complete !!!!!! Let’s go to the second part of the setting.

Step 4: Now go to the “Layout” section of the blogger. Click on “Add a Gadget” in the Sidebar section.

HOW TO ADD SOCIAL MEDIA BUTTUON ON BLOGGER




Step 5: Now the popup will open, scroll under it and click on β€œHTML / JavaScript” gadget.

HOW TO ADD SOCIAL MEDIA BUTTUON ON BLOGGER

Step 6: Now choose your social media Widget code (Style 1, 2, 3 and 4) for Blogger from the list below and paste the code in the content box.

HOW TO ADD SOCIAL MEDIA BUTTUON ON BLOGGER



Finally, click on the β€œSave” button. Click on “Save arrangements”. Considerably done, go to your blog and reload it. You will see that the widget is live on your blog.

LIST OF SOCIAL MEDIA BUTTONS ON BLOGGER:

List of Social Media Buttons HTML Code

Here are some amazing social media follow buttons for bloggers. Here, choose whichever widget you like and add it to your blogger blog. Copy any HTML code for your block.

STYLE 1:


HOW TO ADD SOCIAL MEDIA BUTTUON ON BLOGGER


<style> 

.to-social-follow{width:300px;padding:10px;margin:0}.to-social-follow .fa{font-size:18px;padding:16px;text-align:center;margin:5px 2px;width:20%;text-decoration:none;color:#fff}.to-social-follow .fa:hover{opacity:.7}.to-social-follow .fa-facebook{background:#3B5998}.to-social-follow .fa-twitter{background:#55ACEE}.to-social-follow .fa-google{background:#dd4b39}.to-social-follow .fa-linkedin{background:#007bb5}.to-social-follow .fa-youtube{background:#b00}.to-social-follow .fa-instagram{background:#125688}.to-social-follow .fa-pinterest{background:#cb2027} </style> <div><a href=”https://oyepandeyji.com/”><span style=”color: white;”>oyepandeyji</span></a></div> <div class=”to-social-follow”> 

<a href=”#” class=”fa fa-facebook” target=”_blank”></a> 

<a href=”#” class=”fa fa-twitter” target=”_blank”></a> 

<a href=”#” class=”fa fa-google” target=”_blank”></a> 

<a href=”#” class=”fa fa-linkedin” target=”_blank”></a> 

<a href=”#” class=”fa fa-youtube” target=”_blank”></a> 

<a href=”#” class=”fa fa-pinterest” target=”_blank”></a>

 </div>

Note: Replace every highlighted β€œ#” with your own social media page or profile URL like (https://facebook.com/oyepandeyji).

STYLE 2:

HOW TO ADD SOCIAL MEDIA BUTTUON ON BLOGGER




<style> 

.techornate-social-buttons ul{padding-left:0;list-style:none}.techornate-social-buttons li a{text-transform:uppercase;text-decoration:none;padding:10px 1px 10px 10px;letter-spacing:2px;font-size:10px;color:#fff;display:block;border-radius:3px}.techornate-social-buttons ul li{margin-bottom:10px;width:100%}.techornate-social-buttons li a i{width:35px;height:14px;float:right;padding:0 0 0 10px;margin:0;font-size:14px;line-height:14px;border-left:1px solid #B1B1B1}.techornate-social-buttons li a.social-btn-facebook{background:#3b5998}.techornate-social-buttons li a.social-btn-twitter{background:#1da1f2}.techornate-social-buttons li a.social-btn-youtube{background:#cd201f}.techornate-social-buttons li a.social-btn-instagram{background:#405de6}.techornate-social-buttons li a.social-btn-google{background:#dd4b39} 

</style> 

<div class=”techornate-social-buttons”> 

<ul class=”sidebar-social clearfix”>

<li><a href=”#” class=”social-btn-facebook”>Like on Facebook <i class=”fa fa-facebook”></i> </a></li> 

<li><a href=”#” class=”social-btn-twitter”>Follow on Twitter <i class=”fa fa-twitter”></i> </a></li> <li><a href=”#” class=”social-btn-google”>Follow on Google+ <i class=”fa fa-google”></i> </a></li> 

<li><a href=”#” class=”social-btn-instagram”>Follow on Instagram <i class=”fa fa-instagram”></i> </a></li> 

<li><a href=”#” class=”social-btn-youtube”>Subscribe on Youtube <i class=”fa fa-youtube”></i> </a></li>

</ul> </div><div><a href=”https://oyepandeyji.com/”><span style=”color: white;”>oyepandeyji</span></a></div>

Replace every highlighted β€œ#” with your own social media page or profile URL like (https://instagram.com/oyepandeyji).

STYLE 3:

HOW TO ADD SOCIAL MEDIA BUTTUON ON BLOGGER

<style> 

ul.techornate-social-share{padding:0;margin:0;overflow:hidden}ul.techornate-social-share li{list-style:none;float:left;margin-right:4%;width:48%;margin-bottom:10px;background:#fafafa;overflow:hidden}ul.techornate-social-share li a{text-decoration:none;display:inline-block;float:left;color:#fff;height:40px;width:40px;text-align:center;font-size:14px;line-height:40px;margin-right:16px;position:relative;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out}ul.techornate-social-share li a:after{height:0;width:0;top:50%;left:100%;content:”;margin-top:-4px;position:absolute}ul.techornate-social-share li a.facebook{background:#436feb}ul.techornate-social-share li a.facebook:after{border:4px solid #436feb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.twitter{background:#43c9eb}ul.techornate-social-share li a.twitter:after{border:4px solid #43c9eb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.google{background:#f14133}ul.techornate-social-share li a.google:after{border:4px solid #f14133;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a.youtube{background:#b00}ul.techornate-social-share li a.youtube:after{border:4px solid #b00;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}ul.techornate-social-share li a:hover{opacity:.7}ul.techornate-social-share li span{font-size:12px;margin:0;line-height:15px;color:#999;font-weight:700;display:block}ul.techornate-social-share li span.scount-number{margin-top:5px;color:#333}ul.techornate-social-share li:nth-child(2n){margin-right:0} </style> <div><a href=”https://oyepandeyji.com/”><span style=”color: white;”>oyepandeyji</span></a></div>

<ul class=”techornate-social-share”> 

<li> <a href=”#” class=”facebook”><i class=”fa fa-facebook”></i></a> <span class=”scount-number”>44,143</span> <span>Fans</span></li> 

<li> <a href=”#” class=”twitter”><i class=”fa fa-twitter”></i></a> <span class=”scount-number”>39,505</span> <span>Followers</span></li> 

<li> <a href=”#” class=”google”><i class=”fa fa-google-plus”></i></a> <span class=”scount-number”>25,203</span> <span>Followers</span></li> 

<li> <a href=”#” class=”youtube”><i class=”fa fa-youtube”></i></a><span class=”scount-number”>7,456</span> <span>Subscribers</span></li> 

</ul>

Note-Replace every highlighted β€œ#” with your own social media page or profile URL like (https://instagram.com/oyepandeyji).

Note-

Conclusion

Hope you have liked How to add social media on blogger post Share this article with your friends. Also, if you face any problem in following this guide, then feel free to comment. I will try my best to solve your query.

For watching full tutorial in video go through the given video:

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *