Stylish Social Share Button For Blog Website

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.

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.

Stylish social media icon for blog website.

How To Add Social Share Buttons On Blog Websites.

Step 1.

Sabse Phale blogger dashboard me Theme Per click kare.
Ab Edit HTML Per click kare.
Ab Search box Me </Head> Code ko search kare.
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.