Sharing a PC internet connection not only brings the super-fast internet into your phone, but also saves on your monthly bills. There are two ways to share internet between your computer and any android device.

1. Make a hotspot using your network card and use your Android's WiFi connection to connect to it.
2. Share connection directly via USB.

Using USB to share PC Internet With Android Phone.

Requirement: Before starting out, please keep in mind that your android device MUST BE ROOTED.

What you will be doing is something called reverse tethering. For those new to this term, tethering is the process by which you share your Android device's internet connection with any other device like PC.

First you need to download the reverse tethering tool. It comes as a zipped folder, so extract the folder somewhere you can access easily. Once done, simply follow these steps -

1. Some preparations on your android phone -

• Turn on USB debugging (Settings -> Developer Options -> USB Debugging).
• Make sure the option to install apps from outside Google's play store is enabled (Settings -> Security -> Unknown Sources)

2. Now connect the android device to the computer using a USB cable.

3. Inside the downloaded folder, you will have a file - "AndroidTool.exe". Double click to run it. This is the reverse tethering tool. On starting, it will automatically detect your connected android device. If not, just hit the refresh button.

4. All done, now click "Connect" and the tool will start the reverse tethering process. You will be prompted to provide super-user permissions in your phone the first time. Upon granting permissions, the tool will install a "USB tunnel" app in your android device. The app will start a service in your phone which will convert data coming though the USB connection to make it look like a network.

That's it - your computer's internet is now shared with your phone. You can use it to browse the net, install new apps from the play store or to update apps.
Please note the installed app is different from the "USB tunnel" app available in the play store, so don't try installing it from the store manually.

What makes this tool great is - creating a shared connection is as simple as opening the tool and clicking "Connect". To make it simpler, you could keep the extracted folder inside one of your drives and have a desktop shortcut to the "AndroidTool.exe" file for quick access.

HINT: Older versions of Google play store has a dependency on your phone's WiFi and mobile internet. So make sure you update your Google Play store app to the latest version or turn on WiFi while connecting using the tool. You need don't really need a WiFi connection, just that Play store needs to see it as turned on.. what a hack :-)

As usual if you encounter any issues or have suggestions, please feel free to leave a comment and I will get back.

This story, How to Share a PC Internet Connection WIth an Android Device via USB., was originally published at Skipser.

The Google+ Commenting platform is unique in terms of features and value additions to every website. Here's what makes it special -

• Least spam - Nobody wants to loose their Google account right!!
• Universal Commenting - Comments made directly from Google+ about your content also displayed on the page.
• More Readers - Comments shared to Google+ brings in more viewers.
• SEO friendly - All comments are fully indexed by Google ranking your site better.

Adding Google+ Comments to Your WordPress Blog.

The best way to add the Google+ Commenting system to your WordPress blog is using the plugin - "Google+ Comments Widget"

To install the plugin, just follow these steps.

1. Download the plugin from wordpress plugin directory and unzip
2. Upload the google-comments-widget folder to your `/wp-content/plugins/` directory.
3. Activate the plugin through the "Plugins" menu in WordPress. Once activated, a sub-menu "Google+ Comments" will automatically get added to the "Comments" menu in your WordPress admin dashboard.
4. Go to "Comments -> Google+ Comments" and customize the commenting system as per your needs.

Once activated, your existing comments will be replaced with the new Google+ Commenting system.

Google+ Comments widget options.

By default, the Google+ Comments widget will load with a width of 500px. But there are a host of options for you to customize -

• Width - You can set the widget width to suit your site's dimensions.
• Dynamic Width - If you are using a responsive layout, Google+ commenting system has a bug. Suppose the width is set to 500 pixels and your site is loaded in a mobile with a screen size of 300 pixels. Google+ Comments will load with a fixed size of 500 and will overflow the screen. Just set the "dynamic width" option and the plugin will dynamically calculate the display width and use it to load Google+ Comments leaving no room for overflows.
• Retain Older Comments - You definitely don't want to loose your old wordpress comments when migrating to Google+. This option is set by default so your older comments will show up below the Google+ comments.
• On-Demand comments - Set this to true and a "Show Comments" link will be displayed instead of the comments. Click on it and all comments will show up inline.

Unlike Facebook comments which didn't really hit the mark, Google+ have tried to do away with all the negatives. Google+ Comments come with better readability, comment aggregation from Google+, SEO support and more importantly, Google's own security and spam checking.

So be sure to try out the plugin and please let me know if you face any issues as comments below. If you like the plugin, please do rate it in the WordPress Plugin directory and help spread the word. Finally, here's video showing the plugin in action.

This story, How to Add Google+ Comments to Your Wordpress Blog And Improve Readership., was originally published at Skipser.

Responsive layout is now a design standard across websites. It lets you display your website with the same look and feel on different screens like monitor, tablet, mobile etc. Even Google now recommends using responsive layout instead of creating separate pages for mobiles.

With responsive design, all components in the web page HTML adjusts dynamically and even position themselves depending on the screen size. But what about ads? Google's Adsense ads are not dynamic. They have fixed width/height and if the screen size is smaller, the ads just overflow the screen causing a part of the ad to be hidden.

Make Google Adsense Ads Responsive.

As mentioned before, an Adsense ad unit can only have fixed dimensions by default. But luckily, Adsense provides a variety of ad sizes. So the trick is to show an ad of appropriate size depending on the screen size.

For example, open this demo page in your PC browser and you would see a 728x90 large leatherboard Adsense unit. Now try resizing the browser by reducing it's width to be lesser than the ad unit and refresh the page. You will find a 468x60 or smaller ad appearing which will stay fully within the screen size.

Responsive Adsense Ad JavaScript Trick.

What you need to do is to replace the original Adsense code in your website with this JavaScript code. Don't worry, we are not violating any of Google's Terms and this method is approved by the Adsense team.

<div style="width:100%;">
    <script type="text/javascript">
    
        // REPLACE THIS WITH YOUR ADSENSE PUBLISHER ID.
        google_ad_client = "ca-pub-592601807724218";
    
        // AD UNITS YOU WANT TO DISPLAY FOR THIS POSITION.
        var adsarr=[
            // The format is [width, height, "ad slot number"]
            [728, 90, "XXX"],
            [468, 60, "YYY"],
            [234, 60, "ZZZ"]
        ];
        
        // DO NOT MODIFY ANYTHING BELOW. 
        // This shows the adsense ad depending on your screen size.
        var scripts = document.getElementsByTagName( 'script' );
        var adblock = scripts[ scripts.length - 1 ].parentNode;
        var width=adblock.offsetWidth;                
    
        var got_adunit=0;
        for (var i = 0; i < adsarr.length; i++) {
            adunitarr=adsarr[i];
            if(width >= adunitarr[0]) {
                google_ad_width = adunitarr[0];
                google_ad_height = adunitarr[1];
                google_ad_slot = adunitarr[2];
                got_adunit=1;
                break;
            }
        }
        if (got_adunit == 0) {
            google_ad_slot="0";
            adblock.style.display="none";
        }
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>

In the code, you need to replace two things.

1. google_ad_client value should be replaced with your Adsense publisher ID.
2. For the array with items like [970, 90, "YYY"], replace them with values for the ads you want to show. The format is [width, height, "ad slot number"]. You can get these values from the Adsense code for the ad unit you want to add.

What we are doing is to specify a set of Adsense ad units for different sizes as an array and the code will automatically display the best fitting ad. You could add,remove or change any ad in the array, but make sure the width, height and slot number are exactly the same as in the corresponding Adsense ad code.

For example, if you want to add a responsive ad in your header, you could have the array with leatherboard ads like "728x90", "468x60" and "234x60". And for your sidebar, the ads could be "300x250", "250x250" and "200x200". Depending on display area width, the best fitting ad would be shown.

The same code can be used in multiple places to show more than one ads in a page as well.

Why This Responsive Adsense Ad Does Not Violate Adsense Policies?

Google mandates the following in their Adsense publisher policy.

Once you've generated your code, we ask that you do not alter any portion of the code or change the layout, behavior, targeting, or delivery of ads for any reason, unless specifically authorized to do so by Google.

Our JavaScript trick does not actually modify the Adsense code at all. All we are doing is to detect the display area size and use the exact Adsense code for the ad unit that would fit the area. Hence it does not violate any adsense policy.

Note: Thanks to +Amit Agarwal for the original concept.

Also Read: Why you should use the new 300x600 adsense unit.

This story, How to Add Dynamic Responsive Adsense Ads in Any Website., was originally published at Skipser.

What do you do when you want to add symbols like smily, copyright, trademark etc while typing in documents or posting to Facebook, Google+ or even Twitter? I bet you would just try remembering a web page where you have seen the symbol, open it and do a copy-paste. But instead of the long route, you can actually type these characters yourself directly from the keyboard.

The trick is to key in the characters using their ASCII code. What you do is to press the left ALT key and type the corresponding ASCII number using the numeric keys keeping the ALT key pressed.

If you are using a laptop or a keyboard where you don't have dedicated numeric keys on the right,  you can use the number keys on the top. But first make sure you press "Num Lock" key and the number lock indicator (green led in most cases) is turned on. Here's a list of most useful ASCII symbols you might find handy.

HTML was designed considering ASCII characters right from the start. That means you can key in these symbols in any web based text input including your favorite Facebook, Google+, Twitter and others. Please note that the appearance of the symbols will be different with different fonts just like text. That means you can vary their size by simply increasing font size or even changing the font family as well.

This story, How to Type Symbols Like Smiley, Copyright, TradeMark etc Using Keyboard., was originally published at Skipser.

Comments not only lets you connect with your readers, but also brings in more authority to your blog. A blog with hundred comments is surely something a lot of others have found interesting and makes a visitor to stick around rather than browsing away. And Google has made it better by allowing you to bring Google+ comments directly into your Blogger blog.

That means instead of using the standard comment box and the infamous captcha, your readers can add in their comments directly using their Google+ accounts. There are a lot of advantages to this.

• Captcha checking is fully gone making commenting more fun.
• Commenting with Google+ indirectly means commenting using a Gmail id and not many people would take the risk of spamming only to loose their Gmail account.
• Google+ commenting tool also displays all comments from the Google+ universe related to your content. That means if Jack shares your post and Jill adds a comment on Google+, Jill's comment will automatically appear on your blog post as well.
• Comments made from your blog also get shared to the commenter's profile in Google+ bringing in more readers.
• Google will index all Google+ comments making your post look updated with every new comment - a nice SEO feature added with zero effort.

Adding Google+ commenting to blogger blog.

First go to blogger.com and select your blog. On the left menu, select the new Google+ option. Now click on the "Get Started" button that will come up on the right.

Your blogger profile will now get replaced with your Google+ profile. This indirectly adds authorship data for your blog in case you have not already done. In the next page, make sure to tick the "Use Google+ comments on this blog" and Google+ comments are now enabled for your blog.

I am using a custom template and the tool doesn't show up.

If you are using a custom blogger template instead of one provided by blogger, chances are the commenting tool won't show up. The reason being the appropriate placeholders not available in your custom template. But no worries. You can add the comment placeholder code to your template yourself. Simply edit your template and add the following lines where you want the commenting tool to appear.

<div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data viewtype='data:post.viewType'/>

This story, How To Add Google+ Comments to Blogger Even For Custom Templates., was originally published at Skipser.

You could be a photographer sharing your latest shot or a blogger publishing some cool new wallpaper. With all the different screen sizes to satisfy (laptop, mobile, tablet ...etc), you end up making a set of images catering to these different screens. But when it comes to sharing, you always share a thumbnail of the original.

Here's a better way - Instead of sharing the original image directly, share a screenshot preview of  how the image will look like in different screens. So now, instead of your viewers having to imagine how it would look like on a tablet or mobile, they readily have it before their eyes. And better preview means more likes/shares. Something like this -

Creating Multi Screen Preview of Image.

You would have seen similar previews in many professional blogs and websites, but there is always a skilled artist who is paid to create them using tools like Photoshop. This free and easy to use "Multi Screen Preview Tool" will let you create such previews yourself with a single click. Using the tool can't be easier

1. Fist open the Multi Screen Preview Tool in your browser.
2. Copy paste the URL of your image in the image field.
3. Click the generate button.

The tool fetches the image from the URL and displays the preview after creating it. You can choose from two different sizes - 600px and 900px (width). The preview image will have the full image in the background and the same displayed on a monitor, laptop, tablet and a mobile. For the smaller screens (mobile and tablet), the landscape image is scaled to fit the height. That means a portion of the image will be shown in these screens and you can choose which portion of the image - center, left or right to show using the drop-down option.

There is a catch though. Although the preview looks like a single image, it is actually a set of images re-sized, scaled and properly laid out in a template one over the other using CSS and Javascript. That means you can't just right click and save the preview image to your disk. You can either hit the "print screen" button and cut out the preview using an image editor like MS Paint or use a browser extension like Awesome Screenshot Plus to save the preview portion directly from the browser. But that should be child's play for almost any computer user.

HINT: The tools works best on chrome. The preview is created by placing scaled images in appropriate positions and chrome browser has the best scaling algorithm maintaining curves in the image properly.

So next time you put your camera to work, do try out the "Multi-Screen image preview" for sharing and let me know if you liked it.

This story, A New Way to Share Your Wallpapers With A Multi Screen Preview., was originally published at Skipser.

When you embed a YouTube video in your web page, did you know a visitor's browser would have to download an extra ~400Kb just to render the player alone?

That's 7 files for a flash based player and the number is 12 if a HTML5 player is used - something not really under your control. These include image files, css, xml and javascript and the bad part is - they will always download even if the visitor doesn't actually play the embedded video. The extra weight(~.4Mb) and 7-12 additional HTTP requests only adds to slowing down your pages indirectly.

Not to mention, your site's overall loading time also goes high in the eyes of Google and other search engines where it is a significant factor for calculating page rank.

Embed Youtube Videos Google+ style.

Have you noticed how Google plus posts show YouTube videos with a slightly different play button? Well, that's a cleaver trick by Google+ where instead of embedding the full YouTube player, only a preview thumbnail of the video is displayed with a custom play button on top to make it look like a player. And when you click over it, the image is replaced by the standard YouTube player which will then load and play automatically.

That means any player specific resources are loaded only once a visitor actually chooses to play the video and not otherwise.

You can also use the same technique in your website to shorten page loading time while embedding YouTube videos. And here's a trick that will let you do it without changing any of your existing code.

Making YouTube Video Iframes Like Google+

First, add the following line in the header section of your page

<script src="https://skipser.googlecode.com/files/gplus-youtubeembed.js"></script>

Next you need to call the "optimizeYouTubeEmbeds" function that will make your YouTube video embeds like the Google+ one. To do that, add the following code just before the ending </body> tag of your page.

<script type="text/javascript">optimizeYouTubeEmbeds()</script>

That's it. Now all YouTube video embeds in the page will load only on-demand. The code has been tested on IE, Firefox, Chrome and Opera.

Here's a working example.

How It Works.

The "optimizeYouTubeEmbeds()" function quickly scans to find out all embedded YouTube iframes and replaces them with the video preview image & play button just like Google+. Since it gets called right at the end of the body, the browser doesn't get a chance to download the player or any associated resources while rendering the page.

Adding this small piece of code will take away ~.4Mb weight out of your web page and improve user experience. If you are interested in knowing more about the code, here's where it is explained. Please do like/follow/plus me if this was useful to you. And as always, if you encounter any problems, please do let me know as comments.

IMPORTANT: If yours is a high traffic site, make sure to download a local copy and use that instead.

This story, Embed YouTube Videos Like in Google+ And Reduce Page Load Time., was originally published at Skipser.

There are two cases when you would want auto-resizing YouTube videos -

1. You are changing your site to a responsive layout and all existing content should self-adjusts according to the browser window size.
2. You are creating a new site and want all new embedded videos to be auto-resizing.

Google for "auto resize youtube video" and you will find lots of sites explaining the traditional solution - Wrap the iframe in a new div with a bottom padding of 56.25% and make the height & width of the iframe to be 100%. There are three problems with this solution -

1. You need to find and change all your existing video embeds and change the code.
2. For new videos, you need to remember to insert them in the new format.
3. The "56.25%" is actually the aspect ratio of the video. Although most newer videos fall in this category, others would not display properly.

Making Youtube Videos Responsive Without Changing Code.

Here's the ideal solution where you need not change any existing code. All you need to do is to insert a few lines of javascript and all your embedded YouTube videos will automatically become responsive.

REQUIREMENT: This javascript based solution requires Jquery. So please add the following lines in your header first.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Will adding Jquery decrease my site performance? Well, not really. The minified and zipped Jquery file only has a total size of around 31Kb. Also since Jquery is loaded from Google directly, chances of the visitor's browser already having Jquery in it's cache via some other site is very high. In short, Jquery is really light and would not need to be loaded again for your pages most of the time and the performance impact is near zero.

Now you need to load the actual code which makes the embedded videos auto-resizing. There are two ways to do this.

1. Include a javascript having the magic function in your pages. You can add the following lines in your page header.

<script src="https://skipser.googlecode.com/files/youtube-autoresizer.js"></script>

2. If you are not comfortable adding yet another javascript, you could just copy the content to one of your own .js files. Here's the code you need to copy-

/*
 * Youtube video auto-resizer script
 * Created by Skipser.com
*/

$(document).ready(function() {
  if(typeof YOUTUBE_VIDEO_MARGIN == 'undefined') {
    YOUTUBE_VIDEO_MARGIN=5;
  }
  $('iframe').each(function(index,item) {
    if($(item).attr('src').match(/http(s)?:\/\/www\.youtube\.com/)) {
      var w=$(item).attr('width');
      var h=$(item).attr('height');
      var ar = h/w*100;
      ar=ar.toFixed(2);
      //Style iframe    
      $(item).css('position','absolute');
      $(item).css('top','0');
      $(item).css('left','0');    
      $(item).css('width','100%');
      $(item).css('height','100%');
      $(item).css('max-width',w+'px');
      $(item).css('max-height', h+'px');        
      $(item).wrap('<div style="max-width:'+w+'px;margin:0 auto; padding:'+YOUTUBE_VIDEO_MARGIN+'px;" />');
      $(item).wrap('<div style="position: relative;padding-bottom: '+ar+'%; height: 0; overflow: hidden;" />');
    }
  });
});

If you want to add some margin on the sides of your video, just add the following line immediately above the javascript line or the code and replace "10" with the margin you need.

YOUTUBE_VIDEO_MARGIN=10

How it works.

On loading, the script finds all embedded YouTube video iframes in the page and replaces them with a resizable version dynamically. For instance, here's how an embedded YouTube <iframe ..> tag would look like after conversion -

<div style="max-width:560px;margin:0 auto; padding:5px;">
  <div style="position: relative;padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe width="560" height="315" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/hzixp8s4pyg?showinfo=0" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; max-width: 560px; max-height: 315px;"></iframe>
  </div>
</div>

As you can see, the iframe gets wrapped insided a <div> element with a bottom padding equal to the exact aspect ratio of the video calculated by the script. The video will show in the original size initially and if the browser width is reduced,it will resize itself accordingly. You can check out this demo page showing the script in action.

Also See: How to backup your entire YouTube video channel to Google Drive.

This story, Make YouTube Videos Auto-Resize in a Responsive Site Layout., was originally published at Skipser.