Blogspot Blog Me Social Media Share Button Kaise Lagaye?

दोस्तों आपने तो Facebook, Twitter,Google Plus etc का नाम जरूर सुना होगा।क्योकि इंटरनेट पर कोई भी व्यक्ति Social Media से दूर नहीं है।बल्कि कोई कोई तो Social Networks के लिए ही इंटरनेट का प्रयोग करता है।इसीलिए इस पोस्ट में आपको अपने ब्लॉग के पोस्ट के निचे Social Media Share बटन कैसे लगाये।

बहुत से new bloggers तो इसमें भी गलती कर देता है की वो Social Share Button नहीं लगाता है।जिसकी वजह से उनको बहुत कम Traffic मिलता है।

Social Media Share Buttons क्यों लगाये।

दोस्तों इसको लगाने से हम जो Post लिखेंगे उसके निचे या ऊपर Social Share बटन होगा और visitors चाहेगा तो उसे अपने Friends तक आसानी से Share कर सकेगा।

Blog Me Social Media Share Buttons Kaise Lagaye?

दोस्तों इसके लिए आपको कुछ Steps Follow करने पड़ेंगे ।

Step 1:-सबसे पहले आप ब्लॉग के Dashboard>>Template>>Edit HTML में जाइये

Step 2: अब CTRL+F दबा कर <post.body></post.body> को find कीजिये.

Step 3:-उसके बईअद आप निचे दिए हुआ Code को कॉपी करके Past कर दीजिए।

<b:if cond='data:blog.pageType == "item"'>
<style>
@import url(http://fonts.googleapis.com/css?
family=Open Sans);
@import "//netdna.bootstrapcdn.com/font-
awesome/3.0/css/font-awesome.css";
#buttons {
width: 475px;
overflow: hidden;
margin: 70px auto 0;
}
.button {
float: left;
margin-right: 10px;
width: 110px;
background: #eaeaea;
border: 1px solid #cbcbcb;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: inset 0 1px 0px #fdfdfd;
padding: 15px 5px 5px;
box-sizing: border-box;
}
.button i {
background: #c5c5c5;
color: #eaeaea;
text-align: center;
line-height: 40px;
font-size: 18px;
width: 40px;
height: 40px;
display: block;
margin: 0 auto 10px;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
.social-container {
text-align: center;
text-transform: uppercase;
font-size: 12px;
color: #656565;
line-height: 54px;
font-family: Open Sans;
background: #d8d8d8;
width: 100%;
height: 45px;
box-shadow: inset 0 -2px 4px #c7c7c7;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
position: relative;
overflow: hidden;
}
.slide, .button i {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}
.slide {
box-shadow: inset 0 2px 4px rgba(0, 0, 0,
0.15);
border-radius: 0 0 22px 22px;
-o-border-radius: 0 0 22px 22px;
-ms-border-radius: 0 0 22px 22px;
-moz-border-radius: 0 0 22px 22px;
-webkit-border-radius: 0 0 22px 22px;
/* top fix */
transition: all 0.2s ease-in-out;
position: absolute;
height: 45px;
width: 100%;
top: -35px;
}
.slide::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 10px;
box-shadow: inset 0 1px 0px #fdfdfd, 0
3px 0px #cdcdcd;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #eaeaea;
border: 1px solid #cbcbcb;
box-sizing: border-box;
bottom: 0;
}
.button:hover .slide {
top: 0;
border-radius: 3px;
}
.linkedin .IN-widget, .button iframe, .google #_
__plusone_0 {
top: -2px;
position: relative;
}
.twitter iframe {
width: 79px !important;
}
.google #___plusone_0 {
width: 60px !important;
}
.button.facebook:hover i, .facebook .slide {
background: #305c99;
color: white;
}
.button.twitter:hover i, .twitter .slide {
background: #00cdff;
color: white;
}
.button.google:hover i, .google .slide {
background: #d24228;
color: white;
}
.button.linkedin:hover i, .linkedin .slide {
background: #007bb6;
color: white;
}
.button.linkedin {
margin-right: 0;
}
.credit {
padding-left: 10px;
font-size: 14px;
color: #172b36;
position: absolute;
bottom: 0;
text-align: center;
font-family: Open Sans;
}
.credit a {
border-bottom: 2px solid #dc4106;
text-decoration: none;
padding: 0 0 2px;
color: #172b36;
}
</style>
<div id="buttons">
<div class="facebook button">
<i class="icon-facebook"></i>
<div class="social-container fb">
<div class="slide">
<iframe src="//www.facebook.com/plugins/
like.php?href=http%3A%2F%
2F developers.facebook.com %2Fdocs%
2Freference%2Fplugins%
2Flike&send=false&layout=button_
count&width=90&show_
faces=false&font&colorscheme=light&action=like&height=21&appId=56858
1339861351" scrolling="no" frameborder="0"
style="border:none; overflow:hidden;
width:81px; height:21px;" allowtran
sparency="true">
</iframe>
</div>
Facebook
</div>
</div>
<div class="twitter button">
<i class="icon-twitter"></i>
<div class="social-container tw">
<div class="slide">
<a href="https://twitter.com/share"
class="twitter-share-button" data-
via="mariuCSS">
Tweet </a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0]
,p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p '://platform.twitter.com/
widgets.js';fjs.parentNode.insertBefore(js,fjs);}
}(document, 'script', 'twitter-wjs');
</script>
</div>
Twitter
</div>
</div>
<div class="google button">
<i class="icon-google-plus"></i>
<div class="social-container tw">
<div class="slide">
<!-- Place this tag where you want the 1
button to render. -->
<div class="g-plusone" data-size="medium">
</div>
<!-- Place this tag after the last 1 button
tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/
plusone.js';
var s = document.getElementsByTagName
('script')[0];
s.parentNode.insertBefore(po, s);
}
)();
</script>
</div>
Google
</div>
</div>
<div class="linkedin button">
<i class="icon-linkedin"></i>
<div class="social-container tw">
<div class="slide">
<script src="//platform.linkedin.com/in.js"
type="text/javascript">
lang: en_US
</script>
<script type="IN/Share"></script>
</div>
LinkedIN
</div>
</div>
</div>
</b:if>

Note:-developers.facebook.com की जागह आप अपना Facebook page url डाल दीजिए।