in ,

Blog Me Social Media Follow Button Kaise Add Kare ?

Blog Me Social Media Follow Button Kaise Add Kare ?

इस पोस्ट में, मैं आपको बताऊंगा कि आप अपने Blog Me Social Media Follow Button Kaise Add Kare ? हर ब्लॉगर चाहता है कि उसके ब्लॉक पर भी ढेर सारा traffic आए | ब्लॉगर पर ट्राफिक लाने में social media का एक अहम रोल रहता है |

आप जब भी अपने ब्लॉक के पोस्ट को पब्लिश करते हैं तो आप उसे social media पर जरूर share करते होंगे ताकि आपके पोस्ट के बारे में लोग जान सके और आपके ब्लॉग पर आ सके और आपके ब्लॉक का traffic बढ़ सके |

लेकिन जब तक आपके सोशल पेज को कोई फॉलो नहीं करता है तब तक आपके सोशल पेज के जरिए आपके ब्लॉग पर ट्राफिक नहीं आ सकती है | इसलिए यूजर को सोशल मीडिया और अपने ब्लॉग से कनेक्ट रहने के लिए आपको अपने ब्लॉग में social media follow button जरूर Add करनी चाहिए | तो आइए जानते है how to add social media buttons to blogger postssocial media widget for blogger.

Blogger में Social Media Follow Button कैसे Add करे 

Widget में social media follow button कैसे add करें | इसके लिए आपको नीचे दिए गए process को फॉलो करना होगा | जिसके बाद आप भी अपने ब्लॉग पर responsive और beautiful social media follow button को लगा पाएंगे |

Step #1

सबसे पहले Blogger.com पर जाकर अपने ब्लॉग अकाउंट से लॉग इन कीजिए | फिर उसके बाद अपने ब्लॉक के Dashboard में जाइए और Theme >> Edit HTML पर क्लिक कीजिए |

Step #2

इसके बाद इस HTML Code में कहीं पर भी क्लिक करके कीबोर्ड से Ctrl+F बटन दबाएं | तुरंत ऊपर लेफ्ट साइड में एक सर्च बॉक्स खुलेगा यहाँ आप “</head>” type करके enter पर press कर दीजिए |

Step #3

अब नीचे 👇👇 दिए गए code को कॉपी करें और “</head>” code से ठीक पहले इस कोड paste कर दीजिए | फिर उसके बाद save button बटन पर क्लिक करके अपने theme को save कर लीजिए |

Blog Me Social Media Follow Button Kaise Add Kare ?

Edit HTML का काम complete हो गया, अब चलते हैं Setting के दूसरे भाग में |

Step #4

अब आपको फिर से अपने blogger के Dashboard में जाकर “Layout” section में जाना है | उसके बाद Sidebar section में “Add a Gadget” पर क्लिक करें |

Blog Me Social Media Follow Button Kaise Add Kare ?

Step #5

Add a Gadget में जो popup open होगा, उसमें नीचे scroll करें और “HTML / JavaScript” के Plus(+) वाले icon पर क्लिक करें | ( ऊपर फोटो में आप 3 नंबर में देख सकते है )

Step #6

अब आपको नीचे 5 तरह की (Style 1, 2, 3, 4 और 5) में social media button का code दिया जा रहा है | उसमे से किसी कोड को Copy कर लीजिए | फिर उस code को “content” में paste कर दीजिए | ( ऊपर फोटो में आप 4 नंबर में देख सकते है )

अंत में, “Save” बटन पर क्लिक करें | फिर उसके बाद नीचे राइट साइड में “save” पर क्लिक करके अपने layout section को Save कर लीजिए | अब आप अपने blog को रिफ्रेश करके देख सकते है |

Blogger Ke Widget Me Social Media Button Kaise Add Kare

यहाँ पर आपको जो भी style पसंद आए आप उसके नीचे वाले कोड को Copy कर लीजिए | और ऊपर में बताये गए स्टेप को फॉलो कीजिये |

Style 1.

Blog Me Social Media Follow Button Kaise Add Kare ?

Note- इस code को copy करने के लिए इस code में कहीं भी click करके इस code ऊपर में copy करने का बटन आएगा उस पर क्लिक करके code को copy कर सकते है |

<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://techifyideas.com/"><span style="color: white;">techifyideas</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>

नोट :- यहाँ पर “#” वाले स्थान पर आपको अपना सोशल मीडिया पेज या प्रोफाइल URL जैसे (https://facebook.com/techifyideas) से बदलें।

यदि आप किसी social media icons को हटाना चाहते है, तो आप <a> tag में से उस code को हटा सकते हैं. मान लीजिए कि आपको Pinterest icon को हटाना है तो आप list से “<a href=”#” class=”fa fa-pinterest” target=”_blank”></a>” निकालें |

Style 2.

Blog Me Social Media Follow Button Kaise Add Kare ?

Note- इस code को copy करने के लिए इस code में कहीं भी click करके इस code ऊपर में copy करने का बटन आएगा उस पर क्लिक करके code को copy कर सकते है |

<style> 
.s-text strong,.social-counter{font-weight:900}.techornate-socials a{display:block;color:#fff;padding:12px 15px;position:relative;margin-bottom:5px;text-decoration:none}.techornate-socials a span,.techornate-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}.techornate-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><a href="https://techifyideas.com/"><span style="color: white;">techifyideas</span></a></div>
<div class="techornate-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>

प्रत्येक “Numbers” जैसे (187,255) को अपने social followers, connections, fans और YouTube subscribers नंबरों से बदलें |

Style  3.

Blog Me Social Media Follow Button Kaise Add Kare ?

Note- इस code को copy करने के लिए इस code में कहीं भी click करके इस code ऊपर में copy करने का बटन आएगा उस पर क्लिक करके code को copy कर सकते है |

<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://techifyideas.com/"><span style="color: white;">techifyideas</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>

प्रत्येक “Numbers” जैसे (44,143) को अपने social followers, connections, fans और YouTube subscribers नंबरों से बदलें |

Step 4.

Blog Me Social Media Follow Button Kaise Add Kare ?

<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://techifyideas.com/"><span style="color: white;">techifyideas</span></a></div>

यहाँ पर “#” वाले स्थान पर आपको अपना सोशल मीडिया पेज या प्रोफाइल URL जैसे (https://facebook.com/techifyideas) से बदलें।

Step 5.

Blog Me Social Media Follow Button Kaise Add Kare ?

<style>
a.social_item {
position: relative;
display: block;
height: 50px;
line-height: 50px;
overflow: hidden;
border-radius: 4px;
}
li.social_item-wrapper {
float: left;
width: 48%;
text-align: center;
margin-right: 4% !important;
margin-bottom: 10px !important;
color: #fff;
}
.social_item-wrapper:nth-child(2n+2) {
margin-right: 0 !important;
}
.social_icon {
float: left;
line-height: 50px;
width: 41px;
font-size: 1.3rem;
}
a.social_item.social_facebook {
background: #5d82d1 !important;
}
.fa-facebook.social_icon {
background: #2E4372;
}
li.social_item-wrapper:hover .fa-facebook.social_icon {
background: #3F5B9B;
}
li.social_item-wrapper:hover .social_facebook {
background: #2E4372;
}
a.social_item.social_twitter {
background: #40bff5 !important;
}
.fa-twitter.social_icon {
background: #1571A5;
}
li.social_item-wrapper:hover .fa-twitter.social_icon {
background: #1C97DE;
}
li.social_item-wrapper:hover .social_twitter {
background: #1571A5;
}
a.social_item.social_youtube {
background:#ef4e41 !important;
}
.fa-youtube.social_icon {
background: #B31919;
}
li.social_item-wrapper:hover .fa-youtube.social_icon {
background: #E22020;
}
li.social_item-wrapper:hover .social_youtube {
background: #B31919;
}
a.social_item.social_rss {
background:#ff7e30 !important;
}
.fa-rss.social_icon {
background: #C2521B;
}
li.social_item-wrapper:hover .fa-rss.social_icon {
background: #E86321;
}
li.social_item-wrapper:hover .social_rss {
background: #C2521B;
}
a.social_item.social_linkedin {
background: #3897f0 !important;
}
.fa-linkedin.social_icon {
background: #02669E;
}
li.social_item-wrapper:hover .fa-linkedin.social_icon {
background: #0275B6;
}
li.social_item-wrapper:hover .social_linkedin {
background: #02669E;
}
a.social_item.social_instagram {
background: #3f91cb !important;
}
.fa-instagram.social_icon {
background: #6F583C;
}
li.social_item-wrapper:hover .fa-instagram.social_icon {
background: #8E714D;
}
li.social_item-wrapper:hover .social_instagram {
background: #6F583C;
}
a.social_item.social_pinterest {
background: #CA2027;
}
.fa-pinterest.social_icon {
background: #AB1B21;
}
li.social_item-wrapper:hover .fa-pinterest.social_icon {
background: #CA2027;
}
li.social_item-wrapper:hover social_pinterest {
background: #AB1B21;
}
ul.social-counter a {
color: #fff;
}
</style><div class="socialcounter"><ul class="social-counter"><li class="social_item-wrapper"><a href="#" class="social_item social_facebook"><i class="fa fa-facebook social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_twitter"><i class="fa fa-twitter social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_youtube"><i class="fa fa-youtube social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_rss"><i class="fa fa-rss social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_linkedin"><i class="fa fa-linkedin social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_instagram"><i class="fa fa-instagram social_icon"></i><span class="social_num">230,000</span></a></li></ul></div>

प्रत्येक “Numbers” जैसे (230,000) को अपने social followers, connections, fans और YouTube subscribers नंबरों से बदलें |

उसके बाद आप अपने वेबसाइट के होम पेज को refresh करके चेक कर सकते हैं |refresh करने के बाद आप देखेगे की आपके वेबसाइट पर सोशल मीडिया फॉलो बटन ऐड हो चुका है |

Conclusion

आशा करते हैं कि आपको हमारी यह पोस्ट Blog me social media button kaise add kare? जरूर पसंद आई होगी एवं इसके साथ ही आपको blog par social media icon kaise lagaye इसके बारे में भी सारी जानकारी आपको हमारे इस post के माध्यम से मिल गई होग