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

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

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&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&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&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&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&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&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&text=Simple%20Share%20Buttons&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&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 –>

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

</div>

</script>

<!– END AddToAny for Blogger –>

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+ </p>Google+</a></li> <li><a class=”btrix-social-slidebox pinterest” href=”http://pinterest/Hindivhelp”><p>2K+ </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

<a href=”http://www.facebook.com/HindivHelp”><img src=”//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=”//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=”//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=”//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=”//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=”//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=”//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

<!– 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 = {"data_track_clickback":true};</script>

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

<!– 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

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

ये भी पढे़…

Blogger Blog me Socia follow us Button widget kaise add kare 10 javascripts code

Share button add करने मे koi problem aati hai to. हमे बताए and is पोस्ट को Social media me Share जरुर कर दे

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