हमारे बारे में हमसे संपर्क करें टिप्स और ट्रिक्स ऑनलाइन पैसे कैसे कमायें फ्री वेबसाइट कैसे बनायें

October 09, 2017

Blog Post Me Responsive or Elegant Social Share Button Kaise Add Kare

Blog ko social popular banane me social sites ka ek aham roll hota hai . isliye www.dcrazy.com par mai aapko batane ja raha hu ki blogger blog me social Elegant Look Social Share button widget kaise add karte hain. Agar aapne abhi tak apne blog par social share button nahi lagaye hai to me aapko ise use karne ki salah dunga. Because bahut se visitor aapki post ko social media par share karna chahte hain to unke liye aapke blog me share button hona bahut jaruri hai jisse aasani se aapke blog post ko log social media par share kar sake. To chaliye seekhte hain ki blog me post ke niche or upar social share button kaise lagate hain.

Blogger me post ke niche social share icon button widget kaise add kare lagaye


Blog post ko social media par share karne ke aur bhi bahut se tarike hain aap direct apni post ka link bhi social site par share kar sakte hain. But social share button ke dwara directly share karna logo ko jyada pasand aata hai. Isliye agar aap chahte hain ki aapke blog ko bhi social site par ek alag pahchan mil sake to aap bina der kiye is post ko follow karke apne blog par social share button widget apne blog me install kar sakte hain.

Agar aap achhi post likhte hain aur aapki post logo ko pasand aa jati hai to khush hokar aapki post ko share karna chahe ya aapki post ke link ko apni social site par share karke dobara visit karne ke liye rakhna chahe to wo aapke blog par social share button ko khojte hain. Agar aapke blog me social share button hota hai to aapki post wo share kar dete hain but agar aapke blog me share button nahi milta hai to logo ko share karna bahut bhari kaam lagne lagta hai. Isliye aap apne blog me social share button widget jarur add kare jisse readers ek click karke aapki post ko social media par share kar sake.



Isliye is post me mei apko bahut hi simple tarike se samjha raha hu jo aapke jaldi samajh me aajayega. Isko apne blog par lagane ke liye aapko apne blog me kuch code add karne honge. Chinta ki koi bat nahi hai yah bahut aasan hai. Is post me jis social share button ke bare me batane ja raha hu iske bare me aapko thoda sa bata deta hu ki ye share button bahut hi responsive aur elegant look hai jo aapke blog par puri tarah se mobile device par bhi behatar tarike se show hoga. isliye aap is post ko carefully follow kijiye. Ab jante hain ki How to add a responsive and stylish social share button in blogger blog.

Blog Me Responsive or Elegant Style Social Share Button Kaise Add Karte Hain


Step-1 ( Add Css Code)

Ek bat me aapko bata du ki jab bhi aap apne blog ki template me kuch bhi editing karna chahe to pehle apni theme ka backup bana le. Isliye kuch bhi mistake hone par aap dobara se apni usi theme ko upload kar sakte hain.

  1. Sabse pehle apne blog dashboard me log in ho jaye 
  2. Uske bad Theme>>Edit Html par click kare
  3. Ab aapke samne Theme ki puri coding open ho jayegi. 
  4. Is coding box me kahi par bhi click kare aur Ctrl+F dabaye
  5. Ab search box me ]]></b:skin> code ko search kare
Ab is code ko copy karke ]]></b:skin> upar paste karde

/* ######## Social Sharing Widget By Dcrazy.com ########### */
.share-box {
position: relative;
padding: 10px;
}
.share-title {
border-bottom: 2px solid #777;
color: #010101;
display: inline-block;
padding-bottom: 7px;
font-size: 15px;
font-weight: 500;
position: relative;
top: 2px;
}
.share-art {
float: right;
padding: 0;
padding-top: 0;
font-size: 13px;
font-weight: 400;
text-transform: capitalize;
}
.share-art a {
color: #fff;
padding: 3px 8px;
margin-left: 4px;
border-radius: 2px;
display: inline-block;
margin-right: 0;
background: #010101;
}
.share-art a:hover{color:#fff}
.share-art .fac-art{background:#3b5998}
.share-art .fac-art:hover{background:rgba(49,77,145,0.7)}
.share-art .twi-art{background:#00acee}
.share-art .twi-art:hover{background:rgba(7,190,237,0.7)}
.share-art .goo-art{background:#db4a39}
.share-art .goo-art:hover{background:rgba(221,75,56,0.7)}
.share-art .pin-art{background:#CA2127}
.share-art .pin-art:hover{background:rgba(202,33,39,0.7)}
.share-art .lin-art{background:#0077B5}
.share-art .lin-art:hover{background:rgba(0,119,181,0.7)}


Step.2 (Add Html Code)

Ab dobara Ctrl+F daba kar <data:post.body/> search kare

Ab is code ko copy karke <data:post.body/> ke niche paste kar de

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-box'>

          <h8 class='share-title'>Share This:</h8>
               <div class='share-art'>
<a class='fac-art' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='resp_del'> Facebook</span></a>

<a class='twi-art' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='resp_del2'> Twitter</span></a>

<a class='goo-art' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='resp_del3'> Google+</span></a>

<a class='pin-art' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='resp_del4'> Pinterest</span></a>

<a class='lin-art' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/><span class='resp_del5'> Linkedin</span></a>

</div>
         </div>
               
      <div style='clear:both'/>
</b:if> 


Note:- 1. Blog Template (theme) me <data:post.body/> kai jagah par hota hai isliye agar ek ke niche kaam nahi karta hai to dusre ke niche code paste karke dekh le.  
2. Agar aapko ise search karne me pareshani ho to aap <div class='post-footer'> or <div class='post-footer-line post-footer-line-1'></div>. ko search karke kar sakte hain.

Step-3 (Add Fontawesome)

IS social share button widget ko work karwane ke liye aapko apne blog me fontawesome install karna padega.

Isliye template (theme) me Ctrl+F press kare aur </head> code search kare

Ab niche diye gaye code ko copy karke </head> ke upar paste kar de

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>


Finally Save Theme par click karke theme (template) save kar de

Conclusion

Congratulations !! ab aapke blog me social share button add ho chuke hai. Ek bar apne blog ko open karke check kar sakte hain ki aapne jo social share button widget add ki wo thik se kaam kar rahi hai ya nahi. Ye social share button bahut hi simple aur stylish elegant look hain isliye har blogger inko pasand karega. Ab aap bhi apne blog me post ke niche/upar social share widget add karna seekh gaye honge. Agar aap ko ya post samajh me aayi ho to aap aasaani se apne blog me ise add kar sakte hai.

I hope aapko bhi ye post pasand aayi hogi agar aapko ye jankari achhi lagi to apne dosto ke sath shre jarur kare aur agar aapka koi aur sawal ho to aap comment me puch sakte hain.
If You Enjoyed This Post Please Take 5 Seconds To Share It.

Article by: Sharuf Khan

He is a professional hindi blogger and share regular new content in hindi for begginers. You can subscribe our blog newsletter and get new updates daily for free. If you want learn more about us then click here.


0 comments:

Post a Comment

दोस्तों Dcrazy.com पर आपका स्वागत है अगर आपका कोई सवाल है तो आप कमेंट में पूछ सकते हैं. लेकिन आपसे Request है की कमेंट में अभद्र शब्द का प्रयोग ना करें और बिना जरुरत के कोई भी लिंक कमेंट में Add ना करें. धन्यवाद् !!!

FOLLOW ON SOCIAL MEDIA

LAST RECENT POSTS

GET FREE EMAIL ALERT

GET FREE LAST UPDATE

अगर आप अपने ईमेल इनबॉक्स में नयी पोस्ट के NOTIFICATION प्राप्त करना चाहते हैं तो अभी सब्सक्राइब करें सब्सक्राइब करने बाद आपके ईमेल पर एक लिंक आएगा उस पर क्लिक करके कन्फर्म जरुर करें