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 करना होता है.

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

• Blogspot Blog Me Font Size को Change कैसे करे CSS से
• Blogger Blog में Adsense Ads कैसे लगाये Full Guide
• Blogger Blog Post की Thumbnail Image का Size कितना रखना चाहिए ? [ Perfect Size And Pixel Size ]

जिसकी वजह से यह 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 में एक सर्च बार ओपन हो जायेगा.

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'>

यह कोड लाइन थीम कोडिंग में एक से अधिक बार होगी आपको दुसरे वाली कोड लाइन पर जाना है.

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 हो चुका है.

तो अब आप अपने Blogspot Blog की पोस्ट को Open करके देख सकते है की Post Footer में एक Stylish Social Media Share Button Bar Add हो चुका है.अब आपके ब्लॉग पर आने वाले Visitors इन बटन पर क्लिक करके आसानी से आपकी ब्लॉग पोस्ट को सोशल मीडिया पर शेयर कर सकते है.

• Blogger Blog में बिल्कुल सही तरीके से SEO फ्रेंडली ब्लॉग पोस्ट कैसे लिखे ?
• Blogspot Blog Me Scrolling Back To Top Button Kaise lagaye ?
• Stylish Email Subscription Widget For Blogger

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

-*-

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