Blogger website में Social Media Follower Button आसान कोड जानकारी

Blog website में Social Media Follower Button कैसे लगाये?

दोस्तों एक सुंदर अपनी पसंदीदा कैटेगरी से रिलेटेड ब्लॉग बनाने के बाद हमारी यही कोशिश रहती है, कि हमने जो ब्लॉग बनाया है। वह लोगों को अधिक से अधिक पसंद आ सके, वह हमारे साथ जुड़ सकें। और हमारे ब्लॉग को अच्छी खासी रैंक मिल सके और हमें मोटिवेशन मिल सके।

ताकि हमारा ब्लॉग जल्दी से जल्दी सफलता के कदम चूम सकें, और हम घर बैठे अच्छी खासी इनकम कर सकें।

और घर बैठे अच्छी खासी इनकम करने के लिए हमारे ब्लॉग पर बहुत सारा ट्रैफिक होना बहुत ही जरूरी है। और इतने Traffic के लिए हमें सिर्फ गूगल पर निर्भर नहीं रहना चाहिए, बाकी और तरीके भी अपनाने चाहिए। जो हमें अच्छा खासा ट्रैफिक भेज सकते हैं।

उनकी मदद से हम अपनी साइट पर विजिटर ला सकते हैं, उन्हें हम से जोड़े रख सकते हैं। और इसका एक अच्छा खासा तरीका सोशल मीडिया साइट्स है, जिस पर अधिकतर लड़के और लड़कियां अपने दोस्तों और रिश्तेदारों से जुड़े रहने के लिए लाइव रहते हैं। और वह आप से जुड़ने के लिए भी कदम उठा सकते हैं।

और कहीं विजिटर ऐसे होते हैं, जो ब्लॉग या वेबसाइट को फॉलो करने से अच्छा वह हमसे सोशल मीडिया साइट पर जुड़ना पसंद करते हैं। इसीलिए आप अपनी ब्लॉग पर सोशल मीडिया फॉलो बटन लगा सकते हैं

और उनके लिए अपनी सोशल मीडिया प्रोफाइल या पेज फॉलो करना आसान बना सकते हैं।

वैसे भी हम अपनी ब्लॉग की पोस्ट सोशल मीडिया पेज, ग्रुप या अपनी साइट से रिलेटेड प्रोफाइल पर Share करते हैं। यदि विजिटर आपकी उन प्रोफाइल से जुड़ जाएं, और जब हम अपने ब्लॉग पोस्ट अपनी सोशल मीडिया साइट पर शेयर करते हैं। तो जुड़े हुए हमारे फॉलोअर्स को वह नोटिफिकेशन मिलता है, और वह उस नोटिफिकेशन पर क्लिक करके हमारी सोशल मीडिया प्रोफाइल पर आएंगे, और वहां से वह आपकी साइट पर ही डायरेक्ट हो जाएंगे।

और यह तरीका काफी कारगर साबित होता है, और इन तरीकों से हमें तकरीबन 10 से 15 परसेंट तक का ट्रैफिक मिल सकता है।

और यही नहीं सोशल मीडिया साइट पर अपने ब्लॉग को बढ़ावा देने से हमारी साइट की गूगल पर रैंकिंग भी सुधरती है। और इसकी सलाह गूगल खुद हमें देता है, कि आप अपनी साइट को सोशल मीडिया साइट के जरिए बढ़ावा दें।

आप अपने सोशल मीडिया पेज या प्रोफाइल जो आपकी साइट से रिलेटेड है, या जिसे आप अपने ब्लॉग वेबसाइट पर उसके फॉलो बटन लगा कर फॉलो करवाना चाहते हैं। तो आप यह कर सकते हैं। बस कुछ आसान कोडिंग करने की जरूरत हैं, और आपकी साइट पर आप सोशल मीडिया और यूट्यूब चैनल जैसे फॉलो बटन लगा सकते हैं।

यहां पर मैं आपको आसान कोड दूंगा और उन्हें कैसे आप अपनी साइट के अंदर सेट कर सकते हैं। इसके बारे में भी पूरी जानकारी बताऊंगा, इसलिए इस पोस्ट को अंत तक पढ़े और अपनी साइट पर फॉलो बटन लगाना सीखें।

Social media फॉलो बटन क्यों लगाने चाहिए?

दोस्तों यदि आपके ब्लॉग से रिलेटेड सोशल मीडिया पर पेज है, प्रोफाइल है। जिस पर आप अपने ब्लॉग पोस्ट शेयर करते हैं, और वहां से भी आप अपने ब्लॉग के लिए ट्रैफिक प्राप्त करते हैं। या करना चाहते हैं।

तो इसके लिए आपके सोशल मीडिया पर या ब्लॉग पर फॉलोअर्ष होना बहुत ही जरूरी होता है। जितने अधिक आपके फॉलोअर्स होंगे, उतना ही आपको फायदा होगा। आपकी साइट पर ट्रैफिक आएगा और गूगल पर आपकी रैंकिंग भी सुधरेगी।

वैसे गूगल पर रैंकिंग पोस्ट और कंटेंट टॉपिक पर तय होती है, कि आपकी पोस्ट को कितनी रैंकिंग गूगल पर मिलने वाली है, आपके टॉपिक को लोग गूगल पर कितना सर्च करते हैं, उसके कंपिटिशन कितने हैं। यह गूगल तय करता है, कि आपकी पोस्ट को कौन से पेज पर दर्शाना है।

लेकिन सोशल मीडिया पर अपना अच्छा प्रदर्शन करके आप अपनी साईट को बढ़ावा दे सकते हैं।

जो विजिटर आपकी साइट पर आते हैं, और उनकी फेसबुक, टि्वटर, लिंकडइन, पिंटरेस्ट जिस पर भी उनकी प्रोफाइल है। तो वह आपको फॉलो कर सकते हैं। और जब आप अपने सोशल मीडिया पेज या प्रोफाइल पर अपने ब्लॉग पोस्ट लिंक शेयर करेंगे। तो उन्हें नोटिफिकेशन मिलेंगे, वह आपके सोशल मीडिया से आपकी साइट पर आ सकते हैं, और आर्टिकल पढ़ सकते हैं।

सोशल मीडिया फॉलोअर्स बटन कैसे लगाएं?

चलिए आसान कोड में इसे लगाना शुरु करते हैं, यहां पर नीचे दिए गए कोड को पूरा कॉपी करें, यह आपके ब्लॉग में सोशल मीडिया फॉलो बटन जोड़ेंगे।

<ul class="social-icons icon-circle list-unstyled list-inline">
<h3>हमसे यहां जुड़े</h3>
<p>Over 300,000+ Readers Get fresh content from Sikhoinall</p>
       <li> <a href="#"><i class="fa fa-dribbble"></i></a></li> 
       <li> <a href="#"><i class="fa fa-dropbox"></i></a></li> 
       <li> <a href="#"><i class="fa fa-facebook"></i></a></li>   
       <li> <a href="#"><i class="fa fa-flickr"></i></a></li> 
       <li> <a href="#"><i class="fa fa-github"></i></a></li>  
       <li> <a href="#"><i class="fa fa-google-plus"></i></a></li>   
       <li> <a href="#"><i class="fa fa-instagram"></i></a></li> 
       <li> <a href="#"><i class="fa fa-linkedin"></i></a></li>   
       <li> <a href="#"><i class="fa fa-pinterest"></i></a></li>   
       <li> <a href="#"><i class="fa fa-skype"></i></a></li> 
       <li> <a href="#"><i class="fa fa-tumblr"></i></a></li>
       <li> <a href="#"><i class="fa fa-twitter"></i></a></li>
       <li> <a href="#"><i class="fa fa-vimeo-square"></i></a></li>
       <li> <a href="#"><i class="fa fa-vk"></i></a></li>
       <li> <a href="#"><i class="fa fa-youtube-play"></i></a></li>
    </ul>
<style>
.list-unstyled {
 padding-left: 0;
 list-style: none;
}
.list-inline h3 {display: inline-block; font-size: 22px; Color: #3c4043; padding: 0px 5px 0px 5px; margin-bottom: 0px; margin-top: 2px;
}
.list-inline p {display: inline-block; font-size: 18.20px; Color: #3d85c6; padding: 0px 5px 0px 5px; margin-bottom: 10px;
}
.list-inline li {
     display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
    margin-bottom: 15px;
}
/*---- Genral classes end -------*/

/*Change icons size here*/
.social-icons .fa {
 font-size: 1.8em;
}
/*Change icons circle size and color here*/
.social-icons .fa {
 width: 50px;
 height: 50px;
 line-height: 50px;
 text-align: center;
 color: #FFFFFF;
 color: rgba(255, 255, 255, 0.8);
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}
.social-icons.icon-circle .fa{ 
 border-radius: 50%;
}
.social-icons.icon-rounded .fa{
 border-radius:5px;
}
.social-icons.icon-flat .fa{
 border-radius: 0;
}
.social-icons .fa-adn{background-color:#504e54;} 
.social-icons .fa-apple{background-color:#aeb5c5;} 
.social-icons .fa-android{background-color:#A5C63B;}  
.social-icons .fa-bitbucket,.social-icons .fa-bitbucket-square{background-color:#003366;} 
.social-icons .fa-bitcoin,.social-icons .fa-btc{background-color:#F7931A;} 
.social-icons .fa-css3{background-color:#1572B7;} 
.social-icons .fa-dribbble{background-color:#F46899;}  
.social-icons .fa-dropbox{background-color:#018BD3;}
.social-icons .fa-facebook,.social-icons .fa-facebook-square{background-color:#3C599F;}  
.social-icons .fa-flickr{background-color:#FF0084;}
.social-icons .fa-foursquare{background-color:#0086BE;}
.social-icons .fa-github,.social-icons .fa-github-alt,.social-icons .fa-github-square{background-color:#070709;} 
.social-icons .fa-google-plus,.social-icons .fa-google-plus-square{background-color:#CF3D2E;} 
.social-icons .fa-html5{background-color:#E54D26;}
.social-icons .fa-instagram{background-color:#A1755C;}
.social-icons .fa-linkedin,.social-icons .fa-linkedin-square{background-color:#0085AE;} 
.social-icons .fa-linux{background-color:#FBC002;color:#333;}
.social-icons .fa-maxcdn{background-color:#F6AE1C;}
.social-icons .fa-pagelines{background-color:#241E20;color:#3984EA;}
.social-icons .fa-pinterest,.social-icons .fa-pinterest-square{background-color:#CC2127;} 
.social-icons .fa-renren{background-color:#025DAC;}
.social-icons .fa-skype{background-color:#01AEF2;}
.social-icons .fa-stack-exchange{background-color:#245590;}
.social-icons .fa-stack-overflow{background-color:#FF7300;}
.social-icons .fa-trello{background-color:#265A7F;}
.social-icons .fa-tumblr,.social-icons .fa-tumblr-square{background-color:#314E6C;} 
.social-icons .fa-twitter,.social-icons .fa-twitter-square{background-color:#32CCFE;} 
.social-icons .fa-vimeo-square{background-color:#229ACC;}
.social-icons .fa-vk{background-color:#375474;}
.social-icons .fa-weibo{background-color:#D72B2B;}
.social-icons .fa-windows{background-color:#12B6F3;}
.social-icons .fa-xing,.social-icons .fa-xing-square{background-color:#00555C;} 
.social-icons .fa-youtube,.social-icons .fa-youtube-play,.social-icons .fa-youtube-square{background-color:#C52F30;}
</style>

ऊपर दिए गए कोड को कॉपी करने के बाद आप अपने ब्लॉगर डैशबोर्ड में 'Layout' विकल्प मैं विजिट करें।

अब + Add a Gadget विकल्प पर क्लिक करके 'HTML/Javascript'  विकल्प को सेलेक्ट करें, अब ओपन होने वाले बड़े बॉक्स में इस कोड को पेस्ट करें, और इसे Save कर ले।

अब आप अपना ब्लॉग देखें, और वहां पर नजर डाले जहां पर आपने सोशल मीडिया Follower Button दिखाने के लिए कोड रखा है। आप देखेंगे, कि कुछ Social Media icons Show हो रहे होंगे।

Social Media फॉलो बटन icons Show नहीं हुए?

यदि आप देखते हैं, की आपने जहां पर कोड रखा है। उस जगह आपके ब्लॉग पर सोशल मीडिया follow बटन दिखाई नहीं दे रहे हैं। तो इसके निम्नलिखित कारण हो सकते है।

क्या आप अपने ब्लॉग के लिए Theme ब्लॉगर द्वारा निर्धारित थीम का उपयोग करते हैं, यदि हां तो ऐसा हो सकता है। कि आपको वहां सोशल मीडिया आइकन दिखाई ना दे।

क्योंकि आपके ब्लॉग पर जो मेनू बार आइकन और सोशल मीडिया शेयर आइकन होते हैं, वह ब्लॉगर के खुद के बनाए हुए होते हैं। और वह उन आईकन को ब्लॉग पर अप्लाई करने के लिए एक अलग कोडिंग का उपयोग करते हैं।

और मैंने जो आपको ऊपर Social Media Follower Button icons ब्लॉग पर लगाने के लिए कोड दिया है। वह एक कस्टम टेंप्लेट पर अप्लाई होने वाला कोड है।

वैसे यह कोड ब्लॉगर द्वारा निर्धारित टेंपलेट पर भी काम कर सकता है। लेकिन इसके लिए आपको अपने ब्लॉगर थीम के हेड सेक्शन में एक कोड जोड़ने की जरूरत है।

और यदि आप एक कस्टम ब्लॉगर टेंपलेट का उपयोग करते हैं, तो उसमें यह कोड सुविधा ऑलरेडी पहले ही मौजूद रहती है, इसीलिए आपको वहां पर अपने सोशल मीडिया फॉलो बटन दिखाई देंगे। और आपको कोई कोड जोड़ने की जरूरत भी नहीं पड़ेगी।

ब्लॉगर द्वारा निर्धारित थीम में Social Media Follower Button icons कैसे दिखाऊं?

इसके लिए आप यहां नीचे दिए गए कोड को कॉपी करें, और इस कोड को अपने ब्लॉगर थीम के अंदर <head> सेक्शन के नीचे पेस्ट करें।

 <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

इसके लिए अपना ब्लॉग ओपन करें, फिर अपने ब्लॉगर डैशबोर्ड में (Theme) विकल्प पर क्लिक करें। अब आपके सामने पेज ओपन होगा, जिसमें ब्लॉगर द्वारा निर्धारित कहीं सारे टेंपलेट आपके सामने होंगे।

अब आपको उस पेज में एक (፧) आई का बटन दिखाई देगा, इस पर क्लिक करके (Edit HTML) विकल्प पर क्लिक करें।

फिर आप देखेंगे, कि आपके सामने आपके ब्लॉगर थीम की एचटीएमएल कोडिंग ओपन हो जाएगी। उस कोडिंग में आपको 4 से 6 नंबर पर एक <head> सेक्शन कोड दिखाई देगा।

इसके नीचे एक लाइन खाली करके उस कोड को यहां पेस्ट कर देना है, और फिर थीम को (Save) कर लेना है।

अब आप देखेंगे, कि आपके ब्लॉग पर सोशल मीडिया फॉलोअर्स आइकन शो हो रहे हैं।

मैंने जो आपको सोशल मीडिया फॉलोअर्स बटन लगाने के लिए  कोड दिया है। यह आपके ब्लॉग पर 15 अलग-अलग साइटों के  आइकन शो करेगा। जिनमें कुछ आइकन शायद आपके काम ना आए। यदि आप इन्हें हटाना चाहे, तो कैसे हटाएंगे चलिए नीचे की स्लाइड में जानते हैं।

Social Media Follower Button में बदलाव करना या हटाना।

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

इसके लिए ब्लॉगर लेआउट में जाएं, जहां पर आपने वह कोड रखा है। उस 'HTML/Javascript' को ओपन करें, और अपने कोड को इस तरह संपादित करें।

सोशल मीडिया फॉलो बटन आइकन हटाना?

मेरे द्वारा यहां दिया गया कोड आपके ब्लॉग में कहीं सारे सोशल मीडिया फॉलो बटन शो करेगा। यदि आपको इनमें से कुछ फॉलो बटन पसंद ना आए, तो आप उन्हें बेझिझक हटा सकते हैं। और जब चाहे आप उन्हें वापस लगा भी सकते हैं।

इसके लिए कोड पर नजर डालें, वहां आपको नीचे दिए गए अनुसार कुछ कोड दिखाई देंगे। यहां हर कोड एक अलग-अलग आइकन प्रदान करते हैं।

<li><a href="#"><i class="fa fa-facebook"></i></a></li>

यहां ऊपर दिया गया कोड आपकी ब्लाग के अंदर फेसबुक का Simple आइकन प्रदर्शित करता है।

फिर हम इसे CSS और Style देकर अलग-अलग डिजाइन करते हैं।

तो अब आप ऐसे किसी भी आइकन को हटाने के लिए ऊपर दिए गए कोड को पूर्ण रूप से हटा देंगे। और फिर 'HTML/Javascript' को Save कर लेंगे। अब आप देखेंगे, कि जिस आइकन को आप हटाना चाहते थे। वह आइकन वहां से हट जाएगा।

आइकन फिर से लगाना या एक अलग आइकन जोड़ना।

दोस्तों यदि आप किसी आइकन को हटाते हैं, और यदि आपको कभी ऐसी जरूरत पड़ती है, कि आपको वह आइकन फिर से लगाना है, तो आप क्या करेंगे।

इसके लिए बिल्कुल आसान चरण आप वैसे ही फिर से एक कोड तैयार कर सकते हैं। और उसे <i class="fa fa-facebook"></i> ऐसे मान देकर फिर से आइकन तैयार कर सकतेे हैं।

और यदि मेरे द्वारा दिए गए सोशल मीडिया icons मैं से कोई अलग आइकन चाहते हैं। और आपको नहीं पता, कि आप एक अलग सोशल मीडिया आइकन तैयार कैसे कर सकते हैं। तो आप इस पोस्ट के नीचे कमेंट में लिखें।

सोशल मीडिया फॉलो बटन को डिजाइन कैसे करें?

दोस्तों यदि आप मेरे द्वारा दी गई डिजाइन से खुश नहीं है, और आप एक अलग डिजाइन, आकार, रंग रूप देना चाहते हैं। और आप यह कैसे करेंगे, चलिए नीचे आसान चरणों में जानते हैं।

h3 हमसे यहां जुड़े:- इस संदेश का आकार चेंज करने के लिए कोड font-size: 22px; मैं अंक 22  की जगह अपने इच्छा अनुसार अंक डालें। फिर आप देखेंगे, कि इसका आकार बदल चुका है।

h3 संदेश का Color  चेंज करने के लिए कोड Color: #3c4043; मैं कलर कोड #3c4043 की जगह अपनी इच्छा अनुसार कलर नाम या कलर कोड दर्ज करें।

h3 संदेश को दूर या पास करना। इसके लिए कोड padding: 0px 5px 0px 5px; मैं अंक 5 कि जगह अपनी इच्छा अनुसार अंक दर्ज करें और देखें।

ऐसे ही आप p पैराग्राफ, li .fa सोशल मीडिया फॉलो बटन के आकार, रंग रूप बदल सकते हैं। या पेंडिंग दे सकते हैं।

सोशल मीडिया फॉलो बटन का बैकग्राउंड कलर चेंज करने के लिए कोड background-color:#A5C63B; मैं कलर कोड #A5C63B की जगह अपने इच्छा अनुसार कलर नाम या कलर कोड दर्ज करें।

और सोशल मीडिया मेन आइकन का कलर चेंंज करने के लिए कोड color: #FFFFFF; मैं कलर कोड #FFFFFF की जगह अपनी इच्छा अनुसार कलर नाम या कलर कोड दर्ज करें, और देखें।

तो दोस्तों ऐसे ही आप छोटे-छोटे कोड में बदलाव करके अपने सोशल मीडिया फॉलो बटन के रंग-रूप, आकार, बैकग्राउंड कलर या बहुत कुछ चेंज कर सकते हैं।

Social Media Follow Button को अपनी सोशल मीडिया प्रोफाइल या पेज से लिंक कैसे करें?

दोस्तों अब बात आती है, कि जब कोई विजिटर आपकी साइट पर आएगा। और वह आपके ब्लॉग पर सोशल मीडिया फॉलो बटन देखेगा। और जब वह उस पर क्लिक करेगा, तो वह आपके सोशल मीडिया प्रोफाइल पर कैसे पहुंचेगा, उसे फॉलो कैसे करेगा।

इसके लिए आपको ऊपर दिए गए कोड में अपने सोशल मीडिया प्रोफाइल के लिंक ऐड करने होंगे। तभी यह सोशल मीडिया फॉलो बटन काम करेंगे, और जब कोई विजिटर उन पर क्लिक करेगा। तो वह डायरेक्ट आपकी सोशल मीडिया प्रोफाइल पर रीडायरेक्ट हो जाएगा। और वह आपके सोशल मीडिया पेज या प्रोफाइल अकाउंट को फॉलो कर पाएगा। जिसका लिंक आप यहां सोशल मीडिया बटन में ऐड करेंगे।

तो अपनी सोशल मीडिया प्रोफाइल या पेज को अपने Social Media Follower Button से जोड़ने के लिए मेरे द्वारा दिए गए कोड पर नजर डालें।

इनमें आपको नीचे दिए गए कुछ ऐसे कोड दिखाई देंगे।

<li><a href="#"><i class="fa fa-facebook"></i></a></li>

तो आपको अपनी सोशल मीडिया प्रोफाइल लिंक को यहां जोड़ने के लिए कोड href="#" में (#) की जगह अपनी सोशल मीडिया प्रोफाइल का लिंक पेस्ट करें। और 'HTML/Javascript' कोड Save करें।

फिर आप अपने ब्लॉग पर जाकर उस सोशल मीडिया फॉलो बटन पर क्लिक करें, जिससे आपने सोशल मीडिया लिंक कनेक्ट किया है। जब आप क्लिक करेंगे, तो आप अपनी सोशल मीडिया पेज या प्रोफाइल पर रीडायरेक्ट हो जाएंगे, जिसका लिंक आपने सोशल मीडिया बटन से लिंक किया है।

---

यह भी पढ़ें: " Blog Post में Table तालिका कैसे बनाये - डिब्बे दार Table बनाये "
" Post Article में Text Background Color Change कैसे करें | Background tip "
" Meesho Se paise Kaise Kamaye - meesho Reselling Tutorial "
" Paid Blogging कैसे करें, Best Paid Blogger Platform "
" Amazon.com से पैसे कैसे कमाए | Become an Affiliate "
" Blog post Article में Line Add | 8 Best Design hr रेखाएं "
" Blogger Blog में Amp Set up कैसे करें - Amp Page बनाए "

---

तो दोस्तों हमें उम्मीद है, कि आपको हमारी यह पोस्ट पसंद आई होगी। और अगर पोस्ट पसंद आई है। तो इसे अपने दोस्तों में शेयर करें, ताकि आपके दोस्तों को भी इस पोस्ट के बारे में पता चल सके। और हमें कमेंट करें, कि आपको हमारी यह पोस्ट कैसी लगी।

यदि आपको मेरे द्वारा ऊपर दी गई जानकारी समझ में नहीं आई है।  या आपका कोई प्रश्न है, तो नीचे Comment बॉक्स में हमें बताएं। आपको 24 घंटे के अंदर जवाब दे दिया जाएगा।