इस पोस्ट में, मैं आपको बताऊंगा कि आप अपने 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 posts, social 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 कर लीजिए |
Edit HTML का काम complete हो गया, अब चलते हैं Setting के दूसरे भाग में |
Step #4
अब आपको फिर से अपने blogger के Dashboard में जाकर “Layout” section में जाना है | उसके बाद Sidebar section में “Add a Gadget” पर क्लिक करें |
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.
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.
Note- इस code को copy करने के लिए इस code में कहीं भी click करके इस code ऊपर में copy करने का बटन आएगा उस पर क्लिक करके code को copy कर सकते है |
Style 3.
Note- इस code को copy करने के लिए इस code में कहीं भी click करके इस code ऊपर में copy करने का बटन आएगा उस पर क्लिक करके code को copy कर सकते है |
<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.
<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 करने के बाद आप देखेगे की आपके वेबसाइट पर सोशल मीडिया फॉलो बटन ऐड हो चुका है |
इन्हें भी पढ़े –
☛ Custom Robots.txt File Ko Blogger Me Kaise Add Kare
☛ Blogger Ki Har Post Me Author Profile Box Kaise Lagaye
Conclusion
आशा करते हैं कि आपको हमारी यह पोस्ट Blog me social media button kaise add kare? जरूर पसंद आई होगी एवं इसके साथ ही आपको blog par social media icon kaise lagaye इसके बारे में भी सारी जानकारी आपको हमारे इस post के माध्यम से मिल गई होगी तो इस post को अपने दोस्तों में share जरूर कीजिए |
Add social media follow buttons for blogger in Hindi step bye Step आपको कैसी लगी हमें comment box में जरूर बताएं एवं इस पोस्ट पर आपकी क्या विचार है? क्या इसमें मुझसे कोई Step छुट गयी है या फिर कोई error हो तो भी आप हमें comment box में बता सकते है, मैं पूरी कोशिश करूँगा की मैं आपके सवालों का जवाब जल्द से जल्द दें सकूँ |
आगे भी ऐसी ही महत्वपूर्ण जानकारी प्राप्त करने के लिए बने रहे Techify ideas पर, धन्यवाद!
