How to add a Twitter Follow and Tweet button on Blogger

Hi friends,Today i am going to show you how to add a Twitter Follow and Tweet button to your blogger. This tutorial not only work with Blogger but its also work with WordPress and your personal websites. Just Follow these simple tutorial steps and when you done this tutorial your widget look like this.

To add Follow button

Step-1

Go to your Blogger Dashboard and than click on Layout as seen on below

Step-2

Than Click on ” add a gadget “

Step-3

Click on “HTML”

Step-4

In subject Fill “Follow us on Twitter” Or as your choose and than paste the code to there as seen in the image.

Code here

<a href=”https://twitter.com/ViewAndroid&#8221; class=”twitter-follow-button” data-show-count=”false” data-size=”large” data-dnt=”true”>Follow @ViewAndroid</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);</script>

To add Tweet button 

FIRST 3 STEPS ARE SAME

Step-4

In subject fill your choose and than paste this code to there.

Code Here

 <a href=”https://twitter.com/share&#8221; class=”twitter-share-button” data-url=”http://shvmblogspot.blogspot.com&#8221; data-via=”ViewAndroid” data-size=”large”>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);</script>

Note – Plz find and replace these with your’s

  1. shvmblogspot.blogspot.com
  2. viewandroid

If you like our tutorial than like our Facebook page or subscribe our website by your email 
address. Thank you
#shivamkumar 
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);

How to add a Facebook pop-up widget

Follow these steps to add a facebook like pop-up widget.

Step-1

Go to your blogger dashboard than click Layout.

Step-2
Click to “add a gadget”
Step -3
Select a HTML gadget 
Step -4 
Select a Subject.Than copy and Paste this code to there.

<script type=”text/javascript” src=”https://dl.dropboxusercontent.com/u/63968842/likeit%28www.widgetgenerators.com%29.js”&gt;  </script>  <script type=”text/javascript”>  function r(f){/in/.test(document.readyState)?setTimeout(‘r(‘+f+’)’,9):f()}; r(function(){new ConversionsBox(“Like%20Us%20On%20Facebook”,”http://www.facebook.com/shivamblogspot&#8221;);});  </script>    <script type=”text/javascript” src=”https://dl.dropboxusercontent.com/u/63968842/likeit%28www.widgetgenerators.com%29.js”&gt;  </script>  <script type=”text/javascript”>  function r(f){/in/.test(document.readyState)?setTimeout(‘r(‘+f+’)’,9):f()}; r(function(){new ConversionsBox(“Like%20Us%20On%20Facebook”,”http://www.facebook.com/shivamblogspot&#8221;);});  </script>    <script type=”text/javascript” src=”https://dl.dropboxusercontent.com/u/63968842/likeit%28www.widgetgenerators.com%29.js”&gt;  </script>  <script type=”text/javascript”>  function r(f){/in/.test(document.readyState)?setTimeout(‘r(‘+f+’)’,9):f()}; r(function(){new ConversionsBox(“Like%20Us%20On%20Facebook”,”http://www.facebook.com/shivamblogspot&#8221;);});  </script>

Note- Find and  Replace your’s with my link. “http://www.facebook.com/shivamblogspot&#8221; to your’s.

After you done this tutorial you find this on your website.

Congratulation,you done this tutorial.Follow us on Facebook to get more fun tutorials.You should also follow our website by your email address.thank you.

All-in-one social widget for blogger

Social portion is very important part of our website because a huge number of people comes from there.So its being very important to make it easy to people should connect with your site.Solution of this problem is ” social widgets”. So today i am going to show you how to insert all in one social widget on your blogger website.

When you done this tutorial your widget look like this.

Step-1

Go to your Blogger dashboard -> Layout

Step-2

Click on add a gadget.Than select a HTML

Step-3

Select a subject and Copy & Paste this code to there.

<div class=”btnt-chronicl-social”><ul><li><a class=”rss” href=”http://feeds.feedburner.com/ShivamBlogspot”>Subscribe to the RSS Feed</a></li> <li><a class=”twitter” href=”https://twitter.com/viewandroid”>Follow me on Twitter</a></li> <li><a class=”facebook” href=”https://www.facebook.com/shivamblogspot”>Find me on Facebook</a></li> <li><a class=”google” href=”https://plus.google.com/106038532455092952029&#8243; rel=”author”>Join me on Google+</a></li> <li><a class=”linkedin” href=”http://in.linkedin.com/your url”>Connect with me on LinkedIn</a></li> <li><a class=”youtube” href=”http://www.youtube.com/user/sbstvable”>Watch me on YouTube</a></li>
</ul></div><style type=”text/css”>.btnt-chronicl-social { width: 100%; } .btnt-chronicl-social ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; } .btnt-chronicl-social ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; } .btnt-chronicl-social ul li:first-child { border-top: 0 none; } .btnt-chronicl-social ul li:last-child { border-bottom: 0 none; } .btnt-chronicl-social ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; } .btnt-chronicl-social ul li a:hover { background-color: #fafafa !important; } .btnt-chronicl-social ul li .rss { background: url(“http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png&#8221;) no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; } .btnt-chronicl-social ul li .twitter { background: url(“http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png&#8221;) no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;} .btnt-chronicl-social ul li .facebook { background: url(“http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png&#8221;) no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; } .btnt-chronicl-social ul li .google { background: url(“http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png&#8221;) no-repeat scroll 10px center #D44937; padding: 17.5px 60px; } .btnt-chronicl-social ul li .linkedin { background: url(“http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png&#8221;) no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; } .btnt-chronicl-social ul li .youtube { background: url(“http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png&#8221;) no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; } .social-about { display: none; }</style>

Note- Find and change that following by yours 

  1. http://feeds.feedburner.com/ShivamBlogspot
  2. https://twitter.com/viewandroid
  3. https://www.facebook.com/shivamblogspot
  4. https://plus.google.com/106038532455092952029
  5. http://www.youtube.com/user/sbstvable

Congratulation,you have done this tutorial. for more tutorial follow our website on facebook or you can follow us only by your email address.