Hello Friends, social media share buttons ki blog me  kya importance  hoti hai. Wo sayad aap jante hi honge. Blog  me social media share buttons ya social media icons se aapke blog post ko social media sites per share kar skate hai. Taki Blog par acha traffic aa sake. Aur kuch reader aagar post ko read karte time post ko like karte hai. To wo post ko social media per share karte hai. Isliye blog website me  Beautiful social media icons ya social media share buttons add karne chaiye.



Aaj is post me aapko Stylish social media share buttons blog me kaise add karte hai. Batane ja rha hu. Jo Aapke blog design ko best look denge. Aur reader attrective chij ke tarf jayda attract hota hai. Aur social media share buttons ko design bahut best hai. Blog ya website ke liye. To agar aap aapne blog me social media share buttons ya social media icon ko add karna chate hai. To post ko carefully read kare.
Agar aap social media share buttons ka design ya demo dekna chate hai. To Demo Buttons  per click kare. ab agar aap in social media share buttons ko blog me add karna chate hai. Niche diye gaye steps ko follow kare.

How To Add Social Media Share Buttons On Blog Websites.

Step 1.
  1. Sabse Phale blogger dashboard me Theme Per click kare.
  2. Ab Edit HTML Per click kare.
  3. Ab  Search  box Me </Head> Code ko search kare.
  4. Ab </style> Code ke uper niche diye Javascript code ko paste kare.
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,300");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>
Step 2.
  • Ab Dubara Search box me </style> Code ko search kare.
  • Ab </style> Code ke niche diye Gaye Code ko paste kar de.
/* Social media icons.*/
.post-footer{margin-top:30px;}
.share-post, .multiauthor-box {margin-bottom:50px;}
.share-post ul {padding:0;margin:0;text-align:center;}
.share-post li{list-style:none;display:inline-block;margin-right:10px;padding:0;font-weight:700;text-transform:uppercase}
.share-post li:first-child {font-size:16px;color:#22a1c4;}
.share-post li a{display:block;text-align:center;}
.share-post span{display:none;}
.share-post li a i{display:block;color:#fff;width:40px;height:40px;line-height:40px;font-size:18px;border-radius:40px;font-weight:normal;transition:all .3s;}
.share-post{margin-bottom:30px;border-top:1px solid #eff0f0;border-bottom:1px solid #eff0f0;line-height:52px;min-height:52px;margin-left:-30px;margin-right:-30px}
.share-post li a i.fa.fa-facebook{background:#3b5998;border:1px solid transparent;}
.share-post li a i.fa.fa-twitter{background:#19bfe5;border:1px solid transparent;}
.share-post li a i.fa.fa-google-plus{background:#d64136;border:1px solid transparent;}
.share-post li a i.fa.fa-linkedin{background:#006699;border:1px solid transparent;}
.share-post li a i.fa.fa-pinterest{background:#cb2027;border:1px solid transparent;}
.share-post li a i.fa.fa-facebook:hover{background:#fff;color:#3b5998;border:1px solid #4666aa;}
.share-post li a i.fa.fa-twitter:hover{background:#fff;color:#19bfe5;border:1px solid #2acef4;}
.share-post li a i.fa.fa-google-plus:hover{background:#fff;color:#d64136;border:1px solid #e95247;}
.share-post li a i.fa.fa-linkedin:hover{background:#fff;color:#006699;border:1px solid #017ab6;}
.share-post li a i.fa.fa-pinterest:hover{background:#fff;color:#cb2027;border:1px solid #e33239;}

Step 3.
Now Search Agatin in Search box <data:post.body/> 
Ab <data:post.body/> code ke niche diye gaye css code ko add kar de.
Finally Save template per click kar  de.

Note:-
1.   Agar aap  social media share buttons ko post ke uper add karna chahte hai. To niche diye code ko <data:post.body/> ke Uper bhi paste kar de.

2.  Blog template <data:post.body/>  ya 3 jagah hota hai. Agar  agar 2 dusre code per work na kare. To tisre phale code me paste kar de.
<div class='share-post'>
<ul class='entry-share-list clearfix'>
<li>Share This</li>
<li class='facebook_share'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/> </a>
</li>
<li class='twitter_share'>
<a expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
</li>
<li class='google_share'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
</li>
<li class='linkedin_share'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/></a>
</li>
<li><a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'><i class='fa fa-pinterest'/></a></li>
</ul>
</div>




Is trah se blog website me  Social media share buttons ya socail media icon ko add kar sakte hai. Aur aapne blog ke design ko best bana sakte hai.  asha karta hu aap ache trah se samjh gaye honge ko blog me beautiful social media icons  ya social media share buttons kaise add karte hai.


I hope aapko ye post passand ayi hogi To is post ko socail media or other blogger ke sath jarur share kare.