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
<!-- 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 --><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
<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 चुका है
Share button add करने मे koi problem aati hai to. हमे बताए and is पोस्ट को Social media me Share जरुर कर दे Thanks for coming my blog and reading this article क्या आप हमारे द्बारा किए गए पोस्ट से संतुष्ट है
