Tag: Google | IT Nota

How to Make Google AdSense Responsive

With many people accessing websites from non-traditional desktop nowadays, it’s important to incorporate responsive design into your website. In the same way, Google AdSense can also be tweaked to adjust to the screen size of your visitors.

There are many approaches of how to make Google AdSense responsive without violating Google AdSense policies. The easiest thing to do is to let Google do everything by creating a new Responsive ad unit, however this is still in beta.

Google AdSense Responsive Ad Unit (BETA)

I like to use a different approach that’s based on JavaScript modification demonstrated by Amit Agarwal of Labnol.org. It’s confirmed that this modification was approved by Google so it does not violate AdSense policies.

If you review Amit’s alternative approach, the slight difference here is I’m using two ad units and whichever ad unit is picked is based on the set width (in this example it’s 530px) of a div container (“content”), not from the whole body.


<script type="text/javascript">

     <!-- CHECK DIV ID/CLASS NAME -->

     ad = document.getElementById('content');

     <!-- END CHECK DIV ID/CLASS NAME -->

     adWidth = ad.getBoundingClientRect().width ? ad.getBoundingClientRect().width : ad.offsetWidth;

     <!-- START EDIT HERE -->

     google_ad_client = "##your-google-ad-id##";
     adWidth < 530 ? google_ad_types = ["250", "250", "##ad-slot-1##"] : google_ad_types = ["300", "250", "##ad-slot-2##"];
     
     <!-- END EDIT HERE -->
    
     document.write('<ins class="adsbygoogle" style="width:'
          + google_ad_types[0] + 'px;height:' 
          + google_ad_types[1] + 'px" data-ad-client="'
          + google_ad_client + '" data-ad-slot="'
          + google_ad_types[2] + '"></ins>'
          );

     (adsbygoogle = window.adsbygoogle || []).push({});

</script>

<script async 
     src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>

This snippet was created to use ad unit with the size of 300×250 and 250×250. You need to change the parameters on the highlighted line. At the very least, you need to use your Ad Sense publisher id, and the slot id of both ad units.

The “content” ID attribute is based on Genesis Framework (with Genesis 2, this is true only if you still use the XHTML markup. If you use HTML5, refer to the post on how to add back the ID attribute). You can leave it unchanged if you use Genesis Themes, but it’s always safe to double check your element id name and change it accordingly.

Caveat

This solution does not auto-refresh. So if you access load the page on a tablet and rotate the orientation, the Google ads that’s served the first time the page load will stay until the next page refresh. But I don’t find this to be a major problem as visitors will still see the ads except maybe not with the correct sizing just for that page.

My Experience with Samsung Chromebook

Having been on the fence about Chrome OS for quite some time, I finally took a plunge and got a Samsung Chromebook. I chose Samsung based on several criteria. The laptop has to be lightweight and has enough power to do my work online. The work activities include reading and writing email, taking notes using Evernote and drafting blog entries either on Evernote or directly on WordPress. Last but not least, this notebook has to have a low-price. This last point is very important due to my plan to have it stand-by in my car, so I can use it everywhere I go and if it’s stolen or damaged. I won’t cry too much over it. A good price point of laptops under $300 or lower would be best.

After some searching, the only way I could get the best bang for the buck based on the criteria I have would be to get a Google Chrome OS notebook instead of a Windows notebook.

Here’s a quick comparison of several Chromebooks with similar price points from Amazon.com:

The major specs of all these four notebooks are very similar, the only obvious difference is the price and weight. I definitely did not want any notebook more than 3 pounds and that automatically eliminate the last two from the list. So between Samsung Chromebook (Wi-Fi, 11.6-Inch) and Acer C720 Chromebook (11.6-Inch, 2GB) or Acer C720 Chromebook (11.6-Inch, 2GB & 32GB SSD) (not shown in the comparison table) it was a pretty tough choice to make.

I went with Samsung based on the weight, form factor, and customers’ rating. I don’t think you can go wrong with either choice though. These may be the two (or three) best chromebooks in its price range.

The Experience

As expected, the unit is very light. At 2.38 pounds (1.08 kg), it’s the same weight as an 11-inch MacBook Air. Yet it doesn’t feel it’s cheaply built so it’s very convenient to carry around. In fact, my typical usage would be I set a personal hotspot from my cell phone, then connect the Chromebook to it and I’m good to go.

The size is also very compact. Here’s a quick size comparison with a 13-inch MacBook Pro 2013.

With only 10 seconds to boot up, Chrome OS boot time is lightning fast. Most of the time you probably would use sleep mode anyway so it’s instant “on” when you open your laptop.

As far as application is concerned, many of the Chromebook apps are available as a Chrome Extensions, so whatever you may need, if they’re not installed by default just search for it on the Chrome Web Store. There are quite a few very good applications found on the Chrome store are available for free.

When fully charged, the battery can last a little more than 6 hours, but I found that this is a bit exaggerated. The reality is going to be much less depending on how you use your laptop.

The feel of the keyboard when you type is nice although it’s a bit on the lighter side. However, compared to other notebooks in its price range (including Windows based notebooks), this one beats the competition.

What’s Not to Like

Keyboard shortcut is counter-intuitive (e.g., CTRL-ALT Up-Arrow for Home), especially if you’re already used to the shortcuts on Windows and Mac OS, but this may be just a matter of getting used to it.

I found the battery’s drained a bit too fast even when in a sleep mode. My MacBook Pro can be put on stand-by mode for almost a week with its battery still on 100%. I’m not going to test exactly how many days for each battery to be depleted, but it’s just to give you an idea. That the Chromebook’s battery does not last long even in sleep mode.

The last Wi-fi connection is not saved. Every time you login, it doesn’t know which network you connected to last so you have to manually re-pick which wifi you want to connect to before you can use the computer. It’s not a deal-breaker but rather a small annoyance to me.

Big Brother Watching?

When you use your notebook for the first time, you have to agree on the fact Google tracking your activities using the device. Microsoft and Apple might be doing the same thing, but the fact that you have to be connected to use this Chromebook gives a stronger feeling of “being watched.” This might not be a big deal for most people, but it’s always good to be aware about this.

Conclusion

It’s very important that you know what to expect from this machine. It’s very capable for most users, especially if you’re a heavy Google Apps user and always on the go, but don’t expect to do something that requires extensive graphic or photo editor such as Photoshop or Lightroom (yet). I use this Chromebook to do email, take notes via Evernote, surf the web which includes online shopping and blogging. As my emergency notebook, it serves the purpose. And just for that, this notebook can simply be the best chromebook laptop for its price.

This Chromebook review is very specific from my experience with Samsung brand. Hopefully it will help others to make a decision whether a notebook with Google Chrome OS is (or is not) suitable for them.

All links to Amazon are affiliated links.

How to Use a Custom Email Address in Gmail

If you want to use Gmail with custom domain to send out email (i.e., [email protected]), here are the steps you can follow to set it up.

This Google custom email tutorial will demonstrate the use of popular webhosting companies such as SiteGround and Hostgator, but it applies to any other webhosts services that provide SMTP services.

Assuming an email account is already setup, if your webhosting company uses cPanel, you can find the instructions by clicking on the drop-down and select Configure Email Client.
As a new page opens up, scroll to the bottom and look for Manual Settings. Copy the Mail Server Username and Outgoing Mail Server (SSL) information. For the Outgoing Mail Server, typically if you use SiteGround, the server would look like secure####.sgcpanel.com. Or Hostgator, gator###.hostgator.com. Bluehost would look something like box###.bluehost.com.
Now login to your Gmail account and go to Settings on the top-right corner.
Select Accounts, then click on a link Add another email address you own.
On the next dialog box, type in the name you want to be displayed every time an email sent out from that address, and the email address you created earlier.
While we highly recommend SiteGround for your webhosting due to its reliability and speed, this step was already illustrated using Hostgator. But whether you use SiteGround, Hostgator or Bluehost*, the step is exactly the same. Make sure you paste the information copied from Step 2 for the SMTP Server and Username. Click Add Account>> after you’re done.
Google will send a verification code to your new email address, which you need to enter on the verification window. Once you click Verify, your new email address is ready to use.

Now, whenever you compose a new email, you have the options to use either your original gmail domain name or the new email address with your custom domain.

You can repeat the steps above to add more than one custom email address.

Spending the extra effort to setup domain email with Gmail can make your email look more professional for your business. Hope it helps.

* Due to performance issue we have experienced with Bluehost, we can no longer recommend it as a webhost. Instead, we highly recommend SiteGround as a webhost. We’re very impressed by its performance and reliability that we added SiteGround as our affiliate.

How to Activate Google 2-Step Verification

With a huge increase in email accounts getting hacked, you need more than just a strong password to protect them. Fortunately for Gmail users, Google provides a “2-step verification” that will tell you by either sending a text message to your registered cell phone if someone tries to gain access to your email. This feature has been out for a while but many people are still not aware about it.

Google 2-Step Verification is actually very easy to setup and doesn’t take too much of your time, you just need to link your Gmail account to your cell phone. Just follow these steps below to activate it:

1. Login to your Gmail and on the top right-hand corner, click on the little arrow next to your name and select Account link.
Gmail Account Setting

2. On the Accounts page, click on Security.

Accounts Tab

3. You will see your 2-step verification status. Click on the Edit button.

Security Tab

4. And you will see the splash screen to Start the setup. Click on the blue Start setup » button.

Start Setup Screen

5. Enter your cell phone number in the textbox and click on Send code button. You will receive a 6-digit verification code within a few minutes. If you’re outside the U.S., make sure you select your country of residence by clicking on the drop-down arrow next to the flag icon in the same textbox with the phone number.

Setup Phone Screen

6. Enter the code you receive from your cell phone into the Enter verification code box and click Verify.

Verify Phone Number

7. You can either check the Trust this computer box or not. Since I’m using a home computer, I want to trust my computer. Don’t check it if you login from a public or shared computer. Click Next » button.

Trust this Computer

8. Once you click Confirm button, your 2-step verification should be activated now.

You will see a notice 2-step verification has been turned on for this account on the top part of your Gmail screen. You should also receive an email confirmation about your 2-step verification.

Please remember, virtually there is nothing that cannot be hacked, but at the very least by activating this verification, your Google account should be more secure than if it was only protected by a password.

How to Obtain WorksheetId Within a Google Docs Spreadsheet

If you try to save form data to Google Spreadsheets and you have more than one worksheets, soon enough you’ll run into this issue trying to figure out how to get the id of the worksheet you need to update. While I don’t know how to obtain this id programmatically, there’s a practical way to do it and it should only take about a minute of your time.

Using the simple Sheet 23 in this Registration GDocs as an illustration, it’s obviously not the first and the only worksheet within the Google spreadsheet.

GDocs active worksheet

The first thing you need to do is just go to the File from the menu and select Publish to the Web…
GDocs - Publish to the Web

On the new screen that pops out, just follow these 4 steps as pictured below.

Select the sheet you want to obtain the id
Click on Start publishing button
Select either ATOM (recommended) or RSS from the Get a link to the published data option
If you choose ATOM, the link should come out in this format:
http://spreadsheets.google.com/feeds/list/[spreadsheet key]/[worksheet id]/public/values
Copy down the worksheet id from the provided link in circle. In this case, it’s the “ocz” but it may be different on yours (e.g., od4, od6, od8, and et cetera).

GDocs - Publish to the Web options screen

Unless you want to publish your worksheet now, you need to make sure you click back the Stop publishing button.

Click Close and you’re done.