ब्लॉगर Blog मे Social media Share बटन कैसे add करे  

ब्लॉगर Blog मे Social media Share बटन कैसे add करे

Hello friends aaj ke iss post मे बताने जा रहे है Social media me Share Button kaise Lagaye ye Aaj ke topices hai
Social media share button logo

Social Share Button kaise Add kare

Blog website ko पॉपुलर करने के लिए Social Site बहुत बडा़ plateform hai इसलिए हम जब मे Blog ya Website बनाते है तो Best template चुनते है लेकिन template best hote हुए भी best नही लगता जब उसमे Social share button  नही रहता है और हम social media share button Kaise add kare ye post ko हि Google me search करते है तब जाकर Social media share button add कर पा ते है ,WordPress पर जिनका ब्लॉग होता है वो plugin use करके मनपसन्द Social share button add कर लेते है लेकिन blogger पर जिनका ब्लॉग होता है उन्हे ,HTML code की जरुरत होती है
Blog website me Social share button रहने से koi visitor aapke blog website पर आया और आपको ब्लॉग की कोइ पोस्ट उसे ज्यादा पसन्द आ गयी तो वह उस post ko apne friends के saath भी share karna चाहेगा And aap blogger hai तो ये जरुर जानते होंगें की Blog ki design भी अच्छा ही करना चाहेंगें isliye Blog website me Social media share button widget add करना जरूरी है
Note ; मै यहॉ पर Screenshot nhi de पाउँगा इसके लिए Sorry क्युँकी यहॉ पर मै 10 code ke बारे मे बताने जा रहा हुँ जिसमे 2 code ko add करने के लिए tempalte edit करना होगा और 8 कोड HTML/JavaScript होगी
बताए गए स्टेप को सही से फॉलो करे
Or apne Blog pr social media share button add kare

Trick 1👈

Step.1  नीचे दिए गए CSS code ko Copy करे
Code 1 CSS

<style type=”text/css”> #share-buttons img {width: 35px;padding: 5px;border: 0;box-shadow: 0;display: inline;} </style>

अब Blogger ke dashboard me जाएँ
Template pr click करे
Step.2 Edit HTML PR click kare
अब Template open हो जाने के बाद
Template me Ctrl+f दबाकर <Head> search और CSS code ko <Head> ke नीचे पेस्ट कर दे Template ko save कर दे
अब निचे दिए गए कोड को Copy कर ले
Code 2 HTML/JavaScript
Code 2 ka screenshot social media share button

<!– I got these buttons from simplesharebuttons.com –><div id=”share-buttons”> <!– Buffer –> <a href=”https://bufferapp.com/add?url=https://simplesharebuttons.com&amp;text=Simple Share Buttons” target=”_blank”> <img src=”https://simplesharebuttons.com/images/somacro/buffer.png” alt=”Buffer” /> </a> <!– Digg –> <a href=”http://www.digg.com/submit?url=https://simplesharebuttons.com” target=”_blank”> <img src=”https://simplesharebuttons.com/images/somacro/diggit.png” alt=”Digg” /> </a> <!– Email –> <a href=”mailto:?Subject=Simple Share Buttons&amp;Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://simplesharebuttons.com”> <img src=”https://simplesharebuttons.com/images/somacro/email.png” alt=”Email” /> </a> <!– Facebook –> <a href=”http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com” target=”_blank”> <img src=”https://simplesharebuttons.com/images/somacro/facebook.png” alt=”Facebook” /> </a> <!– Google+ –> <a href=”https://plus.google.com/share?url=https://simplesharebuttons.com” target=”_blank”> <img src=”https://simplesharebuttons.com/images/somacro/google.png” alt=”Google” /> </a> <!– LinkedIn –> <a href=”http://www.linkedin.com/shareArticle?mini=true&amp;url=https://simplesharebuttons.com” target=”_blank”> <img src=”https://simplesharebuttons.com/images/somacro/linkedin.png” alt=”LinkedIn” /> </a> <!– Pinterest –> <a href=”javascript:void((function()%7Bvar%20e=document.createElement(‘script’);e.setAttribute(‘type’,’text/javascript’);e.setAttribute(‘charset’,’UTF-8′);e.setAttribute(‘src’,’http://assets.pinterest.com/js/pinmarklet.js?r=’+Math.random()*99999999);document.body.appendChild(e)%7D)());”> <img src=”https://simplesharebuttons.com/images/somacro/pinterest.png” alt=”Pinterest” /> </a> <!– Print –> <a href=”javascript:;” onclick=”window.print()”> <img src=”https://simplesharebuttons.com/images/somacro/print.png” alt=”Print” /> </a> <!– Reddit –> <a href=”http://reddit.com/submit?url=https://simplesharebuttons.com&amp;title=Simple Share Buttons” target=”_blank”> <img src=”https://simplesharebuttons.com/images/somacro/reddit.png” alt=”Reddit” /> </a> <!– StumbleUpon–> <a href=”http://www.stumbleupon.com/submit?url=https://simplesharebuttons.com&amp;title=Simple Share Buttons” target=”_blank”> <img src=”https://simplesharebuttons.com/images/somacro/stumbleupon.png” alt=”StumbleUpon” /> </a> <!– Tumblr–> <a href=”http://www.tumblr.com/share/link?url=https://simplesharebuttons.com&amp;title=Simple Share Buttons” target=”_blank”> <img src=”https://simplesharebuttons.com/images/somacro/tumblr.png” alt=”Tumblr” /> </a> <!– Twitter –> <a href=”https://twitter.com/share?url=https://simplesharebuttons.com&amp;text=Simple%20Share%20Buttons&amp;hashtags=simplesharebuttons” target=”_blank”> <img src=”https://simplesharebuttons.com/images/somacro/twitter.png” alt=”Twitter” /> </a> <!– VK –> <a href=”http://vkontakte.ru/share.php?url=https://simplesharebuttons.com” target=”_blank”> <img src=”https://simplesharebuttons.com/images/somacro/vk.png” alt=”VK” /> </a> <!– Yummly –> <a href=”http://www.yummly.com/urb/verify?url=https://simplesharebuttons.com&amp;title=Simple Share Buttons” target=”_blank”> <img src=”https://simplesharebuttons.com/images/somacro/yummly.png” alt=”Yummly” /> </a> </div>

▶◀◀◀◀◀◀◀▶▶▶▶▶▶
फिर से blogger के Dashboard मे जाए
Layout पर क्लिक करे Sidebar me add A GADGET पर क्लिक करे  New windo open होगी open होने के बाद HTML/JavaScript select करे
Number 2 ka Jo code copy tha उसे बड़े वाले बॉक्स मे pest कर दे और सेव कर दे

आपके ब्लॉग मे Social media share button add हो चुका है

Trick 2 👈

नीचे दिए गए कोड को कॉपी कर ले..
उसके बाद…

<div class=’addthis_toolbox addthis_default_style ‘>

<a class=’addthis_button_tweet’/>

<a class=’addthis_button_google_plusone’ g:plusone:size=’inline’/>

<a class=’addthis_button_facebook_like’ fb:like:layout=’button_count’/><a class=’addthis_button_facebook_send’/<a class=’addthis_button_stumbleupon_badge’/>

Blogger के dashboard मे जाएं
Template pr क्लिक करे
Edit html पर क्लिक करे
template मे Ctrl+f दबाकर <data:post.body> Search करे
उसके बाद उपर जो कोड copy kiya tha इस कोड को<data:post.body> के नीचे पेस्ट कर के template ko save कर दे

👉 Trick 3 👈

नीचे दिए गए html/JavaScript code को copy कर ले

<!– Lukkr Share Buttons –><script async src=”//Lukkr.com/website/sharebar.js”></script><a href=”https://Lukkr.com/share-buttons-script/” title=”Share Buttons” class=”luknf”>Lukkr – Top Search Engines and Share Buttons</a><!– End Lukkr Share Buttons –>

Trick 4

<!– BEGIN AddToAny for Blogger –>
<script type=”text/template” class=”blogger_addtoany_html”>
<div class=”a2a_kit a2a_kit_size_32 a2a_default_style”>
    <a class=”a2a_button_facebook”></a>

   <a class=”a2a_button_twitter”></a>

    <a class=”a2a_button_google_plus”></a>
    <a class=”a2a_button_pinterest”></a>
    <a class=”a2a_dd” href=”https://www.addtoany.com/share”></a>
</div>
</script>
<script async src=”https://static.addtoany.com/js/blogger.js”></script>
<!– END AddToAny for Blogger –>

Code 5

Social media floating Share button code.5

<style>.btrix-social-slidebox {    font: 16px normal ‘Denk One’, sans-serif;    display: inline-block;    position: relative;    width: 95%;    max-width: 200px;     padding: 12px;}.btrix-social-slide {    width: 95%;    max-width: 280px;    padding-top: 8px;    padding-left: 8px;    padding-right: 8px;}.btrix-social-slide a {    text-decoration: none !important;    }.btrix-social-slide ul {margin-top:-5px;    margin: 0;    padding: 0;    list-style: none;}.btrix-social-slide ul li {margin-bottom:15px;    display: inline;    margin: 0;    padding: 0;    text-indent: 0; margin-left:10px;}.btrix-social-slide ul li a.facebook {    border-left: 65px solid rgba(59, 89,152, 1);    color: rgba(59, 89, 152, 1);    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide ul li a.facebook p {    margin: 2px 20px 0 -60px;    display: inline-block;    color: #fff;    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide ul li a.facebook:hover {    background: rgba(59, 89, 152, 1);    border-left: 0px solid rgba(59, 89, 152, 0.1);    color: #fff;    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide ul li a.facebook:hover p {    opacity: 0;    -webkit-transition: all 1ms ease-in-out;    -moz-transition: all 1ms ease-in-out;    -ms-transition: all 1ms ease-in-out;    -o-transition: all 1ms ease-in-out;    transition: all 1ms ease-in-out;}.btrix-social-slide ul li a.twitter {    border-left: 65px solid rgba(64, 153, 255, 1);    color: rgba(64, 153, 255, 1);    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide ul li a.twitter p {    margin: 2px 20px 0 -60px;    display: inline-block;    color: #fff;    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide ul li a.twitter:hover{    background: rgba(64, 153, 255, 1);    border-left: 0px solid rgba(64, 153,255, 1);    color: #fff;    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide ul li a.twitter:hoverp {    opacity: 0;    -webkit-transition: all 1ms ease-in-out;    -moz-transition: all 1ms ease-in-out;    -ms-transition: all 1ms ease-in-out;    -o-transition: all 1ms ease-in-out;    transition: all 1ms ease-in-out;}.btrix-social-slide ul li a.gplus {    border-left: 65px solid rgba(219, 74, 57, 1);    color: rgba(219, 74, 57, 1);    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide ul li a.gplus p {    margin: 2px 20px 0 -50px;    display: inline-block;    color: #fff;    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide ul li a.gplus:hover {    background: rgba(219, 74, 57, 1);    border-left: 0px solid rgba(219, 74,57, 1);    color: #fff;    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide ul li a.gplus:hover p {    opacity: 0;    -webkit-transition: all 1ms ease-in-out;    -moz-transition: all 1ms ease-in-out;    -ms-transition: all 1ms ease-in-out;    -o-transition: all 1ms ease-in-out;    transition: all 1ms ease-in-out;}.btrix-social-slide ul li a.pinterest {    border-left: 65px solid rgba(174, 45, 39, 1);    color: rgba(174, 45, 39, 1);    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide ul li a.pinterest p {    margin: 2px 20px 0 -50px;    display: inline-block;    color: #fff;    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide ul li a.pinterest:hover {    background: rgba(174, 45, 39, 1);    border-left: 0px solid rgba(174, 45,39, 1);    color: #fff;    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide ul li a.pinterest:hover p {    opacity: 0;    -webkit-transition: all 1ms ease-in-out;    -moz-transition: all 1ms ease-in-out;    -ms-transition: all 1ms ease-in-out;    -o-transition: all 1ms ease-in-out;    transition: all 1ms ease-in-out;}.btrix-social-slide ul li a.rss {    border-left: 65px solid rgba(255, 102, 0, 1);    color: rgba(255, 102, 0, 1);    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide ul li a.rss p {    margin: 2px 20px 0 -60px;    display: inline-block;    color: #fff;    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide ul li a.rss:hover {    background: rgba(255, 102, 0, 1);    border-left: 0px solid rgba(255, 102, 0, 1);    color: #fff;    -webkit-transition: all 1000ms ease-in-out;    -moz-transition: all 1000ms ease-in-out;    -ms-transition: all 1000ms ease-in-out;    -o-transition: all 1000ms ease-in-out;    transition: all 1000ms ease-in-out;}.btrix-social-slide ul li a.rss:hover p {    opacity: 0;    -webkit-transition: all 1ms ease-in-out;    -moz-transition: all 1ms ease-in-out;    -ms-transition: all 1ms ease-in-out;    -o-transition: all 1ms ease-in-out;    transition: all 1ms ease-in-out;}</style><div class=”btrix-social-slide”>    <ul>        <li><a class=”btrix-social-slidebox facebook” href=”https://www.facebook.com/funwtf”><p>12K+</p>Facebook </a></li>        <li><a class=”btrix-social-slidebox twitter” href=”https://twitter.com/vishalassassin”><p>5K+</p>Twitter</a></li>        <li><a class=”btrix-social-slidebox gplus” href=”https://plus.google.com/vishalshuklassassin”><p>4K+&nbsp;</p>Google+</a></li>        <li><a class=”btrix-social-slidebox pinterest” href=”http://pinterest/Hindivhelp”><p>2K+&nbsp;</p>Pinterest</a></li>        <li><a class=”btrix-social-slidebox rss” href=”http://feeds.feedburner.com/Hindivhelp”><p>11K+</p>RSS</a></li>    </ul></div>

Code 6
Social share button html/javascript code 6

<a href=”http://www.facebook.com/HindivHelp”><img src=”http://2.bp.blogspot.com/-PWAevtqvAx4/UU7VBYo8xRI/AAAAAAAAFiE/W00_dKHxe0M/s1600/098540-blue-retro-rusted-grunge-icon-social-media-logos-facebook-logo-square.jpg” title=”Like Us” /></a><a href=”http://www.Twitter.com/HindivHelp”><img src=”http://3.bp.blogspot.com/-SKGGh00dRvQ/UU7VBpJIUzI/AAAAAAAAFiM/jm4_ZXlf0Nc/s1600/098610-blue-retro-rusted-grunge-icon-social-media-logos-twitter-bird3-square.jpg” title=”Tweet Us” /></a> <a href=”http://feeds.feedburner.com/Hindivhelp”><img src=”http://3.bp.blogspot.com/-t8MdJ5tuX-w/UU7VHVi6u-I/AAAAAAAAFic/J190zsvQ8ns/s1600/098591-blue-retro-rusted-grunge-icon-social-media-logos-rss-cube.jpg” title=”Feed Us” /></a><a href=”https://plus.google.com/u/0/108432524418882740014″><img src=”http://3.bp.blogspot.com/-508JfV8idkE/UU7VDCqa4XI/AAAAAAAAFiU/HplTjw59HnU/s1600/098555-blue-retro-rusted-grunge-icon-social-media-logos-google-logo-square.jpg” title=”Circle Us” /></a><a href=”http://www.stumbleupon.com/stumbler/HindivHelp”><img src=”http://2.bp.blogspot.com/-YhtZ7N_regk/UU7w5R6fsvI/AAAAAAAAFiw/GIxLfZF6lC8/s1600/098600-blue-retro-rusted-grunge-icon-social-media-logos-stumbleupon-logo-square.jpg” title=”Stumble” /></a><a href=”http://digg.com/”><img src=”http://4.bp.blogspot.com/-RRu49AVBgnY/UU7w5XfqwsI/AAAAAAAAFis/lCeS8bw4uKc/s1600/098531-blue-retro-rusted-grunge-icon-social-media-logos-digg2-logo-square.jpg” title=”Share us on Digg” /></a><a href=”https://delicious.com/HindivHelp”><img src=”http://4.bp.blogspot.com/-p3LyGp4oopQ/UU7w5zYbYuI/AAAAAAAAFi8/0jAizIULejE/s1600/098522-blue-retro-rusted-grunge-icon-social-media-logos-delicious-logo-square.jpg” title=”Share us on Delicious” /></a>

Code 7

Share button code 7

<!– AddThis Button BEGIN –><div class=’addthis_toolbox addthis_default_style ‘><a class=’addthis_button_preferred_1’/><a class=’addthis_button_preferred_2’/><a class=’addthis_button_preferred_3’/><a class=’addthis_button_preferred_4’/><a class=’addthis_button_compact’/><a class=’addthis_counter addthis_bubble_style’/></a></a></a></a></a></a></div><script type=’text/javascript’>var addthis_config = {&quot;data_track_clickback&quot;:true};</script>


Code 8



Sharebutton code 8





<!– Scrolling social Button BEGIN –><div class=”addthis_toolbox addthis_floating_style addthis_counter_style” style=”left:50px;top:50px;”>

<a class=”addthis_button_facebook_like” fb:like:layout=”box_count”></a><a class=”addthis_button_tweet” tw:count=”vertical”></a><a class=”addthis_button_google_plusone” g:plusone:size=”tall”></a><a class=”addthis_counter”></a><a href=”http://Hindivhelp.blogspot.com/” rel=”nofollow”>Hindivhelp</a></div>

<script type=”text/javascript” src=”//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831″></script><!– Scrolling social Button END –> 

Code 9



Sharebutton code 9

<!– Scrolling social Button BEGIN –> <div class=”addthis_toolbox addthis_floating_style addthis_32x32_style” style=”left:50px;top:50px;”><a class=”addthis_button_facebook”></a><a class=”addthis_button_twitter”></a><a class=”addthis_button_delicious”></a><a class=”addthis_button_pinterest_share”></a><a class=”addthis_button_digg”></a><a class=”addthis_button_orkut”></a><a class=”addthis_button_google_plusone_share”></a><a class=”addthis_button_myspace”></a><a class=”addthis_button_compact”></a><h6><a href=”http://Hindivhelp.blogspot.com/” rel=”nofollow”>Hindivhelp</a></h6></div><script type=”text/javascript” src=”//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831″></script><!– Scrolling social Button END

Code 10

Social share button Code 10

<div class=’oss-widget-interface’></div><script type=”text/javascript” src=”//sharecdn.social9.com/v2/js/opensocialshare.js”></script><script type=”text/javascript” src=”//sharecdn.social9.com/v2/js/opensocialsharedefaulttheme.js”></script><link rel=”stylesheet” type=”text/css” href=”//sharecdn.social9.com/v2/css/os-share-widget-style.css”/><script type=”text/javascript”>var shareWidget = new OpenSocialShare();shareWidget.init({isHorizontalLayout: 1,widgetIconSize: “32”,widgetStyle: “square”,theme: ‘OpenSocialShareDefaultTheme’,providers: { top: [“Delicious”,”Digg”,”Email”,”Facebook”,”Google”,”GooglePlus”,”LinkedIn”,”MySpace”,”Pinterest”,”Print”,”Reddit”,”Tumblr”,”Twitter”,”Vkontakte”]}});shareWidget.injectInterface(“.oss-widget-interface”);shareWidget.setWidgetTheme(“.oss-widget-interface”);</script>

अब blogger के Dashboard मे जाएँ
Layout पर क्लिक करे उसके बाद Sidebar me ya footer मे Add A Gadget पर क्लिक करे
New windo open hogi उसमे HTML/JavaScript पर क्लिक करे बडे़ वाले बॉक्स मे उपर जो कोड कॉपी किया था उसे pest kr de pest करने के बाद Save kar दे
आपके ब्लॉग मे Social media share button add ho चुका है
ये भी पढे़…
Share button add करने मे koi problem aati hai to. हमे बताए and is पोस्ट को Social media me Share जरुर कर दे

Thanks for coming my blog and reading this article

Free Newsletter Stuff

Get Blogging, WordPress tutorial in hindi

Rate this post

About Mr Manish

मै मनीष www.hindivhelp.co.in का Founder हूं इस ब्लॉग पर हिन्दी भाषा मे, पैसा कमाए इंटरनेट से, इंटरनेट टिप्स , नया ब्लॉग स्टार्ट करे , की जानकारी शेयर की जाती है हमें इसी तरह सपोर्ट करते रहे. Learn More

ये भी पढ़े..  Paise kaise kamaye mobile se in Hindi
 

Leave a comment