Stylish Social Share Button For Blog Website

3
100 views

Social share buttons blog me  kya importance hoti hai. Wo sayad aap jante hi honge. Blog me social 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 So jante hai blog me stylish social share button kaise add kare.

social media follow button
Aaj is post me aapko Stylish social share buttons blog me kaise add karte hai.
Aur social share buttons ko design bahut best hai. Blog ya website ke liye. To agar aap aapne blog me social share buttons ya social media icon ko add karna chate hai. To post ko carefully read kare.

How To Add Social 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(“https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,300”);loadCSS(“httpss://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 Again 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 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='”https://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='”https://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='”httpss://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='”https://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='”https://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 share buttons ya social 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 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.

3 COMMENTS

  1. Here's a link to our share buttons: httpss://shareaholic.com/pub…
    You can add all the buttons you need, and have them appear on the top and/or bottom of posts.
    For example, The Social Media Hat uses our buttons above their content and at the end of their posts. See how our buttons look on their site:
    https://www.thesocialmediaha
    Of course, you can customize your buttons in a variety of ways in your Settings.
    If you have any technical issues, feel free to reference our support center (https://support.shareaholic…. but if you can't find what you're looking for, submit a request and we'll be glad to help.

LEAVE A REPLY

Please enter your comment!
Please enter your name here