Blog Ki Left Side Me Floating Social Share Buttons Kaise Add Kare

Hello Friends, Social media blog की traffic increase करने का सबसे अच्छा way है साथ ही social media से हमे blog की post search engine में दिखाने में भी help मिलती है हर blogger चाहता है की उसकी post को लोग ज्यादा से ज्यादा share करें। आज में आपको इस tutorial में Facebook, twitter, google plus के floating button blogger left side में add करना बता रहा हूँ जिससे आपके blog के visitors blog post को direct social network पर share कर सकते है इससे पहले मै blog की हर post के निचे/ऊपर social share button लगाने का तरीका बता चूका हूँ।

floating social share button

Floating Social Share Button Blog में कैसे Use करते है?

Step 1:

1. first इस code को copy करें।
<style type="text/css">
#social-buttons {
position:fixed;
bottom:10%;
margin-left:-740px;
float:left;
border-radius:1px;
padding:0 0 2px 0; }
#social-buttons .button-share{
float:left;
clear:both;
margin:2px 2px 0 2px; }
</style>
<div id='social-buttons' title='Get This Widget'>
<div class='button-share' style='margin-left:3px; id='pinit'>
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
<a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.manidin.com%2F&media=http%3A%2F%2Fwww.manidin.com%2F&description=Next%20stop%3A%20Pinterest" data-pin-do="buttonPin" data-pin-config="above"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>
<div/>
<div class='button-share' style='margin-left:3px;' id='gplusone'>
<div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60">
</div>
<script type="text/javascript">
 (function() {
 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
 po.src = 'https://apis.google.com/js/platform.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();
</script></div>
<br/>
<div class='button-share' id='like' style='margin-left:3px;'>
<div id="fb-root">
</div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false">
</div>
</div>
<br />
<div class='sbutton' style="margin-left: 3px;" >
<a class='twitter-share-button' data-count='vertical' data-via='Manidin' expr:data-counturl='data:blog.url' href='https://twitter.com/share' rel='nofollow'>Tweet</a><script src='https://platform.twitter.com/widgets.js'; type='text/javascript'></script>
</div>
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-counter="top"></script>
<br />
<div class='button-share' style='margin-left:3px;' id='su'>
<script src="https://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<br/>
<div class='button-share' id='digg' style='margin-left:3px; width:45px'>
<script src='https://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<br/>
</div>
</div>
</div>
2. Bottom:10%;  Margin-left:-740px; code की मदद से आप social share button की जगह set कर सकते है।

Code को Blog में कहा Add करें?

Step 2

  1. Blog के dashboard >> layout पर click करें।
  2. अब कहीं भी Add a Widget पर click करें।
  3. HTML/Javascript gadget select करें और code paste करें।
  4. Save पर click Save arrangement पर click करें।

Friends अब आपके blog पर floating social share Button add हो चूका है अगर आपको इस post में बताये Step समझ नहीं आये है है तो आप अपनी problem comment में बता सकते हैं।

साथ ही अगर आपको ये post अच्छी लगी है तो इस post को social media आर अपने सभी friends के साथ share जरुर करना।

Avatar for Jumedeen Khan

मैं इस ब्लॉग का संस्थापक और एक पेशेवर ब्लॉगर हूं। यहाँ पर मैं नियमित रूप से अपने पाठकों के लिए उपयोगी और मददगार जानकारी शेयर करता हूं। ❤️

Comments ( 33 )

  1. Bhai please meri help karo mai blogger.com par id to bana liya hu par blog kaise likhu batao plzzz bhai Agar apki koi email id yah koi contact NbR jisse mai help le saku plzzzz bhai mujhe jarurat hai.plzzz bhai check karo kyaa maine sahi banaya blog id ????

    Reply
  2. Sir ji mujhe ap se ek sawal puchna hai..
    Jab mai apke post titer ke niche apka name JUME DEEN KHAN par click krta hu to apni home page open ho jati hai
    Jab ki mai apne blog me aisa krta hu to mera Google+ ka ya fir blogger ka profile open ho jata hai..
    Sir ji mai ap se bas itna puchna chahta hu ki apne aisa kaise kiya
    Aur mujhe bhi aisa karne ke liye apne blog me kya karna hoga ...
    Mai chahta hu ki jab koi mere blog me aaye aur mere name par click kare to wo apke blog ke jaisa mere blog ki home page par chala jaye
    Please help kare

    Reply
    • Dear mera blog wordpress par hai aur aapka blogger par aesa karne ke liye aapko blog wordpress par transfer karna hoga.

      Reply
  3. maine apni site par google ad lagaya hai par kuch page par dhikh raha hai kuch par nahi aisa kyo hai plz check

    Reply
  4. hi bro
    maine apna domain name change kiya hai fir 301 redirect kardiya hai aur fir google search console me change site address par jakar new domain submit kar diya hai , kya ab mujhe new domain ki sitemap submit karna hogi ya nahi ? vaise mera google ka traffic maire new domain par aa raha hai

    Reply
    • Yes aap old domain ka sitemap delete kar naya wala submit karo.

      Reply
  5. Hello sir maine ye code paste kiya par ye work hi nhi kar rha hai plss help me....

    Reply
    • not support all themes.

      Reply
  6. Sir share button aur floating share button me kya fark he

    Reply
    • Dono smae work arte hai but floating left ya right side me show hote hai or share button post top ya bottom me. Yani location ka fark hai.

      Reply
  7. बहत अच्छा मेने भी अपनी साईट में social bution ऐड कर लिया आपकी बताये तरीके के अनुसार

    Reply
  8. sir aapne floting social media ke liye css code diya hai wo kis jagah add karna hai
    Layout,edit html,customise sir aapke diye code ko maine layout and edit htmal me
    ]]> ke uper past karke dekh liya lekin code work nahi kar raha hai
    sir plz.mobile me floting icon kaise hide hoge.

    Reply
    • Vijendra ye code sabhi template me work nahi karta. Maine aapko helplogger.blogspot.com blog ke bare me btaya tha. Is blog par aapko social share button ke bare me kei post mil jayegi.

      Reply
  9. hello sir
    blog me mene left side me floating social media icon lagaye hai lekin wo desktop me
    sahi work kar rahe hai jab mai mobile me post open karta hu to icon post ke
    uper show ho rahe hai sir mobile me icon show hona kaise band hoge plz.sir bataye.

    Reply
    • Blog ki CSS coding me ye cod add karo.

      @media only screen and (max-width:500px){
      #social-buttons{display: none;}
      }

      Reply

Leave a Comment

×