How to Add Social Media Widgets Buttons in Blogger || Social Media Widget in Blogger ||

यहाँ आपलोगों को हम बतलाने वाले हैं की आप कैसे अपने अपने blogger साईट में Social media button widget लगा सकते हैं | ऐसे तो सभी को उनके blogger के खुद के टेम्पलेट में भी Social media button widget मिल जाता है लेकिन फिर भी अगर आपको वो सारे widget पसंद नहीं आते हैं तो कोई बात नहीं |

यहाँ हम आपको 4 तरह के अलग-अलग design के Social media button widget आपको दिखाने वाले हैं और उसे कैसे आप अपने ब्लॉग में लगा सकते हैं उसके बारे में भी पूरी जानकारी हम देने वाले हैं तो आपको इसमें से जो पसंद आये उसे आप अपने ब्लॉग में लगा सकते हैं तो आइये जानते हैं कैसे 👇👇

Must Read :--

How to Add Social Media Widgets Buttons in Blogger,add social media icons blogger,add social media follow button widget blogger,blogger social button

Social media button widget in Blogger

जब भी आप कोई साईट open करते हैं तो उसमें आपको ऊपर , नीचे , दाये या बाये जरुर आपको Social media button widget मिलता होगा , जिस पर क्लिक कर आप आप उस साईट के मालिक के सोशल अकाउंट पर जा सकते हैं |

और वैसे भी आपको अपने साईट पर Social media account जोड़ना आवश्यक होता है क्युकी इसके बिना आपको AdSense approval भी नहीं मिल पाता है और अगर आप अपने साईट पर प्रोफेशनल तरीके का Social media button widget लगायेंगे तो और भी आपका साईट प्रोफेशनल लगेगा |

Social media button widget 1st Design in Blogger

<style type="text/css">
.social-profile-icons{margin-top:20px 0 0;overflow:hidden}.social-profile-icons ul{display:inline-block;margin:0 auto!important;text-align:center}.social-profile-icons ul li{background:transparent!important;border:none!important;float:left;list-style-type:none!important;margin:0 4px 10px!important;padding:0!important}.social-profile-icons ul li a,.social-profile-icons ul li a:hover{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBpFlsTd-UH7MI0JhAPF1RUbVj9AtYiK3T8gw2d12sQgzPGOnqhXy8IG18luCpmHqxJpbz_0qoCcbDa8SgTT3lsJ-bfhyphenhyphenQpqk4F6uauAhruf4AUwaT5Jf5HE3vZSwLUBeEb1RClaph6VM_/s1600/sprite_32x32.png") no-repeat scroll 0 0;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;display:block;height:38px;overflow:hidden;text-indent:-999px;transition:all 0.25s linear 0s;width:38px}.social-profile-icons ul li.social-facebook a{background-color:#3b5998;background-position:-60px 3px}.social-profile-icons ul li.social-twitter a{background-color:#00aced;background-position:-253px 3px}.social-profile-icons ul li.social-gplus a{background-color:#dd4b39;background-position:-93px 3px}.social-profile-icons ul li.social-linkedin a{background-color:#007bb6;background-position:-125px 3px}.social-profile-icons ul li.social-pinterest a{background-color:#cb2027;background-position:-157px 3px}.social-profile-icons ul li.social-rss a{background-color:#F87E12;background-position:-189px 3px}.social-profile-icons ul li a:hover{opacity:.8}
</style>
<div class="social-profile-icons">
<ul>
<li class="social-facebook"><a rel="nofollow" target='_blank' href="facebook-link" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a rel="nofollow" target='_blank' href="twitter-link" title="Twitter">Twitter</a></li>
<li class="social-gplus"><a rel="nofollow" target='_blank' href="google-plus-link" title="Google+">Google+</a></li>
<li class="social-linkedin"><a rel="nofollow" target='_blank' href="linkedin-link" title="LinkedIn">Linkedin</a></li>
<li class="social-pinterest"><a rel="nofollow" target='_blank' href="pinterest-link" title="Pinterest">Pinterest</a></li>
<li class="social-rss"><a rel="nofollow" target='_blank' href="feedburner-link" title="RSS">RSS</a></li>
</ul></div>

यहाँ आप ऊपर दिए गए कोड को copy कर ले |
अब इस कोड को notepad में या किसी अन्य प्रोग्राम में open कर ले |
अब इस कोड में आप facebook-link , twitter-link , google-plus-link , linkedin-link , pinterest-link , feedburner-link के जगह आप उस सोशल मीडिया का अपना लिंक लगा दे यानी की replace कर दे |
अब आप उस कोड को copy कर ले |

अब इसे आपको कैसे अपने blogger साईट पर लगाना है इसके लिए नीचे पढ़े |

Must Read :--

Social media button widget 2nd Design in Blogger

<!-- HMH Social Widget Start -->
<style>
ul.HMH-follow-buttons a:hover{color:#03c9a9}.HMH-follow-buttons.b-title li{text-align:center;background-color:#fff;width:31.5%;border:1px solid #eee}.HMH-follow-buttons.b-title a{text-transform:uppercase;text-decoration:none;margin:20px auto 0;font-size:10px}.HMH-follow-buttons li{display:inline-block;padding:0 0 7px;margin-bottom:3px!important}.HMH-follow-buttons li:last-child{border-bottom:1px solid #eee!important;padding-bottom:7px!important}.HMH-follow-buttons.b-title i{margin:0 auto 10px;display:block}.HMH-follow-buttons.style-1 i{height:32px;width:32px;line-height:32px;font-size:20px;margin:10px auto 0;text-align:center;color:#333}
</style>
<ul class='HMH-follow-buttons style-1 b-title'>
<li><a href='#'><i class="fa fa-facebook"></i>facebook</a></li>
<li><a href='#'><i class="fa fa-twitter"></i>twitter</a></li>
<li><a href='#'><i class="fa fa-instagram"></i>Instagram</a></li>
<li><a href='#'><i class="fa fa-youtube"></i>Youtube</a></li>
<li><a href='#'><i class="fa fa-linkedin"></i>linkedin</a></li>
<li><a href='#'><i class="fa fa-feed"></i>RSS</a></li>
</ul>
<!-- HMH Social Widget End -->

यहाँ आप ऊपर दिए गए कोड को copy कर ले |
अब इस कोड को notepad में या किसी अन्य प्रोग्राम में open कर ले |
अब इस कोड में आप # के जगह पर facebook link , twitter link यानी जो लिखा है उस सोशल मीडिया का अपना लिंक लगा दे यानी की replace कर दे |
अब आप उस कोड को copy कर ले |

अब इसे आपको कैसे अपने blogger साईट पर लगाना है इसके लिए नीचे पढ़े |

Social media button widget 3rd Design in Blogger

<!-- HMH Social Widget Start -->
<style>
.HMH-social-buttons ul{padding-left:0;list-style:none}.HMH-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}.HMH-social-buttons ul li{margin-bottom:10px;width:100%}.HMH-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}.HMH-social-buttons li a.social-btn-facebook{background:#3b5998}.HMH-social-buttons li a.social-btn-twitter{background:#1da1f2}.HMH-social-buttons li a.social-btn-youtube{background:#cd201f}.HMH-social-buttons li a.social-btn-instagram{background:#405de6}.HMH-social-buttons li a.social-btn-linkedin{background:#007bb5}
</style>
<div class="HMH-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-linkedin">Follow on Linkedin <i class="fa fa-Linkedin"></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>
<!-- HMH Social Widget End -->

यहाँ आप ऊपर दिए गए कोड को copy कर ले |
अब इस कोड को notepad में या किसी अन्य प्रोग्राम में open कर ले |
अब इस कोड में आप # के जगह पर facebook link , twitter link यानी जो लिखा है उस सोशल मीडिया का अपना लिंक लगा दे यानी की replace कर दे |
अब आप उस कोड को copy कर ले |

अब इसे आपको कैसे अपने blogger साईट पर लगाना है इसके लिए नीचे पढ़े |

Social media button widget 4th Design in Blogger

<!-- HMH Social Widget Start -->
<style>
.s-text strong,.social-counter{font-weight:900}.HMH-socials a{display:block;color:#fff;padding:12px 15px;position:relative;margin-bottom:5px;text-decoration:none}.HMH-socials a span,.HMH-socials a:before{z-index:2;position:relative}.social-counter{position:absolute;font-size:14px;line-height:1;padding-top:4px}.s-text{float:right}.HMH-socials a:after{content:" ";height:100%;width:0;top:0;left:0;position:absolute;background:#252b42;z-index:1}.fa-facebook:before,.fa-subscribe:before,.fa-twitter:before{display:inline-block;width:16px;font-family:FontAwesome;margin-right:10px;padding-right:10px;font-size:18px;border-right:1px solid rgba(255,255,255,.3)}.fa-facebook{background:#1c3e67}.fa-facebook:before{content:"\f09a"}.fa-twitter{background:#28a6c5}.fa-twitter:before{content:"\f099"}.fa-subscribe{background:#d2002c}.fa-subscribe:before{content:"\f167"}
</style>
<div class="HMH-socials">
<a target="_blank" href="#" class="fa-facebook"><span class="social-counter">146,200</span><span class="s-text">Follow us on <strong>Facebook</strong></span></a>
<a target="_blank" href="#" class="fa-twitter"><span class="social-counter">50,748</span><span class="s-text">Follow us on <strong>Twitter</strong></span></a>
<a target="_blank" href="#" class="fa-subscribe"><span class="social-counter">33,175</span><span class="s-text">Subscribe us on <strong>YouTube</strong></span></a>
<div class="clear"></div>
</div>
<!-- HMH Social Widget End -->

यहाँ आप ऊपर दिए गए कोड को copy कर ले |
अब इस कोड को notepad में या किसी अन्य प्रोग्राम में open कर ले |
अब इस कोड में आप # के जगह पर facebook link , twitter link यानी जो लिखा है उस सोशल मीडिया का अपना लिंक लगा दे यानी की replace कर दे |
साथ ही आप इस कोड में जो आपको followers की संख्या दिख रही है उसको भी आप अपने अनुसार घटा बढ़ा कर लिख सकते हैं |
अब आप उस कोड को copy कर ले |

अब इसे आपको कैसे अपने blogger साईट पर लगाना है इसके लिए नीचे पढ़े |

Must Read :--