क्या आप अपने Blogger ब्लोग पर WhatsApp Sharing Button Add करना चाहते हैं मुझे पता है आपका जवाब हाँ ही होगा तो आज हम इस पोस्ट में जानेंगे की कैसे आसान Step से हम अपने यह कर सकते हैं|
आज आप दिनभर में कितनी बार Whatsapp Open करते हैं मैं जनता हूँ आपका जवाब होगा बहुत बार| आज Whatsapp के 2.7 billion User हैं और एक Report के अनुसार whatsapp पर रोज 10billion mesaages Share होते है| जब 2009 में Whatsapp आया था तो किसी ने ये User Graph में Facebook को भी पीछे छोड़ देगा|तो अगर आप अपना सोशल Traffic बढाना चाहते हैं तो Whatsapp Best Choice हैं |और एक ब्लोग के लिये Traffic कितना Important है ये तो आप जानते ही है|
Table of Contents:
अपने ब्लोग पर Whatsapp Sharing Button Add करने के फ़ायदे|
- आपकी Average Share 53% बढ जायेगी|
- आपके ब्लोग की Organic Traffic 90%+ बढ जायेगी||
- आपके Blog के Average Social Share Repo 160% बढ जायेगी|
- और बेशक आपके New Visitors बढ जायेंगे|
Blogger पर Whatsapp Sharing Button कैसे Add करें?
Note: अपने Blogger Theme Code में कोई भी बदलाव करने से पहले Blogger Theme का Backup Download जरुर कर ले|
- सबसे पहले आप Blogger.com पर Login करें और Theme(Template)चुने और Edit ThemeOption पर क्लिक करें|
- अब नीचे दीये Code को ]]></b:skin> से ठीक बाद Pasteकरें|
<b:if cond='data:blog.isMobileRequest == "true"'>
<style type='text/css'>
/**************************************************************************
WhatsApp Share Button By Shakil Alam (custom design)
**************************************************************************/
.Whatsapp-share{margin:5px 0px 5px 0px ; width:100px;}
.Whatsapp-share .button_custom { background: #43d854; }
.Whatsapp-share .button_custom:hover { background: #23d854; }
.Whatsapp-share li { position: relative; text-align: center; list-style: none; list-style-type: none; padding: 0px; border-left: 0 solid rgba( 0,0,0,.4); height: 40px; margin-bottom:-6px; overflow: hidden; display: inline-block; box-sizing: border-box; background: none; box-sizing: content-box; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.Whatsapp-share li a {
display: inline-block; box-sizing: border-box; padding: 0px px 0px 0px; cursor: pointer; text-decoration: none; }
.Whatsapp-share li >a:hover::before {
Content:'Share it'; color: #fff !important; font-family: Oswald; font-size: 18px; font-style: normal; font-weight: normal; line-height: 0.8em; -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -ms-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; bottom:-10px; position:relative;}
.Whatsapp-share li:hover i{
opacity: 0.8; margin-top:50px; }
.Whatsapp-share li i { width:83.5px;
color: #fff !important; font-family: FontAwesome; font-size: 30px; font-style: normal; font-weight: normal; line-height: 0.8em; float:left; padding:8px; height:40px; background-color: rgba(0,0,0,0.1); border-down-right-radius:90px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
</style>
</b:if>- अब CTRL+F का इस्तेमाल करके <data:post.body/> Search करें और इसके ठीक नीचे /उपर नीचे दीये Code को Paste करें|
Note: Aapko <data:post.body/> Code दो या तीन होंगे परंतु आपको ये code दूसरे <data:post.body/> के उपर/नीचे पPaste करना हैं|
Note:अगर आपको Whatsapp Share Button Title के नीचे चाहिये तो code को <data:post.body/> के ठीक उपर Paste करें और अगर आप Share Button को Post Footer में Add करना चाहते हैं तो Code को <data:post.body/> ठीक नीचे Paste करें|
<b:if cond='data:blog.isMobileRequest == "true"'>
<div class='Whatsapp-share'>
<div class='button_custom'>
<a expr:href='"whatsapp://send?text=" + data:post.title + " >> " + data:post.url' rel='nofollow' target='_blank' title='Share on whatsapp!'><strong><i class='fa fa-whatsapp'/></strong>
</a>
</div>
</div>
</b:if>- अब CTRL+F का इस्तेमाल कर Code में <head> tag Search करें और नीचे दीये FontAwesome StyleSheet Code को <head> के ठीक नीचे Paste करें|
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>
Note:अगर आपके Theme Code में पहले से ही FontAwesome Stylesheet हो तो यह ये Step छोड़ दे और अगले Step पर जाये|
- अब Save Button पर क्लिक करें|
बस आपके ब्लोग में Whatsapp Sharing Button Add हो गया|
Conclusion
मुझे उम्मीद है आपने उपर के Simple Step को follow कर Whatsapp Sharing Button Add कर लिया होगा | अगर आपको ये पोस्ट पसंद आया तो अपने Friends के साथ Share जरुर करें|…और अगर इस पोस्ट से संबंधित कोई सवाल हो तो नीचे Comment में हमे बतायें| हमारे Latest Post की Notification के लिये Subscribe करें|
Stay Happy! Stay Blessed…
