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.
How To Add Social Share Buttons On Blog Websites.
- 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>
- 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;}
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.
<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.
Read Most:-
