How to Add Whatsapp Share Button in Blogger

क्या आप Whatsapp Messenger Share Button अपने Blogger Blog में Add करना चाहते है ? आज में यह तरीका आपसे Share करूँगा और यह एक Custom Design है |

आजकल Social Network में Whatsapp बहुत Papular है और यदि आप अपने Blog के Traffic को बढ़ाना चाहते है तो Whatsapp Share Button Best Choice है |

आइये जानें कैसे :

Note : आपके Blogger Template Code में किसी भी प्रकार के Customization से पहले मेरी आपसे Request रहेगी की आप अपने Blog की Backup Copy Download कर लीजिये |

·         Step1) सबसे पहले अपने Blogger के Dashboard में जाइये Template पर Click कीजिये फिर Edit HTML पर Click कीजिये |

·         Step2) अब Crtl+F उपयोग करके ]]></b:skin> Search कीजिये |

·         Step3) Search मिलने पर ठीक ]]></b:skin> इसके बाद नीचे दिए Code को Copy करके Paste कर दीजिये |

 <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<style type='text/css'>
/**************************************************************************
WhatsApp Share Button By MyBloggerGuides.com (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 &gt;a:hover::before {
Content:&#39;Share it&#39;; 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>

 

·         Step4) दोबारा Crtl+F का उपयोग करके <data:post.body/> Search  कीजिये |

 

Note : यदि आप Whatsapp Share Button Post Title के यहां पर चाहते है तो नीचे दिया गया Code <data:post.body/> इसके पहले Copy करके Paste कर दीजिये यदि आप Whatsapp Share Button Post के नीचे चाहते है तो Code को <data:post.body/> इसके बाद Paste कीजिये |

                                                                       

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>

<div class='Whatsapp-share'>

<div class='button_custom'>

<li>

<a expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + data:post.url' rel='nofollow' target='_blank' title='Share on whatsapp!'><strong><i class='fa fa-whatsapp'/></strong>

</a>

</li>

</div>

</div>

</b:if>

Note : यह Whatsapp Share Button केवल Smartphones के लिए है | यदि आप चाहते है की यह Button Desktop पर भी दिखे तो Red Highlighted Conditional Tags को हटा दीजिये |

·         Step5) अब Save Template पर Click  कीजिये | आप देख सकते है आपकी Button दिखने लगी होगी |

Thanks For Reading Post