Tips To Add Whatsapp Share Widget Css Html Code In Website

Whatsapp is the most popular social site in our lives. Which nowadays use all. Everyone uses it, old and young.And because of them, we can stay away from talking to everyone. Chatting can be done. Can also call. And now you can even make a video call.And it runs very well in the Young Ganaration. Everyone has mobile so it is used. And all of us call it Whatsap as Thanks giving.

If your website is. And you write something new every day. But if you want to share it with WhatsApp, then you should read the post Tips To Add Whatsapp Share Widget Css Html Code In Website to the last post.

If you want to increase traffic to your website quickly So read this article only once for this. You will have the advantage. I will tell you a Trick 👌🤔...

Everyone does a lot to increase traffic to your site. Day worked hard. But do not know to be successful. Because they do not have ideas.But today I will give such an idea to all. From which you will definitely have success. And you will get lots of traffic. This is my guarantee Guys.I write something new every day Because this is my job. Today I will say something that will work for you very much. I will tell you all the details in this post.

Eliminating Blog Title On Google Adsense Matched Content

How To Add Whatsapp Sharing Button In Blogger

Remember friends My agent trick will appear in mobile or tablet And in the We have shown the button just for demo in desktop.

I will tell the following process but one thing I want to share with you all is what I should say. So that the burden of my heart becomes lighter.If someone gets benefit by reading my content today, then Brother Please tell everyone about it. Even to your friends.So that I found courage. And this way I can bring a new content every day.

11 things husband should never say his wife

• >> Step 1 :- ( add css )

> 👉Take a look at what I will tell you to make a backup of your template before doing it. So if you make a mistake, then there will be no problem.. And it is also necessary to do this. Always remember this to me. Any problem will never come in your site again.

✓ First you copy this 👇 css code .....

/* ######## Whatsapp Sharing Widget By Gourab  ######################### */ .gdshare-widget { 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; float:left; } .gdshare-file { float: left; padding: 0; padding-top: 0; font-size: 13px; font-weight: 400; text-transform: capitalize; } .gdshare-file a { color: #fff; padding: 3px 8px; margin-left: 4px; border-radius: 2px; display: inline-block; margin-right: 0; background: #010101; } .gdshare-file a:hover{color:#fff} .gdshare-file .wat-art{background:#25d266;display:none;} .gdshare-file .wat-art:hover{background:rgba(37, 210, 102, 0.73)} @media only screen and (max-width: 768px) { .gdshare-file .wat-art{display:inline-block;} }

✓ now you can going your Blogger dashboard >>  template >> edit html >> press the ctrl+f > find  ]]></b:skin> tag. 

> Now the code that was copied from the top. Paste it in the ABOVE of this tag.... 

share image on whatsapp from website

• Add Html ( Step 2)

✓Inside this theme and there is a tag that must be searched <data:post.body/> .

> >See this tag at 2 to 4 place. But according to me I will do the same in the last. Copy and paste this code👇 below this  <data:post.body/>  tag.

 <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='gdshare-widget'> <h8 class='share-title'>Share This:</h8> <div class='gdshare-file'> <whatsapp expr:href='data:post.url' expr:text='data:post.title'/> <a class='wat-art' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot; &gt;&gt; &quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-whatsapp'/><span class='resp_del5'> Whatsapp</span></a> </div> </div> <div style='clear:both'/> </b:if>

• Step 3 ( Add Font Awesome ) 

>The widget works on fontawesome icons, so to make the widget work you have to install fontawesome in your blog, To do so.

> .> Now search this tag <head> in the same theme. After that copy the code given below 👇. Paste this <head> tag  down just below.

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

Now save it. Congratulations bro. You've well added the Whatsap share button to your website. I hope you all have understood everything. If anybody benefits from this article, please share it with your friends. And if you have any questions in your mind then tell it here by commenting below. I will help you immediately.