Blogger में Social Media Follow Icon कैसे लगाएं? Floating Design के साथ

नमस्कार दादाभाई, अगर आप Blogger पर Blogging करते हो, तो आपने एक चीज जरूर ध्यान दिया होगा। बड़े-बड़े Blogs में Side में Facebook, Instagram, YouTube के सुंदर Icons घूमते रहते हैं। User Scroll करता है और वो Icon भी साथ-साथ चलता है। देखने में एकदम प्रोफेशनल और मस्त लगता है।

Social Follow Icon क्या है?

अब सोचो दादाभाई, आपके Blog पर रोज 700 लोग आ रहे हैं। पर आपका Instagram, YouTube कोई Follow नहीं कर रहा। क्यों? क्योंकि आपने Follow करने का Option ही नहीं दिया। User को पता ही नहीं कि आपका YouTube Channel भी है। वो आपका Post पढ़ता है, अच्छा लगता है, पर आपको Follow कैसे करे, उसको पता ही नहीं चलता और वो चला जाता है यार।

Table of Contents

इसी वजह से आपका Brand नहीं बन पा रहा। और Brand नहीं बनेगा तो Earning भी नहीं बढ़ेगी। आज के Time में सिर्फ Blog से कुछ नहीं होता, आपका Social Media भी Strong होना चाहिए। क्योंकि Google अब उसी Blogger को ज्यादा Value देता है जिसका Social Presence Strong हो। अगर आपका Social Strong है तो लोग आपको Expert मानते हैं।

तो आज मैं आपको 2 सबसे आसान तरीके बताऊंगा। एक तरीका तो इतना आसान है कि आपको Code को छूना भी नहीं पड़ेगा। और दूसरा तरीका मेरा वाला प्रो जैसा Design है, जो मैं खुद अपने 5 Blogs में Use करता हूँ और सच में उसका Result बहुत अच्छा है। आप बस मेरे Steps को Follow करो, 5 मिनट में आपका काम हो जाएगा।

Blog में Social Follow Icon लगाने के फायदे क्या-क्या हैं?

दादाभाई, बहुत सारे नए Blogger सोचते हैं कि Social Icon लगाने से क्या होगा? अरे दादाभाई, बहुत कुछ होगा। ये छोटी सी चीज ही आपके Blog को बड़ा Brand बनाती है।

पहला फायदा तो Brand Value और Trust का है।

जब कोई नया User आपके Blog पर आएगा और देखेगा कि आपके 10 हजार YouTube Subscribers हैं, 5 हजार Instagram Followers हैं, तो वो आप पर तुरंत Trust करेगा। वो सोचेगा हाँ, ये कोई छोटा-मोटा Blogger नहीं है, ये तो बड़ा आदमी है। और जब Trust बढ़ता है ना दादाभाई, तभी User आपके बताए हुए Product को खरीदता है। तभी वो आपके Affiliate Link पर Click करता है। बिना Trust के आजकल कोई कुछ नहीं खरीदता।

दूसरा सबसे बड़ा फायदा है Free में Traffic वापस लाना।

मान लो Google से कोई User आया, आपका Post पढ़ा और चला गया। वो दोबारा कभी नहीं आएगा, क्योंकि उसको याद ही नहीं रहेगा कि आपका Blog कौन सा था। पर अगर उसने आपका Telegram Join कर लिया या Instagram Follow कर लिया, तो आप Telegram पर अगली Post का Link डालोगे, वो फिर से आ जाएगा। मतलब बिना Google के भी, बिना SEO ( Search engine optimized ) के भी Traffic। और ये Traffic बार-बार आता है, दादाभाई।

तीसरा फायदा है AdSense Approval और SEO में मदद।

मैंने खुद अपने कई Blogs में देखा है दादाभाई, जिस Blog में Proper Social Links लगे होते हैं, Google उसको ज्यादा अच्छा और सच्चा मानता है। क्योंकि Google को लगता है कि ये Blog सिर्फ Blog नहीं, एक Brand है। और Brand को Google हमेशा ज्यादा Rank देता है।

चौथा फायदा है User experience का।

जब User आपके Social Media पर Follow करता है, तो वो आपके Brand से जुड़ जाता है। वो आपके Post पर Comment करता है, Like करता है। इससे आपका Overall यही सबसे बढ़िया है, इससे Google समझता है कि लोग आपके Blog को पसंद कर रहे हैं।

और पाँचवा फायदा है Competitor से आगे निकलना।

आजकल हर कोई Blogging कर रहा है। अगर आपने Social Icon नहीं लगाया और आपके Competitor ने लगा लिया, तो User उसी को बड़ा Blogger समझेगा। इसलिए ये लगाना अब जरूरी हो गया है, Optional नहीं।

Backup लेना बहुत जरूरी है दादाभाई इसे Skip मत करना

अर हम हर Article में बोलते हैं दादाभाई, Theme में कुछ भी करने से पहले Backup लेना बहुत जरूरी है। ये सबसे Important Step है।

Theme > Edit HTML में जाओ, ऊपर Backup/Restore का Button होगा। पहले Theme का Backup Download कर लो। ताकि कुछ गड़बड़ हो तो वापस ला सको। कई बार छोटी सी गलती से, एक Semicolon इधर-उधर होने से पूरा Theme खराब हो जाता है। पूरा Blog White हो जाता है। तब बहुत डर लगता है यार।

अगर Backup होगा तो एक Click में सब ठीक हो जाएगा। ये आदत बना लो दादाभाई, Theme में कुछ भी करने से पहले Backup जरूर ले लो। मैं खुद कई बार बिना Backup के काम किया और Theme खराब हो गया, फिर 3-4 घंटे बर्बाद हुए उसको ठीक करने में। इसलिए आप ये गलती मत करो यार, 25 Second का काम है।

Method 1: बिना Code के सबसे आसान तरीका (Beginners के लिए)

दादाभाई, अगर आपको Coding नहीं आती, एकदम Zero Knowledge है, तो ये Method आपके लिए है। इसमें आपको Theme Edit करने की भी जरूरत नहीं है। बस Layout से हो जाएगा।

Step 1: अपने Blogger Dashboard में जाओ, फिर Layout में जाओ।

Step 2: Sidebar में देखो, Add a Gadget का Button होगा, उस पर Click करो।

Step 3: वहाँ एक List खुलेगी, बहुत सारे Gadgets होंगे। वहाँ से HTML/JavaScript को Select करो।

Step 4: अब Title में लिखो हमें Follow करें या Follow Me On Social Media।

Step 5: अब नीचे Content Box में जो Code दे रहा हूँ, उसको Copy करके Paste कर दो। बस यहाँ पर अपने Links डाल देना। ध्यान से डालना।

यहाँ से Code Copy करें

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="यहां पर अपना लिंक डालो" target="_blank" title="Follow on Facebook"><img border="0" data-original-height="40" data-original-width="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixTlg0Q5uMre6xdGQkTBpfMMtU2hLMFHaHnjxC97WJ3k4y81f2d9msf_a-p_nDVn12cGBDryy-bk53KsDs4xsK1l61I-ioxllRqkrUoH5pC_Ct2UNHZ1sYXcZvZqFuo76xhlgY_ya4hV6Z/s1600/Facebook+Icon.png" /></a>    <a href="यहां पर अपना लिंक डालो" target="_blank" title="Follow on Google Plus"><img border="0" data-original-height="40" data-original-width="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyiRaXv5yuIS8zfsukFRg5_UM-xp3bHN0QlJnP1gnJbf2OUjnDA_s1qRRYuD2ES5-hzUrL4TsK0rO6jTyQa1PaeJb2bzp0J8sZNKJv5zxFhFnABuNwdfw4D1-BuSz69cErx1dUQJCIrKlj/s1600/Google+Plus+Icon.png" /></a>    <a href="यहां पर अपना लिंक डालो" target="_blank" title="Follow on Instagram"><img border="0" data-original-height="40" data-original-width="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrHCqDyLYUmXmyorGJt6z12rs_JKqVMvNxeQ8zIUGpVR0-MTByXmerpetVeDK7fBLzagqK6BiLCb8_HHjx-eWPQI99QdwNefSu6U1xikYkgOwSqmO9Ec-Mna2DsdNTFxtDe3w8Z43eEuwv/s1600/Instagram+Icon.png" /></a>    <a href="यहां पर अपना लिंक डालो" target="_blank" title="Follow on YouTube"><img border="0" data-original-height="40" data-original-width="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7j-S6S5QLjkWqpghnNeKhvcM9hskyBXkclDQx1Jy22QBycVRpdMSM1ujis2a3DIeRQ4xHz4h29rnsL9DK4ecAVgvyX4ajzTsULgfTM29KI-6yUCobx9uBcNS9iYTCtCv335SLc-hzUL9Z/s1600/YouTube+Icon.png" /></a>    <a href="यहां पर अपना लिंक डालो" target="_blank" title="Follow on Twitter"><img border="0" data-original-height="40" data-original-width="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmgfzSclOfh2jcyjFpg_NQKHH03tbb3NtCEmzbkHhM6DqigeRNIaKtUGbIqVL-iK535t8Y-P_Rkop7EnsjyzpN4XV86vlAIuxwR8QL0hvOF7dOTUy68CBFXUhLnnew4vmVgRzf02yM2Oyt/s1600/Twitter+Icon.png" /></a>    <a href="यहां पर अपना लिंक डालो" target="_blank" title="Follow on Pinterest"><img border="0" data-original-height="40" data-original-width="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTzojVTR_m9rIZXBgJ8YqbKf4CdB8gqd-0MqoANHjzM3yQbzg9yAg3s1IpWVrbebvGkwHdacOVqPtw-Kn-7Yo5FmbHEczdNfy0wvHSELcwHo_KkIT0UETkf2Yg9IhwvnZnGSU9NW5HB6uZ/s1600/Pinterest+Icon.png" /></a></div> </div>

दादाभाई, देखो "यहां पर अपना लिंक डालो"। लिखा है, वहाँ अपना असली Facebook Page का Link डालो। जैसे https://facebook.com/apnaId। वैसे ही Instagram और YouTube का भी डालो। Link डालने के बाद Save पर Click कर दो।

दादाभाई, अगर आपको मेरे वाले Social Media Icon पसंद नहीं हैं, तो आप उसे Change कर सकते हैं। आप जिस Photo को लगाना चाहते हैं, उसे पहले Blogger में Upload करें। फिर HTML View में जाकर उस Image का Src Link (Source code) Copy करें और मेरे दिए हुए Source Code में Paste कर दें। बस, आपका Photo Change हो जाएगा।

बस दादाभाई, Save कर दो। अब Blog खोल के देखो, Sidebar में सुंदर Icon आ गए होंगे। बहुत आसान है, है ना? इसमें 3 मिनट भी नहीं लगता।

पर दादाभाई, इसमें एक दिक्कत है। ये थोड़ा Simple दिखता है और Scroll करने पर ऊपर चला जाता है। User को बार-बार नीचे जाना पड़ता है Follow करने के लिए। और आजकल User इतनी मेहनत नहीं करता। इसलिए मैं आपको Method 2 Recommend करूँगा, जो सबसे Best है।

Method 2: Floating Icon - सबसे Best Design जो मैं खुद Use करता हूँ।

दादाभाई, ये Design एकदम Modern और Clean है। इसमें Icon बायीं तरफ Floating रहता है। मतलब User चाहे कितना भी Scroll कर ले, चाहे 11 हजार Words का Post क्यों ना हो, Icon वहीं रहेगा, User की आँखों के सामने। इससे Follow बहुत ज्यादा बढ़ता है। मैंने खुद Test किया है दादाभाई, इसको लगाने के बाद मेरे Followers 5 गुना बढ़ गए।

इसको लगाने के लिए 2 जगह Code लगाना पड़ेगा। डरना मत, मैं एकदम Step By Step बता रहा हूँ।

Step 1: CSS Code लगाना - ये Design को सुंदर बनाएगा

Theme > Edit HTML में जाओ। अब Ctrl + F दबाओ और ]]></b:skin> Search करो। ये आपको CSS वाला Section है। इसके ठीक ऊपर नीचे वाला CSS Code Paste कर दो। ये ही असली Design है।

यहाँ से Code Copy करें

/_ Social Follow Floating CSS _/ .social-dada{position:fixed;top:50%;left:0;transform:translateY(-50%);z-index:9999;} .social-dada a{display:block;width:42px;height:42px;line-height:42px;text-align:center;color:#fff;font-weight:bold;text-decoration:none;margin-bottom:2px;transition:0.3s;} .social-dada a:hover{width:55px;} .social-dada .fb{background:#1877f2;} .social-dada .ig{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);} .social-dada .yt{background:#ff0000;} .social-dada .tl{background:#229ED9;} @media(max-width:768px){.social-dada{top:auto;bottom:0;left:0;right:0;transform:none;display:flex;width:100%;} .social-dada a{flex:1;height:48px;line-height:48px;margin:0;}}

बस दादाभाई, ये Design वाला Part हो गया। अब अगला Step देखो।

Step 2: HTML Code लगाना - ये Icon को दिखाएगा

अब फिर से Ctrl + F दबाओ और </body> Search करो। ये सबसे नीचे मिलेगा, Body Tag खत्म होने से पहले। इसके ठीक ऊपर नीचे वाला HTML Code Paste कर दो। यहाँ अपने असली Links डालना मत भूलना, नहीं तो काम नहीं करेगा।

यहाँ से Code Copy करें

<div class='social-dada'> <a class='fb' href='यहां पर अपना लिंक डालो।' rel='nofollow' target='_blank'>F</a> <a class='ig' href='यहां पर अपना लिंक डालो' rel='nofollow' target='_blank'>I</a> <a class='yt' href='यहां पर अपना लिंक डालो' rel='nofollow' target='_blank'>Y</a> <a class='tl' href='यहां पर अपना लिंक डालो' rel='nofollow' target='_blank'>T</a> </div>

अब Save Theme पर Click कर दो। Save करते ही आपका काम हो जाएगा।

दादाभाई, हो गया। अब अपना Blog खोल के देखो। बायीं तरफ देखो, सुंदर Floating Icons आ गए होंगे। जब Mouse ले जाओगे तो हल्का सा बाहर आएगा, जिससे एकदम Premium Feel आएगा। और Mobile में Check करना दादाभाई, Mobile में ये नीचे आ जाएगा, एकदम App जैसा लगेगा। Click करने में भी बहुत आसान है। User को बहुत पसंद आएगा।

Design कैसे काम करेगा? Detail में समझते हैं

दादाभाई, मैंने इस Design में बहुत ध्यान दिया है। Normal Icon का Size 43px रखा है ताकि ज्यादा जगह ना ले और Content को Disturb ना करे। Hover करते ही 55px हो जाता है, जिससे User को पता चलता है कि ये Clickable है, एक Interactive Feel आता है।

Facebook का Color #1867f2 रखा है, जो Facebook का Original Blue है। YouTube का Red, Instagram का Original Gradient रखा है ताकि User दूर से ही पहचान ले कि कौन सा Icon किसका है। अगर सबका Color Black कर दोगे तो User Confuse हो जाएगा।

और Mobile के लिए अलग Design लिखा है। Mobile में अगर Side में रहेगा तो Content के ऊपर आ जाएगा और User को पढ़ने में Problem होगी। इसलिए मैंने Mobile में उसको Bottom में Fix कर दिया है। आजकल 93% User Mobile से आता है, तो Mobile का सोचना बहुत जरूरी है दादाभाई। ये Responsive Design है, हर Screen पर अच्छा लगेगा।

अगर आपको Color Change करना है तो कर सकते हो। जैसे Facebook का Blue की जगह Black करना है तो #1867f2 की जगह #000000 कर दो। Border Radius बढ़ाना है तो CSS में border-radius:7px Add कर सकते हो।

5 Common गलतियाँ जो आपको नहीं करनी है

1. बहुत ज्यादा Icon लगाना।

दादाभाई, सबसे बड़ी गलती यही है। लोग 10-12 Social Icon लगा देते हैं - Facebook, Instagram, Twitter, LinkedIn, Pinterest सब। इससे Blog Heavy लगता है और User Confuse हो जाता है। सिर्फ 6 Main Icon लगाओ Facebook, Twitter, printerest, Instagram,YouTube, Telegram। ये 6 ही Enough हैं।

2. Link में गलती करना।

 बहुत लोग Facebook Page का Link देने की जगह Profile का Link दे देते हैं। हमेशा Page का Link दो। और Link Paste करने के बाद एक बार खोल के जरूर Check कर लो कि सही खुल रहा है या नहीं।

3. Do बार Code Paste करना।

एक बार Code लगा दिया तो दोबारा मत लगाओ। नहीं तो Double Icon दिखेगा। अगर Double दिख रहा है तो Theme में जाके एक बार Code हटा दो।

4. Nofollow नहीं लगाना।

ये बहुत जरूरी है दादाभाई, SEO के लिए। Social Link में हमेशा `rel="nofollow"` लगाओ। नहीं तो आपका SEO खराब होगा और आपका Link Juice बाहर चला जाएगा। मैंने जो Code दिया है उसमें लगा हुआ है, इसलिए Tension नहीं है।

5. Cache Clear ना करना।

Code लगाने के बाद Blog में Change ना दिखे तो Browser का Cache Clear करो। Ctrl + Shift + R दबाओ। कई बार Purana Cache की वजह से नया Design नहीं दिखता।

Social Icon के बारे में कुछ सवाल जवाब

1. क्या Social Icon लगाने से Blog की Speed कम होगी?

नहीं दादाभाई, बिल्कुल नहीं होगी। जो Code मैंने दिया है वो बहुत हल्का है, 2KB का भी नहीं है। इससे Speed पर कोई असर नहीं पड़ेगा। ये WordPress Plugin जैसा Heavy नहीं है।

2. क्या ये Icon सभी Blogger Theme में काम करेगा?

हाँ दादाभाई, ये Code लगभग सभी Theme में काम करता है। चाहे आपकी Theme Contempo हो, Soho हो, Notable हो या कोई Custom Theme हो। बस Code सही जगह Paste करना है।

3. Follow Icon और Share Icon में क्या फर्क है?

दादाभाई, ये बहुत लोग Confuse होते हैं। Follow Icon का मतलब है User आपको Follow करेगा। जैसे Follow on Instagram। Share Icon का मतलब है User आपका Post दूसरों के साथ Share करेगा। Follow Icon Blog के हर Page पर रहता है, Share Icon सिर्फ Post के अंदर रहता है।

4. क्या इससे Follower सच में बढ़ेंगे?

100% बढ़ेंगे दादाभाई। मेरे खुद के Blog में पहले दिन के 2-3 Follow आते थे, अब 15-20 आते हैं। क्योंकि Icon हमेशा सामने रहता है। User को ढूंढना नहीं पड़ता।

5. क्या हम Icon की जगह अपना Photo लगा सकते हैं?

लगा सकते हो दादाभाई, पर मैं Recommend नहीं करूँगा। क्योंकि User Icon देख के ही समझ जाता है कि ये Facebook है। Photo से वो Confuse होगा। इसलिए Icon ही Best है।

आखिरी बात

दादाभाई, आपने क्या सीखा? देखो Blogging में सिर्फ Post लिखना ही काफी नहीं है। आजकल Competition बहुत ज्यादा है। सिर्फ Post लिखने से कुछ नहीं होगा। अपना Brand बनाना पड़ता है। और Brand Social Media से ही बनता है।

जब आपका Blog एकदम बढ़िया और साफ Look दिखेगा, तभी लोग आप पर Trust करेंगे। और Trust ही सब कुछ है दादाभाई आज के Time में। अगर User को आपका Blog ही अधूरा लगेगा तो वो आपके Product क्यों खरीदेगा?

इसलिए दादाभाई, आप बिना डरे ये Icons लगा लो। बस एक काम करना, Backup लेना मत भूलना। मैं हर बार यही बोलता हूँ क्योंकि Backup बहुत जरूरी है।

और हाँ, Code लगाने के बाद एक बार अपने Mobile में भी Check कर लेना। क्योंकि आजकल 93% लोग Mobile से ही Blog Read करते हैं। ये Design Mobile में भी एकदम Perfect और Responsive दिखेगा।

तो बस दादाभाई, आज के लिए इतना ही। उम्मीद है आपको ये Post पूरी तरह से समझ आ गई होगी। अगर फिर भी कोई Issue आए, कोई Code Work ना करे, तो नीचे Comment कर देना। मैं खुद आपकी Help करूँगा। आप बस Hard Work करते रहो, एक दिन आपका Blog भी बड़ा Brand बनेगा।

फिर मिलेंगे किसी और नए Post के साथ, तब तक के लिए धन्यवाद।🙏