How To Implement Google Adsense In Responsive Website

This objective of this post is to explain how to add Google Adsense to a responsive website without violating Adsense policies.

First of all, what is a Responsive design?

Let me take a minute to explain this. Previously, Internet was only accessible using a proper Computer (i.e PC or a Laptop). But today, with the outburst of Smart phones and Tablets, Internet can be accessed and is accessed using different screen sizes and different resolutions.

But the question is, Is the web ready to adapt to these new screen sizes? The answer to this is Responsive website design.

A responsive design of a website is one which can adapt to different screen resolutions depending on what device you are using.

Getting back to the subject of this thread –

Without implementing a responsive code for adsense, My website would look as shown below (if i load the site by re sizing the browser window).

adsense-cropping-violation

Case 1 – Non Responsive: You can see that the leaderboard ad unit (728 x 90) is getting cropped on the right side. The ad is about 728 pixels wide but only about 500 pixels are being displayed on screen. This kinda looks untidy.

Case 2 – Responsive: If my website was responsive, It would resize the advertisement on its own. But that would violate Adsense policies as stated below –

5. Prohibited Uses. You shall not, and shall not authorize or encourage any third party to: (i) […] (ii)edit, modify, filter, truncate or change the order of the information contained in any Ad, Link, Ad Unit, Search Result, or Referral Button, or remove, obscure or minimize any Ad, Link, Ad Unit, Search Result, or Referral Button in any way without authorization from Google[…]

So instead of re sizing or minimizing any advertisement, We have another option !

We can put if else clause and determine the screen size of the device which is trying to open the website. And accordingly display a proper advertisement.

Adsense Approved Code –

If the width of the device is greater than 800 then serve a leaderboad ( 728 x 90 ) ad, if its less than 400 then serve 300 x 250 ad. Else just serve 468 x 60 ad. The code for the same is given below:

Where you have to replace ca-publisher-id, ad-unit-1, ad-unit-2, and ad-unit-3 with the proper code from your adsense account.

And that’s it, you’re done !

How to Create a Lightbox using CSS and Javascript

First of all, What is a Lightbox?

You can call it Lightbox, Greybox or Thickbox. These all mean the same thing. Basically Lightbox is an effect that fades the page in the background to show you new content in the foreground.

In this post we will learn how to open up a Lightbox on the event of a mouse click. So basically when you click certain content on a webpage, it will trigger the light box to appear in the foreground.

I had first created the lightbox effect for a website which i designed for a state level project competition. You can see it in the screenshot below. The before and after events are displayed in the screenshot below.

lightbox-with-css-javascript

Before: That is how the web page looks like before clicking/triggering the lightbox code.
After: That is how the web page looks like after clicking/triggering the lightbox code.

There are tons of Lightbox codes available over the Internet with great features as well as limitations. Most of them require heavy use of javascript, while some may require additional frameworks to be installed.

But the code which i am sharing in this post is the simplest version and easy to understand. So lets begin,

First lets discuss about the CSS Code

The dark_overlay class is the layer that will add a slightly transparent overlay on the current webpage. It’s going to apply a black 80% opaque background over the current web page after the lightbox is triggered. (look at the z-index).

The white content class is the layer which will create a box in the foreground over the transparent overlay, which is called the lightbox. It’s a white layer to be placed over the black_overlay layer (look at the z-index, greater than the black_overlay one). Also the overflow allows you to have a scrollable content even after the lightbox is triggered.

1) Now add the following code inside the body tags of your HTML Document:

2) Once you do that you will need to add a trigger (an event which will open lightbox). For example, a trigger can be On Mouse Click, or On Page Load.

So add this code just below the opening body tag ( <body> ) :

3) Remember to include the code to close the Lightbox, for example:

Replace the division of id = light, which was used in the part 1) code with the following code:

Combining all parts of code, We get :

You can find the Live Demo of this CSS Lightbox by Clicking over Here

This is a very basic lightbox. And i hope this might be useful for those who are developing their own lightbox for the very first time.

Also i will try and customize the looks of this lightbox in the next post.  So keep checking this post, Since i will be adding the links to the customized css lightbox over here.

Wamp Server – The Service Has Not Been Started

Today i am going to talk about a WAMP (Windows Apache MySQL PHP) Server error.

This error is quite annoying as there’s no proper solution to it anywhere over the internet.

I searched a lot over the WAMP forums but i couldn’t find any proper solution to this. Every thread was kind of confusing and misguiding.

About the error: When i try to put WAMP Server Online, it returns an error as follows: Could not execute menu item (internal error) [Exception] Could not perform service action: The service has not been started.

This is a very common error for Windows 8 users. I started facing this error since i switched to Windows 8. So if you are a Windows 8 user, this post is for you.

Below is a step by step guide to solve this problem. And i am very sure this is going to help you guys. If not, just drop a comment on this post, I will reply as soon as possible.

1) Putting the Server Online

Run your WAMP Server and try to put the server online as shown in the screenshot below.

put-online

2) An Error shows up

Putting the server online will give you an error as shown below

error

3) Port 80 is used by which service?

The error shows up because port 80 is used by some other service on your computer. So what you need to do is click on WAMP Tray icon, then select Apache > Service > Test port 80.

test-port-80

4) Port 80 is actually used by IIS

Once you click test port 80, you will discover that the port 80 is actually used by IIS (internet information services). This is a microsoft service. And in Windows 8 this service is running by default in the background. So port 80 is not available for WAMP server. And this causes the error with which we are dealing in this post.

port-used-by-iis

5) Find IIS Service in Task Manager

Now what we are going to do is find the IIS service and stop it. So port 80 will get vacant for WAMP Server.

Open up the Task Manager (CTRL+SHIFT+ESCAPE) and click on Services tab.

task-manager-services

Then find W3SVC Service, which is described as World Wide Web Publishing Service and has a group ‘iissvcs’ as shown in the image above. (The second last service in the image above)

6) Stop the Service

Right click on the W3SVC service and click Stop.

stop-iis-service

7) Repeat Step 3

On repeating step 3, You might get something like this:

port-80-not-used

8) Restart WAMP Services

Since IIS service is stopped and port 80 is vacant, Now you can run WAMP Services.

Click on WAMP tray icon, Click Restart All Services.

restart-all-services

9) Finally put the Server Online

( Notice the WAMP Server Tray icon turns Green on your Taskbar. )

Click on WAMP tray icon, Click on Put Online.

put-online-finally

10) Open localhost in your browser

Click on WAMP tracy icon > Click on Localhost.

select-localhost

11) You are done !

And you will see your WAMP Server is working perfectly fine.

localhost in wamp server

Do i have to turn off IIS every time to run WAMP ?

If you need IIS and WAMP, then yes you will have to turn off one of them to use the other.

But if you don’t need IIS, then you can shut it off forever.

If you are asking me – How to turn off IIS forever then i will answer that in some other post. Because at this moment its 1:20 AM and i am too sleepy. So see ya. Good night. If you have any questions, post them below.