Useful and interesting web sites

HTML5 canvas

2013-03-27T14:07:00.000-07:00

Canvas is perhaps one of those features of HTML5 which caused a great deal of stir among the web developers. In simple sense, canvas tag allows you to specify a region on your document where you can draw stuff. One thing to be noted is we have to use some sort of a scripting language (usually JavaScript) to interact with canvas. For today's article I'll assume you know the basics of JavaScript.

Creating a Canvas Element

Creating a canvas element is quite simple:


<canvas height = "200" width = "200" id = "canvas1" ></canvas>

It is advised to always give a height and width to canvas element. A id is also necessary as there can be more than one canvas element in a single page.

The above code is actually as far as only HTML will take us, for functionalities of canvas we gotta use JavaScript as mentioned earlier. Please bear in mind any subsequent codes seen in this article must be written inside script tag or an external script file.

Understanding the Context

When we draw something on canvas, we actually retrieve the "context" of the canvas and put stuff on it. Broadly speaking, there are two types of context, 2d (mostly used) and 3d (still experimental). We will use the 2d context. Our first job is to identify our canvas element and create a handler to its 2d context. We do this by the following fragment:


 var canvas = document.getElementById('canvas1');
 var ctx = canvas.getContext('2d');

We are first creating a handler to our canvas element (recall it had the id 'canvas1'), then we are retrieving its 2d context through the function getContext().

Basic Canvas Properties

Remember we grabbed the context just on the previous section? Now we are going to set some of its properties. First let's have a look at three basic properties:

fillStyle:
style to use when filling. We can specify CSS colors,gradients or patterns (defaults to black).
strokeStyle:
style to use when filling. Constraints similar to that of fillStyle.
lineWidth:
width of the lines drawn by our imaginary pen on canvas.

Drawing with colors and styles is a two step process. First one is to set the above properties. Other one is to perform the drawing operation i.e. calling the function which performs drawing.

Fill and Stroke

While dealing with canvas you'll find two versions of a function to create rectangles. these are fillRect and strokeRect ("Rect" standing for rectangle). What fill does is it creates the solid shape filled with the designated color/pattern, whereas stroke simply outlines the shape with that color. An example is presented shortly.

Before we append the following fragment to our code, let's have a look at the arguments that the fillRect or strokeRect takes:
x-coord, y-coord, width, height
The coordinates specify the position of upper-left corner of the rectangle, and width and height denotes the size of the rectangle. One reminder, the origin of the coordinate system is situated at the top-left corner of the canvas. Now we can append the following segment:


 ctx.fillStyle = 'tan';
 ctx.fillRect(10, 10, 100, 100);
  
 ctx.lineWidth = 5;
 ctx.strokeStyle = 'red';
 ctx.strokeRect(10 , 10, 100, 100);

First we chose the color tan and created a solid rectangle at (10, 10) having height and width of 100. Then we selected the lineWidth to be 5. Next we again selected a color, this time red; and stroked a rectangle at (10, 10) having similar dimensions as the previous rectangle. Notice although we have used colors as the property of fillStyle and such, we could have also used gradients or patterns, which is quite easily possible using CSS3.

Sample:

Sample code:

<canvas id="CanvasFill" width="120" height="120">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById('CanvasFill');
    var ctx = canvas.getContext('2d');
    
    ctx.fillStyle = 'tan';
    ctx.fillRect(10, 10, 100, 100);

    ctx.lineWidth = 5;
    ctx.strokeStyle = 'red';
    ctx.strokeRect(10, 10, 100, 100);
    
</script>

Drawing Lines

For drawing a line we are going to use four functions: beginPath, moveTo, lineTo and stroke. The function beginPath tells that we are going to create path. We move the imaginary pen to a location through lineTo function. Notice that by "moving the pen" I mean picking the tip of the pen up and then placing it down again at the designated coordinate. The function lineTo instructs to draw a line starting from the current point to th point passed as parameter of lineTo. But the line is actually not drawn unless we call the stroke function. Let's have a look at the following fragment of code:


  ctx.lineWidth = 1;
  ctx.strokeStyle = 'black';
  ctx.beginPath();
  ctx.moveTo(10, 10);
  ctx.lineTo(110, 110);
  ctx.stroke();
  ctx.lineTo(200, 110);
  ctx.stroke();

We are setting the line width to be 1 and the color of the stroke to be black. Then we call the beginPath function. We move our imaginary pen to a point, in this case the point (10, 10). In the next line we instruct to create a line from (10, 10) to (110, 110). And finally to ensure the line is drawn, we call the stroke function. Notice that we created another line from the point where the previous line ended. If we wanted to draw a line from a different point we would have needed to call another moveTo function.

Sample:

Sample code:


<canvas id="CanvasStroke" width="200" height="150">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById('CanvasStroke');
    var ctx = canvas.getContext('2d');
    
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'black';
    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.lineTo(110, 110);
    ctx.stroke();
    ctx.lineTo(200, 110);
    ctx.stroke();
    
</script>

Rendering Text

We can draw texts on canvas using fillText and strokeText functions. The arguments are:
text x-coord y-coord
Before calling these functions, we can also specify properties by assigning values to the font property of our context. The order in which these properties are assigned is:
font-style font-weight font-size font-face
The following code illustrates the complete method:


  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.font = "normal normal 24px Tahoma";
  ctx.fillText("Hello world", 10, 140);

Sample:

Sample code:


<canvas id="CanvasText" width="200" height="100">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById('CanvasText');
    var ctx = canvas.getContext('2d');
    
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = "normal normal 24px Tahoma";
    ctx.fillText("Hello world", 10, 40);
    
</script>

The canvas of HTML5 has a vast domain. In this article I've tried to point out just some of the basic ideas. From here I'd suggest you search the net for a bit more info. As always w3schools has a precise collection of more or less all the features of canvas. Besides this mozilla developer site can also turn out to be really helpful. Although at first canvas might seem a bit intimidating, it is actually quite a great tool to have at hand. Bottom line, this is by far the best light-weight option to create graphic objects on the fly.

Javascript disable right click

2013-03-20T14:23:00.000-07:00

In some situations some web admins think disabling a right click on their web page is a good idea.

The reason for disabling a right click could be to:

protect and hide source code

protect images on web page

disable copy and paste functionality...

There are opinions that disabling right mouse click is a bad practice and you shouldn't do it on your site (find out why here). It can prevent some novice users from stealing on your site but more advanced users will find a way (to get image or take a look on your source code).

In this article you will find how to:

disable right click on whole HTML web page using onmousedown event

disable right click on whole page using attribute inside body tag

disable right click on some part of HTML page

disable right click on image using javascript

Disable right click using javascript on HTML page

You can disable right click on your web page using javascript function which will show message box if right mouse button is clicked.

Here is a code:


    <script type="text/javascript">
        function catch_click(e) {
            if (!e) var e = window.event;
            var right_click = (e.which ? (e.which == 3) : (e.button == 2));
            if (right_click) {
                alert('Right clicking on this page is not allowed.');
                return false;
            }
        }
        document.onmousedown = catch_click;
    </script>

Brief explanation of code: When mouse button is clicked javascript function catch_click is called. If right button is clicked message box pop up and right click is canceled.

Disable right click on HTML page using body attribute

This method prevents context menu to appear when right click happened without message box on HTML page. It is very easy to implement.

You just need to add this attribute to body element:

<body oncontextmenu="return false">

Disable right click on only part of HTML page

On the beginning of this article it was said that preventing users from using right click is a bad practice. So if you want to protect something on your page maybe is better practice to protect only this specific element.

It is possible to use oncontext attribute on specific HTML element.

To better explain we will show the example with HTML table with two columns. We will forbid right click only on First column. On Second column right click is possible.

<Table>
   <tr>
    <td oncontextmenu="return false">
     First column (no right click)
   </td>
   <td>
     Second column
   </td>
  </tr>
</Table>

On td tag attribute oncontextmenu is added and set to "return false". So on First column right click is disabled.

No right click

Second column

Disable right click on image using javascript

You can disable right click on image using the technique described in previous chapter. Just add oncontextmenu attribute inside img element.

<img src="../PathToImage" oncontextmenu="return false" />

On the beginning of the article you can find image "No right click!" which can not be right clicked.

Keep Your Blogging Secure

2013-03-13T13:40:00.000-07:00

Blogging is an important outlet for many people. Whether they do it for business, for school, or simply as a way to fill their free time, the number of people who write blogs for one reason or another increases every day, and as the years go by, blogs will only become an even more central part of our culture and how we communicate.

But when writing a blog, it is important to keep your information secure. Surfing the internet is fraught with danger, and the process of publishing a blog only compounds the risks that the internet involves. So for bloggers who are interested in keep their online activity safe, here are a couple tips on how to manage risk and stay secure.

Keep Private Information Private

Remember, the information that goes on a blog is going to be forever public. Even if you delete your blog, there are websites like Google and Archive.com that scrape everything that is published on the internet and store it on their servers permanently. So consider what you want to be public, and what might better be kept private. There are no doubt many young people who are blogging today who will wish they had been more circumspect when the information they publish comes back to haunt them in the future.

But this isn’t only about the future. Being too forthcoming now can expose you to online predators who want to use your information against. The amount of information necessary to commit cyber fraud or identity theft can be surprisingly small. Be careful that you are not disclosing too much on your blog. If you do, strangers who come across that information can use it in all sorts of ways that can wreak havoc on your personal and financial dealings.

Protect Your Site from Viruses

Many people host their own blogs, either on servers they administer or with cloud-hosting companies. In these cases, their blogs can become vectors of online viruses without them even realizing it. They can inadvertently transmit viruses to their servers and websites without intending to. Those viruses are then passed along to their visitors. The best way to avoid this is to conduct all blogging activities over a VPN service , which will stop the transmission of viruses and prevent third-parties from injecting viruses into your online data. This not only protects you, the author of the blog, but it also protects all your readers from all potential harm.

Veronica Clyde is a dedicated writer at VPNServices.net – a website where you can read about VPN services and Online Security. She also loves to share VPN technology, Wordpress and Blogging tips.

Group pages for reporting in GA

2013-03-05T13:36:00.000-08:00

Ok, using Google Anlytics make a easy to find how many pageviews get your web site or specific web page.

But what if you want to know how many visitors get specific group of pages. For example you want to track only pages written in 2013 or just pages written by specific author or only pages about specific topic...

This article is a guide how to make report for specific group of individually picked pages from your web site.

To better explain how to make reports of specific pages in GA we will explain:

How to report only on specifically picked pages

How to report pages written in 2012 instantly

How to make customized report for year 2012

Track visits from all pages about some topic in GA

Maybe you want to know how many visits coming from some specific topic. For example how many visits drive topics about javacript.

If it is the case you can easily get report in Google Analytics with the number of visits for all pages on your site which include keyword javascript in title. Just follow instructions.

In Google Analytics click on Content --> Overview --> Site Content --> All Pages

Find and click link "advanced" next to the search bar

new container will appear, in third button choose Containing and in empty textbox type desired term. For purpose of this example it is "javascript".

click on "Apply" and you will get report for all pages on your site or blog which have term "javascript" in title

Track specifically picked pages on your site instantly in GA

Let's say I want to make a report for group of only two pages on my blog and those two pages are: http://interestingwebs.blogspot.com//2009/01/jscript-in-blogger-post.html and http://interestingwebs.blogspot.com//2009/06/javascript-in-external-file.html.

In Google Aalytics click on Content --> Overview --> Site Content --> All Pages

Find and click advanced near search bar

new container will appear, in third button choose Matching RegExp and in empty textbox type second part of URL of page you want to track. We want to track two pages so we can use or operator : |.

In our example it would be: "2009/01/jscript-in-blogger-post.html|2009/06/javascript-in-external-file.html".

click on "Apply" and you will get report for only two specific pages

Get visits report for all pages written in selected year with Google Analytics

It can be useful to find how many visit drive all pages on your site written in one year. For example I want to know how many visits get my pages written in 2012 for last month.

This can be done with Google Analytics but only if the year in URL of your individual pages. I use blogspot blog and year can be read from URL.

For example:

http://interestingwebs.blogspot.com/2013/02/how-to-make-clickable-picture-in-html.html

From this URL we can conclude article is written in year 2013 and in second (2) month (February).

So, if permalinks on your site are structured in similar way you can use this method to make reports based on year when article is published.

In Google Aalytics click on Content --> Overview --> Site Content --> All Pages

Find and click advanced near search bar

new container will appear, in third button choose Containing and in empty textbox type year in this case 2012.

click on "Apply" and you will get report only for two specific pages

Make custom report for posts written in selected year whch can be reused

Now you know how to group pages by specific criteria and make a reports for them. But it have no sense to every time you need such a report you must to create it from scratch. To avoid this you can make custom report which can be used later.

So here is example which will help you to learn some basic steps for creating custom reports. This example learn you how to create and use custom report which will report number of Pageviews for all pages written in 2012 year.

Find and click "Customization" in Google Analytics

click "New Custom Report"

in "General information" enter title, for example "2012 pages"

in Report content choose Name, Metric Groups and Dimension Drilldowns. For this example for Name type "2012 pages", for Metric Group choose Pageviews, for Dimension Drilldowns choose Pages.

in Filter tab set first button to "Include", second button to "Page"

Regex

2012

Save custom report and now you can see your Custom Report by clicking Custom Report --> 2012 pages

How to Make Older Browsers Compatible with HTML5

2013-02-20T13:40:00.000-08:00

In the past couple of years the web industry has seen a sudden boom in regards to HTML5. Although technically for the full specification to get approved we'll have to wait till the end of 2014, this is not stopping developers from writing codes in HTML5. Most, if not all, modern browsers have done a more or less good job in implementing the features of HTML5 (we all know which one doesn't!).

Unfortunately not all browsers have been able to implement all the new features that HTML5 is offering. So the developers often have to pay some extra care to make their code compatible with older browsers. In this article I'll try to point out some ways by which we can make older browsers compatible with HTML5. A little heads up though, this is about making browsers compatible with HTML5, not CSS3 (actually some aspects described are related to both, but our target is HTML5).

Getting to Know the Browsers

Before we get into making our code compatible and all that, we first need to have a clear idea on what actually the browsers can do. After all, what's the point of trying to teach someone what he/she already knows, right? Much to our advantage, there are some great sites which offer us considerable insight on browser features.

FindMeByIP
On this site you'll find several charts where you can see a list of HTML5 features (and also CSS3) and info about which browser supports what feature. You can actually do it two ways, you can go to fmbip.com, in which case you'll get the info on the browser you are visiting the url by; or you can go to findmebyip.com/litmus, in which case you'll get a list of info on opera, chrome, mozilla, safari and IE versions 6, 7, 8, 9.
CanIUse
This site also has a comprehensive listing of compatibility info (color coded, always helps). You can search for a particular feature or just skim through all that are listed. This is actually one of the sites I have been frequently visiting since I first started coding in HTML5 and CSS3.
HTML5Please
This site is a bit different than the previous two. It does not contain a pin pointed list of what each browser can do, rather it gives us suggestions about what measures we should take regarding various features: whether we should totally avoid, use backup (i.e. polyfills, more on this later), use with caution or freely use a particular feature. According to the front page of this site, the recommendations are based on the experience of web developers. So it can turn out to be really handy in practical usage.
Browsershots
Browsershots makes screenshots of your web design in different operating systems and browsers. Not really informative, but to have a quick glimpse of what our page will look in different browsers, quite an impressive site.
Spoon.net
I personally think this is an awesome site. The Spoon.net Browser Sandbox provides us a method of cross-browser testing. All we have to do is just click run for any browser from the given list to launch it instantly. By the way you have to have an account to use its feature, and guess what, account creation is free!

Now that we know we can thoroughly investigate abilities of various browsers, let's get them compatible with HTML5. One thing that you'll see in common in most of these methods is the use of JavaScript. Let's list our options first and then we'll start cracking them one by one.

Ways to Make Older Browsers HTML5 Compatible

Pure ol' JavaScript
html5shiv (also known as html5shim)
modernizr
HTML5 Boilerplate
Google Chrome Frame (especially for IE)

Before I proceed further, I'd like to make one thing very clear: using the above mentioned ways does not make our browser all of a sudden capable of implementing all the features that HTML5 offers, in most cases it just makes the browser recognize that there is a tag with a specified name. For example, using the first 3 ways you can make older browsers know that there is a tag named 'canvas', but you can't really perform actions which canvas really offers (note: I am saying HTML5 Boilerplate supports canvas because it actually makes IE render web pages using Google Chrome Frame, which happens to support canvas).

Custom JavaScript

This is the elementary way of letting the browser know what new tags we are going to use if it is not familiar with them already. Say for example we want to use the tag "header". This is a tag which IE versions prior to 9 don't understand. So here's what we can do:

   <!--[if lt IE 9]>
    <script type="text/javascript">
      document.createElement("header");
    </script>
   <![endif]-->

It goes without saying that we have to place the piece of code between the "head" tags. The code snippet is quite self explanatory; even then, let's have a quick look at it. At the very first line we are starting a commented section, which basically says if the browser is less than IE version 9, interpret the following code; otherwise ignore what's in between the "if - endif" tags. Inside the script tags, we just have to call the createElement() function with the appropriate parameter. As an instance, if we also wanted to use "nav" tag we would have added the statement document.createElement("nav") in between script tags.

html5shiv

As stated before, it's also known as html5shim. So what is a shim? It is an application compatibility workaround (for those of you who have already googled it, yup, I took it from wikipedia). html5shim is one of the most popular polyfills (remember I stated the term "polyfill" previously? here it comes!). Paul Irish gave a simple definition of polyfills. If you are wondering who is Paul Irish, just know that he is sort of a front-end wizard in web industry. According to him polyfill is “a shim that mimics a future API, providing fallback functionality to older browsers”. You can download html5shiv here.

In case you are interested in technicalities, html5shiv sort of works by following the first method described i.e. creating element through JavaScript. After you download it, all you need to do is include the following snippet inside "head" tag:

   <!--[if lt IE 9]>
    <script src="dist/html5shiv.js"></script>
   <![endif]-->

modernizr

A really worthy name, it does make us modern (at least in regards to front-end development, that's for sure!). The best place to learn about modernizr is its official site. But don't worry; I'm not leaving you empty-handed. In short, what modernizr does is perform feature detection first. Note that I said "feature" detection, not "browser" detection. That basically means it finds out what our browser can do, not what browsers we are using. It then attaches necessary classes to our "html" tag. Say for example our browser does not support "canvas" tag, so a class named "no-canvas" will be added to our "html" tag. In the opposite case the class added would have been "canvas". So what do we do to use modernizr? Same as before, we download a copy of modernizr.js (you can find a link in the official site) and add the following code inside "head" tag:

   <script src="js/modernizr.js"></script>

It's worth noting that we can use modernizr to detect feature within our JavaScript, such as:


   if(Modernizr.geolocation){
    
   }

HTML5 Boilerplate

This is what I'd like to say is the ultimate blueprint. The package contains modernizr and jquery library. It also has normalize.css (I left out normalize from previous descriptions as it is related to CSS). You can find a link to download html5boilerplate from its website. Once downloaded, if you explore the folder you'll find all the files I've previously mentioned. The index.html is where your html goes. To simply define, this is a template for implementing HTML5.

Google Chrome Frame (Abbreviated as GCF)

For those of you who are really frustrated with IE, I saved the best for the last. Google Chrome Frame is simply a plug-in for IE which lets it render a webpage the same way google chrome would. Of course the downside is you can't use the features not supported by google chrome, but trust me, the amount of such features is negligible compared to IE. As far as I know, chrome ranks the second in regards to adopting HTML5 features (Maxthon being first). You can check the current standings from the site html5test. We basically have to do two things to make a page be displayed using Google Chrome Frame in IE.

Firstly, we have to make sure that the viewer's IE already has the plug-in installed. Frankly speaking, there is no way to force the user to install GCF, but at least we can prompt the user to install it. The developer's site chromium.org gives a way to use a JavaScript file named "CFInstall.js" which exactly does that. You can find an example of using "CFInstall.js" here. For your convenience I'm presenting the code below:

<html>

<body>
 <script type="text/javascript" 
 src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>

  <style>
  /* 
  CSS rules to use for styling the overlay:
   .chromeFrameOverlayContent
   .chromeFrameOverlayContent iframe
   .chromeFrameOverlayCloseBar
   .chromeFrameOverlayUnderlay
   */
   </style> 

   <script>

   // You may want to place these lines inside an onload handler
   CFInstall.check({
       mode: "overlay",
       destination: "http://www.waikiki.com"
            });
   </script>
   </body>
   </html>

Secondly, we have to give instructions to our page to use GCF. We do this by adding the following simple meta inside "head" tag:

   <meta http-equiv="X-UA-Compatible" content="chrome=1">

HTML5 Cross Browser Polyfills

Remember I said taking certain measures as stated above will not actually make our browser able to use all the features provided by HTML5, but rather make our browser knowledgeable on the fact that there are certain tags? For those of you who became heartbroken, take a look at this site.. It provides a list of fallback options for HTML5 features.

Before I conclude I'd like to mention one thing. HTML5 is gaining popularity at a very high rate, and the browsers are also catching up nicely. After a few years I think there won't be the concept of making browsers "compatible with HTML5" (and sadly my so thoughtful article will become obsolete). But till then, we certainly have to keep our eyes open and take necessary measures.

Using Images to Make Your Pages Pop

2013-02-14T02:51:00.000-08:00

So, you've set up a blog, invested in some quality WordPress premium themes to make it look amazing, and now you're ready to add some images. Adding images to a blog post is quite simple; adding quality images, however, is something else altogether.

Cell Phone Cameras

With the advent of cell phone cameras, suddenly everyone's a photographer. Whether it's blogs or social media pages, tweets or whatever, you can't swing a run-on sentence without hitting a camera-phone pic. What's wrong with that? A picture paints a thousand words, doesn't it? Exactly! And if you post a fuzzy, poor quality cell phone picture, the word that's going to come across loud and clear is amateur!

Poor Resolution

Cell phone cameras are great; you can take candid shots and send them out to friends and family almost instantly. These images are great for viewing in the window of a cell phone, but probably won't look as good blown up on a large computer screen. Technology is improving all the time, but by and large, most cell phone cameras have poor resolution and not a lot of great features.

Why More Resolution is Better

Your photos should have at least 5 megapixels of resolution, and 10 is even better. While some will argue that you don't need so much resolution unless you intend to blow your photos up into posters, the added resolution allows you to crop to your heart's desire. If you start with a 10 megapixel photo and crop out 50 percent of it, what remains is a basically a 5 megapixel photo. You might decide you only want one face out of a whole crowd, and starting with higher resolution will allow you to crop it out and enlarge it and still have a decent photo.

Crop, Crop, Crop Your Photos

Cropping sets the professional apart from the amateur. In professional artwork, photos are seldom used as they are taken. Don't be afraid to crop out the extraneous detail. Cropping a photo puts more emphasis on the subject, and allows you to frame it more clearly. Cropping also allows you to get rid of that extra arm, shoulder, or half a person on the edge of the photo. Done artistically, cropping can also make your photos look more edgy and modern. Another consideration is cropping to fit the layout of your WordPress theme where you want to post the image.

Adjust the Lighting

Whether you use a professional program or simply the software that came with your camera, you should always adjust lighting levels, brightness, contrast, hue and saturation. Even in "auto" mode, most point and shoot camera photos will need light and color adjustments for optimal image results. Take some time and play with the results. Changing the hue can give your image a cooler or warmer look, and increasing the saturation can make the colors pop.

Bag the Flash

Use flash sparingly. A good camera will take photos quite well without a flash. Using flash tends to white out the picture. Dark photos can be lightened; the information is still there in the darkness. Black is rarely truly black. The reverse is not true for white, however. White in a photo means lost information. Even the best editing tools cannot bring it back.

Image Stabilization

Sometimes referred to as "anti-shake" or "blur reduction," this feature is a must if you're not using your camera on a tripod. Even the steadiest of hands can shake imperceptibly, and most photos are taken "on the fly" with subjects and cameras all moving at once. Since you're not a professional shooting dozens of shots every few seconds, this will guarantee that your "money" shot doesn't end up blurry.

Rename Your Image File

Give your image file a descriptive name to help it pop up on Internet image searches. WordPress themes usually allows you to input a description when you upload an image, but including a keyword in the file name itself is a sure sign of a pro.

About author:
Olga Ionel is a creative writer at ThemeFuse – a top provider of WordPress themes. She is passionate about studying online marketing industry and sharing informative tips.

How to make clickable picture in HTML

2013-02-06T13:08:00.000-08:00

This short tutorial will learn you how to make a clickable picture in HTML web page.

What is clickable picture?

Clickable picture is picture which will lead you to specific web page when you click on that picture.

To better explain what is clickable picture take a look at image below this text. If you click this image, post "Make clickable links and clickable images" will be opened.

HTML code for: How to make clickable picture

<a href="URLToLinkedWebPage"><img src="URLImageLocation" /></a>

In HTML code for clickable image you need to replace:

URLToLinkedWebPage - with URL to web page you want to be opened when user click on image

URLImageLocation - with location of image

Example:

<a href="https://www.google.com"><img src="https://www.google.com/images/srpr/logo3w.png" /></a>

Above HTML code display Google logo ("www.google.com/images/srpr/logo3w.png") and links to "www.google.com" when picture is clicked.

Make clickable links and clickable images

2013-01-29T13:15:00.000-08:00

How to create clickable links?

Let's first explain what are clickable links.

Clickable link is a text which reference on some web place. So, when clickable link is clicked referenced page is opened. Common term for clickable link is hyperlink.

Example of clickable link:

Some tips for clickable link

When above clickable link is clicked user is redirected to "HTML link code tips" page (http://interestingwebs.blogspot.com/2009/06/tips-for-html-link-code.html).

Guide to make scrollable link on web page

<a href="Web address">Here type clickable text</a>

the <a> that tag defines a clickable link, which is used to link from one page to another

href attribute specifies the web address of the page where link lead

Code for above example of clickable link would be:

<a href="http://interestingwebs.blogspot.com/2009/06/tips-for-html-link-code.html">Some tips for clickable link</a>

To better explain making of clickable links there is one more sample with hyperlink inside sentence.

Example of clickable link in setnence:

This link go to Google.

HTML code for scrollable link inside sentence (above example):

This <a href="https://www.google.com/">link</a> go to Google.

In this example word link is a clickable link while other words in a sentence are not. The word link is enclosed inside <a> and </a> tag.

How to make clickable image in HTML

Clickable image would be an image which will open linked web page when visitor click on this image. It is easy to make such an clickable image.

Sample:

When this image is clicked it will lead you to How to make clickable image tutorial!

Remove blogger navbar

2013-01-23T13:40:00.000-08:00

How to remove blogger (blogspot) navbar?

Main reason why people want to remove blogger navbar from their blogspot blogs is that navbar does not fit with their blog design.

In this post you will find short tutorial how to remove blogger navbar.

It is relatively easy to remove it!

You just need to follow steps in this article!

What is blogger navbar

The Blogger Navbar appears by default at the top of every Blogger blog. Take a look at a below image to see how blogger nvabars looks like.

Steps for removing the Blogger Navigation bar

in blogger Dashboard click Template

under "Live on Blog" click on button Edit HTML

inside "Template › Edit HTML" find:

]]></b:skin>

replace this code with:

#navbar-iframe,#navbar { display: none !important; }
]]>

after replacing code you should save template and your blog will be without navbar. And be very careful when edit HTML layout of your blogger blog.

How often Google crawl

2013-01-16T12:45:00.000-08:00

You make a new web page and ask yourself when Googe will crawl my new web page (or new blog post)?

Let's try to understand how Google crawl the web.

Google spiders

Google use spiders to crawl the web.

Spiders (also called GoogleBots) are software robots which discovers new and updated web pages and add those pages to the Google index.

Google crawling

When Googlebot (or a Google spider) visit one web site it detects all links on each page of this web site and adds them to its list of pages to crawl.

So Googlebot crawl from one page to another and follow their links. This is how Google crawl almost all pages on the internet.

When Google find some web site it will come back to crawl this site again and reindex it.

How often Google crawl

How often Google will crawl some web site depends on many factors such us PageRank, links to a page...

One of the factors is how often you change your site or add new pages. If changes are happening more frequently then Google will probably crawl your web site more frequently.

If your site or blog is new and is not indexed by google find out how to force google to crawl your web site or blog.

Blogger tips for beginners

2013-01-08T13:47:00.001-08:00

Here you will find a few links to blogger tips for beginners. Those are tips that every blogger should know.

Tips are primarily for blogspot blog. Learn few basic techniques which will help you to blog better.

Learn how to make and arrange categories in blogger, how to have recent posts in your side bar, expandable summaries, display HTML code in blogger post...

Arrange your posts by categories in blogger

Add categories to the blogger and give your visitors opportunity to view your posts sorted by categories. Accomplish this in a few simple steps.

List recent posts in blogspot

You can easily display links to last (recent) five posts on your blog. Or maybee last ten posts.
Don't know how? Read this post, it is easy!

Expandable post summaries on main blog page

If you want to have post summaries on main blog page which will expand on click on "read more". Read this article to learn how to accomplish it.

Display HTML code in blogger post

Want to write blogger post about HTML code, but HTML code is not properly displayed in your blog post.

For example this text will not be displayed correctly:

<h3>I want <h3> tags not heading format</h3>

Follow the link and you will find guide how to display HTML code in your blog posts!

Make google search for your blog

Add search capability on your blog with AdSense for Search. Allow your visitors to search content of your site in a Google like manner and try to earn some money.

How to add java script in your blogger post

You need to add some cool javascript functionality inside blogspot post but do not know how? Here is a short tutorial how to do this.

Increase visits with title change

Short guide to change title structure in blogger which have significant impact of SEO performance.

The default title structure is : [Blog title]: [Post title]

The structure : [Post title]: [Blog title] could improve your traffic performance.

Add meta description on blogger post

2013-01-02T13:18:00.000-08:00

How to add unique meta description tag to each post post in blogspot (blogger) blog?

If you searching answer on that question this article is right place to find solution. It give simple easy to implement solution.

This article is divided on two parts:

what is purpose of meta description tags

how to implement meta description tags to every post in blogger

WHY TO USE META DESCRIPTION TAGS?

What is Meta Description Tags?

Meta Description Tags are HTML elements used to provide description about a HTML page.

Why Meta Description Tags are important?

It is important because Meta Description Tag content might be used in Search Engine Result Page (SERP) for snippets. So if user find snippet text usable there is better chance he will open your page.

Example of SERP code snippet

We get above code snippet and here is a content of Meta Description tag!

<meta content='This blog have blog tutorial, Javascript and HTML tips (including jQuery).'
 name='description'/>

ADD DIFFERENT META DESCRIPTION TAG TO EVERY POST IN YOUR BLOGGER BLOG

Now blogger make it easy to add meta descriptions for each post throug blogspot interface.

Recently it was much harder to accomplish it, you must make a change inside HTML template edit for each post and it was very impractical.

Now it is enough to follow this steps:

Inside blogger dashboard click Settings > Search Settings

Under Meta tags switch "Enable search description" (to Yes) and type text you want to be meta description for your blog. Of course don't forget to Save changes.
Last step is to inside "Edit post interface" find Post settings --> Search Description and type description you want to appear for meta description tag in current post.

Submit guest post guidelines

2012-12-17T11:30:00.000-08:00

Here are some basic guidelines for submitting guest post on this blog.

First let's list few reasons why you should guest post:

by posting on other’s blog, you are gaining exposure and publicity

get more backlinks

immediately increase traffic if you guest post on popular blogs

Rules for guest posting on this blog

Choose a topic

suggest a few titles with two or three keywords - e.g. Title: "How to increase web traffic" Keywords: "increase traffic"
- I will decide if I am satisfied with suggested titles, topic and keywords, optionally you can make keyword research
- you can send me your suggestion on this mail with a subject "Guest post"

Choose a topic which is related with this blog. Topics could be:
- HTML, CSS...
- javascript, jQuery
- tips for blogspot blog
- tips for general blogging
- how to increase web traffic, monetization and SEO

guest post should have some useful information, answer on some question or give some step by step instructions how to do something, for example: Adding categories to blogspot (blogger)

Post rules

article must be original, it shouldn't be published anywhere on web

use paragraph tags (<p></p>)

paragraphs should not be too long, so text should be easy to read

you shuold pay attention on keywords in text:
- Keyword position on web page
- Keyword density
- Keyword proximity

using unordered list is a good idea, example:
<ul>
<li>first line</li>
<li>second line</li>
</ul>

Writing code inside guest post

if you want to have some code in guest post put it inside <pre> tags for example: <pre>Some code</pre>

don't forget to replace code characters and symbols into character entities, find more in How to display HTML code in blog or web

Images

If you have some screenshots you could send me images in mail (not more then 3 per post) and type image file name inside text where image should be. .jpg format is recommended.

Example of well formated text

At the end here is HTML for this post. When you send me guest post it should be formated similar to this example:

<p>Here are some basic guidelines for submitting guest post on this blog.</p>
<p>First let's list few reasons why you should guest post:
<ul><li>by posting on other%u2019s blog, you are gaining exposure and publicity</li>
<br />
<li>get more backlinks</li>
<br />
<li>immediately increase traffic if you guest post on popular blogs</li>
</ul></p>
<br /><br />
<h3>Rules for guest posting on this blog</h3>
<h4>Choose a topic</h4>
<ul>
<li>suggest a few titles with two or three keywords - e.g. Title: "How to increse web traffic" Keywords: "increase traffic"
<br /><br />
<ul><li>I will decide if I am satisfied with suggested titles, topic and keywords, optionally you can make <a href="http://interestingwebs.blogspot.com/2011/11/how-to-keyword-research.html">keyword research</a></li>
<br />
<li>you can send me your suggestion on this <a href="mailto:blogsrec@gmail.com?subject=Guest post">mail</a> with a subject "Guest post"</li>
</ul>
</li>
<br /><br />
<li>Choose  a topic which is related with this blog. Topics could be:
<ul><br />
<li>HTML, CSS...</li>
<br />
<li>javascript, jQuery</li>
<br />
<li>tips for blogspot blog</li>
<br />
<li>tips for general blogging</li>
<br />
<li>how to increase web traffic, monetization and SEO</li>
</ul>
</li>
<br />
<li>guest post should have some useful information, answer on some question or give some step by step instructions how to do something, for example: <a href="">Adding categories to blogspot (blogger)</a> </li>
</ul>
<br />
<b>Post rules</b>
<ul><li>article must be original, it <b>shouldn't be published anywhere on web</b></li>
<br />
<li>use paragraph tags (&lt;p&gt;&lt;/p&gt;)</li>
<br />
<li>paragraphs should not be too long, so text should be easy to read</li>
<br />
<li>you shuold pay attention on <a href="http://interestingwebs.blogspot.com/2011/12/web-page-optimization-techniques.html">keywords in text</a>:
<br /> <br /> 
<ul><li>Keyword position on web page</li>
<br /> 
<li>Keyword density</li>
<br /> 
<li>Keyword proximity</li>
</ul></li>
<br />
<li>using unordered list is a good idea, example:
<br />
&lt;ul&gt;
<br />
&lt;li&gt;first line&lt;/li&gt;
<br />
&lt;li&gt;second line&lt;/li&gt;
<br />
&lt;/ul&gt;</li>
</ul>
<br />
<b>Writing code inside guest post</b>
<ul>
<li>if you want to have some code in guest post put it inside &lt;pre&gt; tags for example: &lt;pre&gt;Some code&lt;/pre&gt;</li>
<br />
<li>don't forget to replace code characters and symbols into character entities, find more in <a href="http://interestingwebs.blogspot.com/2008/12/easy-way-to-put-code-snippets-in-blog.html">How to display HTML code in blog or web</a></li>
</ul>

3D snowflakes effect on HTML page or blog

2012-12-06T12:33:00.000-08:00

Here is a sample of 3D snow effect on HTML page. This sample work with a help of HTML5 and three.js library.

Snowflakes are moving in 3D manner and if you move mouse on left snowflakes will rotate to left. Same thing function for other directions. Try it!.

This 3D snow effect work on new version of browsers which support HTML5 functionality.

It seem this effect does not work on Internet Explorer browser but it works well on Chrome and Firefox.

Here is 3D snowfall code:

<style type="text/css">
   .snow {
    background-color: #000099;
    margin: 0px;
    overflow: hidden;
    width: 650px;
    height: 350px;
   }
</style>
 
<div id="Div1" class="snow"></div>

 <script type="text/javascript" src="http://seb.ly/demos/JSSnow/js/ThreeCanvas.js">
</script>
 <script type="text/javascript" src="https://dl.dropbox.com/u/59215462/SnowFall/3D/Snow.js">
</script>
<script src="https://dl.dropbox.com/u/59215462/SnowFall/3D/3DSnowBox.js"
 type="text/javascript"></script>

<script>
      init('Div1');
  </script>

Let's explain 3D snowfalling code

Line 1 to 9 is a style for div HTML element in which snowfall effect is putted, this style is used for .snow class, you can change value in style to adjust width, height or color to your needs

Line 11 is div element, its class in snow so style from beginning of code is used on this div

Line 13 to 14 is a reference to three.js library, it is 3D library

Line 15 to 16 is a reference to Snow.js library. This library make this cool 3D snow effect

Line 17 to 18 is a reference to 3DSnowBox.js. This file is mine and it make call to Snow.js easier

line 20 to 22 is a javascript call to a Init method with id parameter of div element in which 3D snow should occur

If you find this article useful please make a link to this article on your page or blog!

Does GM food safe?

2012-11-26T12:37:00.000-08:00

Does GM food is safe for consuming is the question that many consumers ask.

We will start with a few facts about GM food and finish with a few studies with a negative opinion about GMO.

Facts about GM food (source : WTO)

What is GMO?

Genetically modified organisms (GMOs) can be defined as organisms in which the genetic material (DNA) has been altered in a way that does not occur naturally.

What is genetic engineering?

It is a technology which allows selected individual genes to be transferred from one organism into another, also between non-related species.

For example genetically modified cabbages which produce scorpion poison that kills caterpillars when they bite leaves. The goal is to limit pesticide use.

How GM foods safety should be assessed

Different GM organisms include different genes inserted in different ways. This means that individual GM foods and their safety should be assessed on a case-by-case basis and that it is not possible to make general statements on the safety of all GM foods.

Claimed by WHO, GM foods currently available on the international market have passed risk assessments and are not likely to present risks for human health. In addition, no effects on human health have been shown as a result of the consumption of such foods by the general population in the countries where they have been approved.

Which countries have most GM crops in 2011 (source: Guardian)

Negative safe studies about GMO

Árpád Pusztai study

Árpád Pusztai is a world expert on plant lectins. In his study he fed rats with genetically modified potatoes. In 1998 Pusztai said in an interview that his group had observed damage to the intestines and immune systems of rats fed the genetically modified potatoes.

He also said "If I had the choice I would certainly not eat it", and that "I find it's very unfair to use our fellow citizens as guinea pigs".
After interview Pusztai's annual contract at Rowett was not renewed (some claims on Tony Blair's request). This event is known as Pusztai affair.

He knew the truth about GMO safety year's ago:

Dr. Irina Ermakova study 2005 (source: Gmo-compass)

Dr. Irina Ermakova of the Russian Academy of Sciences recently released a study reporting higher mortality rates and lower body weight among young rats whose mothers were fed a diet of herbicide resistant, genetically modified soybeans.

The scientific team found that the mortality rate of the offspring of rats fed genetically modified soy flour was six times higher than that of rats raised with feed from conventional soy.

These findings were never published in a peer reviewed journal.

According to the ACNFP, Dr. Ermakova's findings are inconsistent with a recognized, published research report. At South Dakota State University in the United States, Denise Brake and Dr. Donald Evenson conducted similar feeding studies on mice with GM soybean and published their results in a peer-reviewed scientific journal in 2004. Brake and Evenson’s studies found no negative effects.

French study 2012 (source: Dailymail)

Rats fed a lifelong diet of one of the bestselling genetically modified corn suffered tumours and multiple organ damage.

It is the first to look at the impact of eating a GM diet over a lifetime in rats, which is two years. Until this study, safety assessments of GM crops have been based on rat feeding trials lasting 90 days.

Shocking images of tumours in mice caused by exclusively eating GM corn:

Michael Antoniou, a molecular biologist at King's College London, who helped draft the paper, told reporters about need to test all GM crops in two-year lifelong studies. He said:

I feel this data is strong enough to withdraw the marketing approval for this variety of GM maize temporarily, until this study is followed up and repeated with larger number of animals to get the full statistical power that we want

Seralini, the main team research member believes his latest lifetime rat tests give a more realistic and authoritative view of risks than the 90-day feeding trials that form the basis of GM crop approvals, since three months is only the equivalent of early adulthood in rats.

Recently six french science academies dismiss this study.

At the end

We can conclude that there are studies which results indicates the GMO technology could be extremely dangerous. On the other side there are even more studies which claims that GMO is safe.

All three studies mentioned in this article were challenged by research community. Problem is that multinational monopolistic industry fund research centers and studies. So you may ask yourself if you would be a scientist would you make such a study which consequence will be loss of your cash flow.

Dr. Mae-Wan Ho citation:

Genetic engineering biotechnology is inherently hazardous. It could lead to disasters far worse than those caused by accidents to nuclear installations...

I should, right away, dispel the myth that genetic engineering is just like conventional breeding techniques. It is not. Genetic engineering bypasses conventional breeding by using the artificially constructed vectors to multiply copies of genes, and in many cases, to carry and smuggle genes into cells.

Christmas effects on HTML page

2012-11-12T12:57:00.000-08:00

On this page you can find links to christmas javascript effects which can be applied on your web page.

We will start with two snow effect, then continue with moving santa.

Look below for links to christmas effect tutorials!

Christmas snowing javascript effect - find how to add snowing effect on your web page. Following this link more advanced users can also find how to make snow fall with a custom snow flakes.

Moving santa on your HTML page - how to get moving christmas Stana Claus on your HTML page with a help of javascript.

3D snow effect in HTML5 - want a window looking on 3D falling snow on your HTML page? This impressive 3D effect you can find by following the link.

jQuery snow falling effect - if you like jQuery, linked article could teach you how to add snowing effect on you web site using jQuery.

jQuery snow falling effect on your blog

2012-11-08T12:05:00.000-08:00

How to get jQuery snowing effect animation on your blog or web site?

Very easy, you just need to copy a few lines of HTML code plus a few lines of jQuery code and your web page will snowing, many snowflakes will fall.

jQuery snow falling effect is visible on this page. If you look at page you will see falling snowflakes.

To get same (jQuery) snow effect you need to include this code on your page:

<script src="http://code.jquery.com/jquery-1.8.2.min.js" 
type="text/javascript"></script>
<script src="http://cloud.github.com/downloads/kopipejst/jqSnow/jquery.snow.js" 
type="text/javascript"></script>

<script>
 $(document).ready( function(){
         $.fn.snow();
 });
 </script>

So, to get jQuery snowing effect you just need to copy code above and paste it on your HTML page.

First four lines of HTML code are links to jquery-1.8.2.min.js and to jquery.snow.js files. Lines 6 to 10 is jquery code which call snow method from jquery.snow.js file.

You can download jquery.snow.js file from WORKSHOP owned by Ivan Lazarevic (the author of snowing script code), then upload this file somewhere on internet and use it for your blog or web site.

There is another snowing effect on my blog written in ordinary javascript.

Get advert on my blog

2012-11-04T11:01:00.000-08:00

You can advertise your products on this blog. Check below where on blog you can place your adverts. Also check what types of adverts are available.

Advertise on How to add a falling snow effect to blog page

Type of advert: 150 X 100

Cost: 5$ from today until 2013-07-01

Why: last year this page was visited more then 6200 times from November to February (mostly in November and December).
This page is in the top of Google search results for keywords (try it yourself):
- snow effect for blog
- snow animation for blogger
- falling snowing effect HTML
- snow effect for blogger
- website snow effect html

How: send 150 X 100 px image with a link to my mail with a subject SNOWADVERT. Then, I will reply to your mail and give you instructions how to pay in 5$ using PayPal. After payment, advert will be placed on the page.

Center a HTML element

2012-10-31T14:24:00.001-07:00

How to center div element? This is a question that ask many HTML beginners.

And this is not only question about centering. Frequently people do not know how to center text or button inside div element or button , how to center image inside div element, how to center div block on the screen and many other variations...

In this article we will try to give simple instructions with samples how to make some most common HTML centering.

Center a text inside div:

This text is centered inside div

Code for centering text inside div

<div align=center>This text is centered inside div</div>

So, to div element is added align attribute with value center and we get centered text inside div element.

Center HTML button element inside div element:

Code for centering button element in div

<div align=center><input id="Button1" type="button" value="Centered button" />
</div>

Button HTML element is centered inside div element similar like in previous example. Align is set to center.

Center an image inside div element

Code for centering image in div element:

<div align=center> 
 <img alt="" src="http://www.userinterfaceicons.com/80x80/redo.png" 
            style="height: 85px; width: 198px" id="image" />
</div>

Image is in div element which have align attribute set to center.

Center a div block on screen:

Div block is centered but text is on the left side

Code for centering div block on screen:

<div style="width: 280px; margin-right:auto; margin-left:auto" >
Div block is centered but text is on the left side
</div>

This div is center on the screen but text inside div is not. Div is centered on screen or in some other HTML element by setting margin-right and margin-left attributes to auto.

Center a div block and text inside it

Div block is centered and text is
centered

Code for centered div element with centered text inside it:

<div style="width: 280px; margin-right:auto; margin-left:auto;" align=center >
Div block is centered and text is centered
</div>

This is like previous example. Only difference is that align attribute is set to center.

Div side by side in one line

2012-10-15T13:55:00.003-07:00

Find answer how to place two div elements side by side in the same line. When two div elements are placed one after another on HTML page they are displayed in two lines. They usually end up one above the other, never side by side.

Here you can find:

how to place two div elements side by side using inline-block

example of three div elements side by side using inline-block

how to place two div side by side using table

Two div elements side by side using inline-block

This is the first div with text.

This is second div with text

Here is a code:

<div style="width: 100px; height: 100px; 
border: solid 1px #ccc; display: inline-block;">
 <p>This is the first div element.</p>
 </div>

<div style="width: 100px; height: 100px; 
border: solid 1px #ccc; display: inline-block;">
<p>This is second div element.</p>
</div>

To make two div elements in same line display:inline-block is used. An inline block is placed inline (ie. on the same line as adjacent content), but it behaves as a block.

Sometime you want to center a div element, use margin-right:auto and margin-left:auto inside style attribute.

Three div elements side by side using inline-block

This is the first div

This is second div

This is the third div

Code:

<style>
.oneline {
 width: 100px;
 height: 100px;
 border: solid 1px #ccc;
 display: inline-block;
}
</style>

<div class="oneline">
<p>This is the first div</p>
</div>

<div class="oneline">
<p>This is second div</p>
</div>

<div class="oneline">
<p>This is third div</p>
</div>

in lines 1 - 9 style for class oneline is defined. "display:inline-block" is used like in previous example.
all three divs have class "oneline" so they are in one line.

Two div elements in one line using float left

This is the first div

This is second div

This is third div

This is in new line

Code:

<style> 
    .floatoneline 
    {  width: 100px;  
       height: 100px;  
       border: solid 1px #ccc; 
       float: left;  
    } 
    .pageHolder
    { 
    overflow: auto; 
    width: 100%; 
    } 

</style>   
    <div class="pageHolder">
    <div class="floatoneline"> <p>This is the first div</p> </div>  
    <div class="floatoneline"> <p>This is second div</p> </div>  
    <div class="floatoneline"> <p>This is third div</p> </div>
    </div>
    <span>This is in new line</span>

Using float:left is best way to place multiple div elements in one line. Why? Because inline-block does have some problem when is viewed in IE 9.

Class pageHolder is used to clear floats. It is like <br /> but for folats.

Two div elements side by side in one line using table

First div

Second div

Code:

<table border="1">
<td>
    <div>First div</div>
</td>
<td>
    <div>Second div</div>
</td>
</table>

Above is a simple example how to place two divs together in one line using table. Just make a table and in one row place two columns with divs inside.

Change image onclick with jQuery

2012-09-19T12:18:00.024-07:00

Learn how to change image when onclick event occurs (with help of jQuery). My previous article was about how to change image with onclick event with common javascript. This article is focused on doing the same thing but with jQuery.

First there will be one simple demonstration of changing image with onclick event with two buttons. Each button change image when clicked.

Second demonstration is how to change image when onclick event is happened on that image. So, image is changed every time user click on it.

Changing image after onclick event on button with jQuery

When "Show Undo" button is clicked arrow is pointed to left, when "Show Redo" is clicked image is changed to arrow pointed to left.

Let's take a look at code:


<p><img alt="" src="http://www.userinterfaceicons.com/80x80/redo.png" style="height: 85px; width: 198px" id="ChangeImage" />
</p>
     
<p><input id="Undo" type="button" value="Show undo" />&nbsp;&nbsp; <input id="Redo" type="button" value="Show Redo"  />
</p>


    <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#Undo").click(function () {
                $('#ChangeImage').attr('src', 'http://www.userinterfaceicons.com/80x80/undo.png');
            });
            $("#Redo").click(function () {
                $('#ChangeImage').attr('src', 'http://www.userinterfaceicons.com/80x80/redo.png');
            });
        });
    </script>

Explanation of code for alternating image:

on the top there are HTML code for image and two buttons


<p><img alt="" src="http://www.userinterfaceicons.com/80x80/redo.png" style="height: 85px; width: 198px" id="ChangeImage" />
</p>
     
<p><input id="Undo" type="button" value="Show undo" />&nbsp;&nbsp; <input id="Redo" type="button" value="Show Redo"  />
</p>

to use jQuery we need to have a call to jQuery library


   <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

the main part of jQuery code, two onclick events, when input Undo is clicked image with id "ChangeImage" is changed to Undo image.

when input Redo is clicked image with id "ChangeImage" is changed to Redo image


 <script type="text/javascript">
        $(document).ready(function () {
            $("#Undo").click(function () {
                $('#ChangeImage').attr('src', 'http://www.userinterfaceicons.com/80x80/undo.png');
            });
            $("#Redo").click(function () {
                $('#ChangeImage').attr('src', 'http://www.userinterfaceicons.com/80x80/redo.png');
            });
        });
    </script>

Alternate image when image is clicked with jQuery

When image below is clicked, image is changed.

Check code how to accomplish change image when onclick event is raised:


  <img src="http://www.userinterfaceicons.com/80x80/undo.png" class="img-swap" />

 <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script>
        $(function () {
            $(".img-swap").live("click", function () {
                if ($(this).attr("class") == "img-swap") {
                    this.src = this.src.replace("undo", "redo");
                } else {
                    this.src = this.src.replace("redo", "undo");
                }
                $(this).toggleClass("on");
            });
        });
     </script>

How this code is working?

first line is image with class "img-swap"

then there is a function which occurs when object with class "img-swap" is clicked

if clicked class is "img-swap" then "undo" is replaced with "redo" for src attribute, so the other image is showed

if clicked class is not "img-swap" then "redo" is replaced with "undo" for src attribute, so the other image is showed

at the end we have - $(this).toggleClass("on") - this code add "on" to class "img-swap" so we get class "img-swap on", on the second click with - $(this).toggleClass("on") - we get only "img-swap"

Change image onclick with javascript

2012-09-04T12:24:00.076-07:00

How to change image with onclick javascript event on your web page? Easy, just follow instructions you find here.

The onclick event occurs when the user clicks on some element on web page, most when button is clicked. So if you visited this article you probably want some image appear after some button is clicked (then onclick event occurs).

There are two demonstrations and explanations:

change image when button is clicked

change image when image is clicked

If you like jQuery visit: Alternate image on click with jQuery.

Change image when button is clicked

Give a look at demonstration below, when "Show redo" button is clicked onclick event occurs and image is changed to "redo" image. When "Show undo" is clicked image is changed to "undo" image.

Try to click and make sure.

Here is step by step guide how to make onclick change image demonstration.

first you need to add one img element and two input elements.

<p>
        <img alt="" src="http://www.userinterfaceicons.com/80x80/redo.png" 
            style="height: 85px; width: 198px" id="image" /></p>
    <p>
        <input id="Button1" type="button" value="Show redo" onclick="ShowRedo()" />&nbsp;&nbsp; 
<input id="Button2" type="button" value="Show undo" onclick="ShowUndo()" /></p>

second step is to add javascript code which will be called when one of input elements (buttons) is clicked

<script language="javascript">
    function ShowRedo() 
{
        document.getElementById("image").src = "http://www.userinterfaceicons.com/80x80/redo.png";  
    }

    function ShowUndo() 
{
        document.getElementById("image").src = "http://www.userinterfaceicons.com/80x80/undo.png"; 
    }
</script>

so, when Button1 is clicked, onclick event occurs and ShowRedo() method is called. ShowRedo method change image to "Redo" image

when Button2 is clicked, onclick event occurs and ShowUndo() method is called. ShowUndo method change image to "Undo" image

here is complete code for this demonstration:


<p>
        <img alt="" src="[PATHTOFIRSTIMAGE]" 
            style="height: 85px; width: 198px" id="image" /></p>
    <p>
        <input id="Button1" type="button" value="Show redo" onclick="ShowRedo()" />&nbsp;&nbsp; 
<input id="Button2" type="button" value="Show undo" onclick="ShowUndo()" /></p>

<script language="javascript">
    function ShowRedo() 
{
        document.getElementById("image").src = "[PATHTOFIRSTIMAGE]";  
    }

    function ShowUndo() 
{
        document.getElementById("image").src = "[PATHTOSECONDIMAGE]"; 
    }
</script>

Change image when user cick on image

Below is example how to change image when user click on this image. Try to click it and image will change.

It is accomplished with very similar way like demonstration with two buttons and change image. The difference is that onclick event is happening when image is clicked not button.

on the start we have image element with onclick event which call changeImage javascript merhod

when onclick event of image occurs javascript method changeImage() is called

if src attribute of image element is set to first image then second image is displayed

if src attribute of image element is set to second image then first image is displayed

<p>
        <img alt="" src="http://www.userinterfaceicons.com/80x80/minimize.png" 
            style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"  />
</p>

<script language="javascript">
    function changeImage() {

        if (document.getElementById("imgClickAndChange").src == "http://www.userinterfaceicons.com/80x80/minimize.png") 
        {
            document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/maximize.png";
        }
        else 
        {
            document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/minimize.png";
        }
    }
</script>

Increase website traffic

2012-09-03T12:09:00.000-07:00

If you want to have successful and high traffic web site or blog read this article and you will find a few advices.

Advices for increasing web traffic:

Make sure Google indexed your web site - find out how to know does Google indexed your site and tips for submitting a request for Google crawler

Learn how to make keyword research - choosing the right keywords for your article could be a key for making top ranking article. Follow the link and learn what free keyword research tools exists on the web and how to use them.

Basic web page optimization techinques - a short tutorial about most essential things you should know when optimize you web page for increasing web traffic such as: title tags, URL keyword optimization, keyword position on web page, keyword density, keyword proximity...

Use google search operators for Seo - find what are google search operators and how to use them for increasing visits on your web site

How to analyze and improve bounce rate - Bounce rate is the percentage of visitors who entered the site on a page and left right away. Bounce rate should be lower as possible. Learn how to measure, track and improve bounce rate.

Increase blogger traffic change title - Here is simple procedure which help me to significantly increase blogger traffic which can be applied for other types of web sites too.

[Post title]: [Blog title]

Title is important

Tips for increasing website traffic from best - advices for increasing web traffic from successful blogger Ana Hoffman.

Make blog plan for next year - Here is some of my thoughts what to do for more vistis on your blog or web site.

Best blogging tips in Jan and Feb 2012

2012-03-14T13:27:00.001-07:00

Purpose of this article is to give readers a short list and brief explanation of most useful articles (I found recently) with tips how to blog and make more visitors and money. Article will be separated on few separate topics about blogging I learned recently. This is first article in a series. Expect more article like this for a month or two...

In this article you can learn about :

Google page layout algorithm - page layout (specially above the fold area) have influence on how Google rank page

how AdSense unit inside post below title increase ad clicks and how to do it in blogger

guide for optimizing Google+ profile, facebook page, twitter profile...

how to get more web traffic

Domain name change impact on seach engine ranking...

Google page layout algorithm - page layout (specially above the fold area) have influence on how Google rank page

Recently on January 19 2012 Google make new algorithmic change. This change penalize bloggers who have lot of ads in above the fold area which push content down. I learned about this change from kezanari blog.

I write an article how above fold ads reduce Google search engine rankings. Probably most comprehensive article about this topic you can find in searchengineland article about ads and google penalize.

One of adviced tools to test does your site is affected by Google page layout algorithm is Browsersize.

How AdSense unit inside post below title increase ad clicks and how to do it in blogger

To avoid "Google page layout algorithm" I replaced AdSense units from under the post area to in the post area below the title. This change increase my AdSense revenure per visit (CTR - click through rate). To find more how to place AdSense ad unit inisde post below the title and how it affect AdSense revenue read : How to add adsense below post title.

Guide for optimizing Google+ profile, facebook page, twitter profile...

How to Optimize 7 Popular Social Media Profiles for SEO have detailed instruction for optimizing most popular Social Media profile such as G+, Facebook, twitter...

How to get more web traffic

How to get more web traffic is an excellent in depth article with a lot of tips and tricks for increasing web traffic. The writer of this article is Ana Hoffman and she have excellent blog about blogging and making money online. She earn money from her blog, visit her make money report on december 2011 to see how successful is she.

Domain name change impact on search engine ranking

If you thinking about domain name change read article Domain name change and find practical impact of domain name change on authors experience with lots of informations about this topic.

How to add AdSense below post title (for blogger)

2012-03-07T12:44:00.000-08:00

Recently I add AdSense ad below post title on my blogger blog and result of my action is significant growth in CTR (Click Through Rate). Higher CTR usually leads to higher revenue.

In this article I will try to answer on next questions

why bloggers should place adsense ads inside post

does AdSense ads directly below title inside Blogger posts are permitted and what to do?

How to add AdSense ad below post title in each Blogger post

Why bloggers should add AdSense ad below post?

Answer is simple, AdSense ads placed below post title have higher CTR value. This position is one of best performing for earning money. Check the image of Google heat map for ideal ads placing. Dark orange is for strongest performance to light yellow for weakest performance.

Since Page layout algorithm change, it is no longer advisable to place large block of AdSense ads above posts. "Page layout algorithm" cause Google penalty for blogs where relevant content is pushed down by large blocks of ads. In this circumstances placing one AdSense below post title right to post content text is a very good solution.

In three weeks after adding AdSense below post my CTR grow from 0.26% to 0.42%. To learn more about CTR trends and AdSense combinations on my blog visit : Increase blog adsense revenue real case scenario.

Does adding AdSense below title in post is allowed?

Using blogger interface you can easily add AdSense ads under post, between the posts or in the sidebar. But to add AdSense ads inside post below post title you should make change directly in blogger template, there is no simple way to do it. Step by step guide how to place AdSense ads below the post title you can find in next section of this article.

The question is does inserting Googe AdSense ads inside post below the title is permitted by Google term of services? Does this method break the rules?

Google forbidden placing misleading labels above Google ad units. So, if the AdSense ad unit directly below post title in some cases it could misleading visitors it is image connected with a title.

It is good practice to add a label above AdSense ad, something like "Sponsored Links" or "Advertisements". With this approach visitor will not be misguided. Take a look at image below how I add a label above the adsense unit below post title.

Personally I started to use this method since 2012-02-12 and AdSense ad unit work properly without a penalty. Here is the link to AdSense page where Ad placement inside article is suggested. Here you can find more about AdSense placement policies.

How to add AdSense ad unit below post title on blogger

Here is short tutorial:

First go to your Google AdSense account and copy AdSense unit code you want to implement inside your post

go to Postable (or some similar site) paste AdSense code, click button "Make it friendly" and copy encoded AdSense code

it is recommended to backup template on your local hard disk before doing any change in edit template box

check Expand Widget Templates checkbox

now inside Edit Template textbox find:
```
<data:post.body/>
```

just above <data:post.body/> tag paste the encoded adsense code

click button Save Template and you have AdSense unit just below post title in each post on your blogspot blog

if you want to add AdSense ad unit on the right side of your post below post title try with this code (this code should be placed above <data:post.body/> tag):
```
<div style='float: right;'>

PUT HERE ENCODED ADSENSE CODE

</div>
```