Blogspot Blog Me Social Media Share Button Kaise Lagaye ?

ब्लॉग का ट्रैफिक बढ़ाने का सबसे बढ़िया रास्ता है की ब्लॉग पोस्ट को सोशल मीडिया पर शेयर करते रहना चाहिए.क्योकि सोशल मीडिया से हमे काफी ट्रैफिक मिल सकता है.लेकिन सोशल मीडिया पर ब्लॉग पोस्ट शेयर करने के लिए हमे Blog में Social Media Share Button Add करने चाहिए.

क्योकि इन बटन पर क्लिक करके हम खुद व हमारे ब्लॉग पर आने वाले Visitors हर किसी Blog Post को Social Media पर Share कर सकते है.इन शेयर बटन में Facebook,Whatsapp,Twitter आदि पोपुलर सोशल मीडिया पर पोस्ट शेयर करने की सुविधा होती है.इस कारण हमे इसे ब्लॉग में ज़रूर ऐड करना चाहिए.

यदि हम Wordpress की बात करे तो उसमे हम Plugins का इस्तेमाल करके आसानी से Share Button Add कर सकते है लेकिन यदि हमारा ब्लॉग Blogspot पर क्रिएट किया गया है तो हमे खुद Manually Share buttons code को theme coding में add करना होता है.

blogspot-blog-me-social-media-share-button-add-kaise-kare-lagaye

नीचे हमने पोस्ट में आपको Simple Steps में सभी जानकारी दी है जिसका इस्तेमाल करके आप भी अपने ब्लॉगर ब्लॉग में यह शेयर बटन ऐड कर सकते है.इन शेयर बटन की यह खासियत है की इसमें मैंने किसी भी प्रकार की कोई Script का इस्तेमाल नहीं किया है.


जिसकी वजह से यह Fast Loading है.यानि की इन शेयर बटन को ब्लॉग में लगाने से आपके ब्लॉग की लोडिंग स्पीड पर कोई भी इफ़ेक्ट नहीं होगा.मैंने Script का इस्तेमाल इस कारण नहीं किया है क्योकि Third Party Share Buttons Script का इस्तेमाल करने से ब्लॉग की लोडिंग स्पीड कम हो जाती है.जिससे ब्लॉग धीरे लोड होता है.

इस शेयर बटन्स को मैं खुद अपने ब्लॉग पर इस्तेमाल करता हूँ,आप देख सकते है की यह किस प्रकार से काम करते है.तो अब देर किस बात की आप भी इस सोशल मीडिया शेयर बटन को अपने ब्लॉग में ऐड कर ले जिससे आपके ब्लॉग की हर एक पोस्ट के नीचे यह शेयर बटन ऐड हो जायेंगे.

Blogger Blog Me Custom Social Media Share Button Add Kaise Kare ?


ब्लॉग में शेयर बटन लगाने के लिए आपको इन सिंपल Steps को follow करना है तो आइये शुरुवात करते है :-

Step - 1 - सबसे पहले आपको Blogger Blog में लॉग इन करके Theme वाले आप्शन पर क्लिक करना है.Theme पर क्लिक करने के बाद आपको Edit HTML पर क्लिक करना है.

Step - 2 - अब आपके सामने ब्लॉग की थीम कोडिंग ओपन हो जाएगी.अब आपको थीम कोडिंग में कही भी क्लिक करना है और Ctrl + F बटन प्रेस करना है जिससे थीम कोडिंग के Right Side में एक सर्च बार ओपन हो जायेगा.

search-bar-in-theme-coding

Step - 3 - अब आपको नीचे दिया गया Code Line कॉपी करना है और इसे सर्च बार में paste करके Enter बटन को प्रेस करना है.button दबाते ही यह Code थीम कोडिंग में हाईलाइट हो जायेगा.
<div class='post-footer-line post-footer-line-1'>
यदि आपको थीम कोडिंग में यह Code Line  नहीं मिल रही है तो आपको इसके स्थान पर यह Code Line सर्च बार में कॉपी करके Enter दबाना है,बटन प्रेस करके ही Code Line हाईलाइट हो जायेगा.
<div class='post-footer'>
यह कोड लाइन थीम कोडिंग में एक से अधिक बार होगी आपको दुसरे वाली कोड लाइन पर जाना है.

search-code-line-in-theme-coding-of-blogger-blog

Step -  4 - अब आपको नीचे कोड बॉक्स से Custom Social Media Share Button Coding को कॉपी करना है और इसे उस Code Line से ऊपर पेस्ट करना है जो हमने  Step 3 में सर्च की थी.

Custom Social Media Share Button Coding For Blogger Blog :-

     
<b:if cond='data:blog.pageType == &quot;item&quot;'><div><style>.mobileshare { text-align: center; } .mobileshare a { background: #3a579a; color: white; display: inline-block; font-size: 20px; width: 35px; height: 35px; line-height: 35px; margin: 0 2px 6px;border-radius: 50%;margin-left: 15px; } .mobileshare a:hover{ background: #314a83; } .mobileshare1 { text-align: center; } .mobileshare1 a { background: #df4a32; color: white; display: inline-block; font-size: 20px; width: 35px; height: 35px; line-height: 35px; margin: 0 2px 6px;border-radius: 50%; } .mobileshare1 a:hover{ background: #be3f2b; }.mobileshare2 { text-align: center; } .mobileshare2 a { background: #00abf0; color: white; display: inline-block; font-size: 20px; width: 35px; height: 35px; line-height: 35px; margin: 0 2px 6px;border-radius: 50%; } .mobileshare2 a:hover{ background: #0092cc; }.mobileshare3 { text-align: center; } .mobileshare3 a { background: #cd1c1f; color: white; display: inline-block; font-size: 20px; width: 35px; height: 35px; line-height: 35px; margin: 0 2px 6px;border-radius: 50%; } .mobileshare3 a:hover{ background: #ae181a; }.mobileshare5 { text-align: center; } .mobileshare5 a { background: #34af23; color: white; display: inline-block; font-size: 20px; width: 35px; height: 35px; line-height: 35px; margin: 0 2px 6px;border-radius: 50%; } .mobileshare5 a:hover{ background: #076D2B; }.mobileshare6 { text-align: center; } .mobileshare6 a { background: #53B2E8; color: white; display: inline-block; font-size: 20px; width: 35px; height: 35px; line-height: 35px; margin: 0 2px 6px;border-radius: 50%; } .mobileshare6 a:hover{ background: #07486D; }.mobileshare7 { text-align: center; } .mobileshare7 a { background: #4E574B; color: white; display: inline-block; font-size: 20px; width: 35px; height: 35px; line-height: 35px; margin: 0 2px 6px;border-radius: 50%; } .mobileshare7 a:hover{ background: #000000; }</style><h3>Share This Post :-</h3><style>font-size:20px;text-align:center;</style><mobileshare class='mobileshare'>   <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Facebook Share'> <i class='fa fa-facebook'/></a></mobileshare>
<mobileshare2 class='mobileshare2'> <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @AmojeetBlog - &quot;' rel='nofollow' target='_blank' title='Tweet This'><i class='fa fa-twitter'/></a></mobileshare2><mobileshare3 class='mobileshare3'> <a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' target='_blank' title='Pin It'> <i class='fa fa-pinterest'/></a></mobileshare3><mobileshare5 class='mobileshare5'> <a class='whatsapp' expr:href='&quot;whatsapp://send?text=&quot;+ data:post.title + &quot; &quot; + data:post.url' href='whatsapp://send?text=http://webdevelopmentscripts.com' onclick='window.parent.null' rel='nofollow' target='_top' title='Share to whatsapp'><i class='fa fa-whatsapp'/></a></mobileshare5><mobileshare6 class='mobileshare6'><a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/></a></mobileshare6><mobileshare7 class='mobileshare7'><a expr:href='&quot;mailto:?subject=&quot; + data:post.title + &quot;&amp;body=&quot; + data:post.url'><i class='fa fa-envelope'/></a></mobileshare7><br/></div>
</b:if> 


कोड को पेस्ट करने के बाद आपको Save Theme पर क्लिक करके Theme Coding को सेव कर देना है.अब आप ब्लॉग को Open करके देख सकते है की उसमे हर एक ब्लॉग पोस्ट के नीचे Stylish Custom Social Media Share Button Add हो चुका है.

paste-custom-social-media-share-button-coding-in-blogger-blog-theme-coding

तो अब आप अपने Blogspot Blog की पोस्ट को Open करके देख सकते है की Post Footer में एक Stylish Social Media Share Button Bar Add हो चुका है.अब आपके ब्लॉग पर आने वाले Visitors इन बटन पर क्लिक करके आसानी से आपकी ब्लॉग पोस्ट को सोशल मीडिया पर शेयर कर सकते है.
यदि आपको इस पोस्ट में बताया गया कोई भी Process Follow करके में कोई भी परेशानी आ रही है तो आप नीचे कमेंट बॉक्स में कमेंट करे.जिससे आपकी मदद की जा सके.हम उम्मीद करते है की आपको यह Blogspot Me Social Media Share Button Kaise Lagaye ? 😊✌ पोस्ट अच्छी लगी होगी.इस पोस्ट को आप भी सोशल मीडिया पर Share करके हमे Support करे.Thanks For Reading This Post .
--
-*-

जानकारी अच्छी लगी है तो Facebook Page Like जरूर करे

Share This Post :-


15 comments:

  1. Thanks For sharing this article with us. Keep it up this kind of work in Future
    add social media icons on Blogger

    ReplyDelete
  2. bhai code kam nhi kar rha mere blog me please help me

    ReplyDelete
    Replies
    1. आपसे सोशल मीडिया पर बात हो चुकी है.शायद आपकी समस्या का हल हो चुका होगा.

      Delete
    2. हा भाई हो गयी धन्यवाद आपको

      Delete
  3. Bhai ye code kam nhi kr raha sab sahi se kar raha hu oar template upload krte smay error aa jata hai help kro

    Aur aapke blog me kaunsi template hai

    ReplyDelete
    Replies
    1. सही से स्टेप को फालो करे यह कोड काम कर रहा है. हमारे ब्लॉग में Simple Theme ही है जो ब्लॉगर में पहले से ही मिलता है. बस मैंने इसे डिजाइन कर लिया है.

      Delete
    2. Code Update कर दिया है। अब यह काम कर रहा है।

      Delete
  4. Error aa raha cod sab sahi se kiya upload time me error ho rha

    ReplyDelete
    Replies
    1. तो शायद आपके ब्लॉग के थीम में यह कोड काम नहीं कर रहा है,.आप किसी और दूसरे ब्लॉग में सोशल मीडिया बटन एड करने की पोस्ट पढ़े.

      Delete
    2. Code Update कर दिया है। अब यह काम कर रहा है।

      Delete
  5. बहुत अच्छा सर ज़ी

    ReplyDelete

आपको पोस्ट कैसी लगी कमेंट बॉक्स में ज़रूर लिखे,यदि आपका कोई सवाल है तो कमेंट करे व उत्तर पाये ।