Follow this blog

Monday, December 17, 2012

Submit guest post guidelines

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>

Thursday, December 6, 2012

3D snowflakes effect on HTML page or blog

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!


Monday, November 26, 2012

Does GM food safe?

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)

Production of GM food in the world

















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: 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.


Monday, November 12, 2012

Christmas effects on HTML page

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.

Snow fall effect sample from my blog











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

Animate - Moving image effect on web page










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.

3D snow effect with HTML5 and javascript












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 snowing effect animation sample

Thursday, November 8, 2012

jQuery snow falling effect on your blog

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.

jQuery snowing effect animation sample

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.


Sunday, November 4, 2012

Get advert on my blog

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.

Wednesday, October 31, 2012

Center a HTML element

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.


Monday, October 15, 2012

Div side by side in one line

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.


Wednesday, September 19, 2012

Change image onclick with jQuery

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

changing image when onclick event occurs

  

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"

Tuesday, September 4, 2012

Change image onclick with javascript

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>

Monday, September 3, 2012

Increase website traffic

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.

    Find directly competing pages with Google operator allinanchor for optimized keyword research






  • 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...
    On page optimization







  • 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.

Wednesday, March 14, 2012

Best blogging tips in Jan and Feb 2012

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.

Excellent article Pages With Too Many Ads “Above The Fold” Now Penalized By Google Page Layout Algorithm










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 Optimize 7 Popular Social Media Profiles for SEO on SEM group


















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.


Wednesday, March 7, 2012

How to add AdSense below post title (for blogger)

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.

Google heat map for best Adsens placing for better CTR

















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.

Add AdSense add directly below title and leave a space for content text on the left side














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.

Add a label under AdSense unit if you put this AdSense ad below post tile and visitors will not be mislead















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

  • sign in to your blogger account and go to Layout --> Edit HTML
  • Layout - Edit HTML

  • 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>


Tuesday, February 28, 2012

Web Application For Managing SQL Server data

    Web application for managing SQL Server data

  • Insert, Update, Delete records

  • Map referencing columns for easier record editing

  • Quick record search

  • Execute any query against database



Find demo:

http://databaseclient.blogspot.com/


Wednesday, February 22, 2012

How Above The Fold Ads Reduce Google Traffic

This article is written for bloggers and website owners who have lost significant number of visitor on the beginning of 2012 year or finding their traffic reduced after adding large block of ads in above the fold area.

On January 19 2012 Google announced change in their algorithm. This change affects the web sites and blogs which have too much ads in the above the fold area. Change is called "page layout algorithm". Google check how much content is placed above the fold area. More content in above the fold area, better.



Why Google check above the fold area

The reason is complaints from users who have difficult to find the actual content and must scrolling down the page. Users want to see content right away, not bellow tons of ads. So Google wants to improve user experience.

Which sites will have traffic reduced?

  • Google "page layout algorithm" does not affect sites which place ads above-the-fold to a normal degree

  • sites where is hard to find actual original content

  • Google traffic will be reduced for sites where relevant content is pushed down by large blocks of ads

  • on sites where only a small amount of visible content located above the fold

  • "page layout algorithm" change affects less than 1% of globally searches

  • be careful with your header, if it is too big it take precious space and push the contend down

Good tool to estimate do you have content in above the fold area is Google Browser Size. This tool help to understand how much of a page’s content is visible to visitors under various screen resolutions. Type URL of your blog, click Go and take a look does you content is visible for specific resolution.

I learn about this topic from kezanari blog and later one more excellent in depth article at search engine land.

This is how my blog look before I make changes to adapt to push up content in above the fold area

Click on image to enlarge:
My blog with AdSense 300x250 Rectangle in above the fold area. Content is under the ad. It is viewed with Google Browser.














My blog traffic was reduced after "page layout algorithm" started. This image above was taken with the help of Google Browser Size.

From the image we can learn:

  • Only 90% of visitors will see content title ("How To Send Money Online") without scrolling down. So 10% of visitors will have scroll down to see title.

  • Only 80% of visitors will see content title and first sentence without scrolling down

  • 70% of visitors will see content title and first two lines without scrolling

After adjustment to avoid Google traffic reduce

Click on image to enlarge:
My blog after contend moved up in Above the fold area














When you enlarge image and look carefully you can conclude that:

  • 99% of visitors will see the title and first two lines of content

  • 98 % of visitors will see the title and fist three lines of content, "sending money online" is last sentence they will see

  • 95% of visitors will see the title and fist six lines of content...

This is example of my blog which will not get Google penalty from "page layout algorithm". But this is my blog after I make changes on layout to move content closest to above the fold area.

Reduced Google traffic on my blog

My blog had significant traffic loss after January 19 2012, around 25% loss in pageviews. Also, I noticed fall of PageRank on some pages on my blog. I believe this reduced traffic is a result of "page layout algorithm".

Click on image to enlarge:
My blog suffered from reduced Google traffic after Google page layout algorithm change in the beginning of 2012










When traffic will be restored

When reduced traffic will be restored and google penalty removed? Unfortunately not immediately!

If you fix a problem (reduce the number of Ads in above the fold area) Google will make note on first re-crawl. But penalty on site will be removed after several weeks.

It can take several weeks for Googlebot to crawl and process enough pages to reflect layout changes on the site

My intention is to follow the traffic and to update this article after traffic will change.

Please do comment and leave your opinion and experience with "page layout algorithm".


Monday, February 13, 2012

How To Send Money Online

Recently I created account on PayPal and tested next two features:

  • sending money online

  • create and use buy now button

In this article I will briefly explained how sending money and buy now button works, how much does it cost (fees) and who is paying fees.


Send money online with PayPal

To send money with PayPal first you need to login on PayPal service. Of course if you are not registered on PayPal then you should Sign Up first.

Choose Send Payment tab.

Choose Send Payment tab on PayPal service page






In next step you need to:
  • 1. Type Email of recipient

  • 2. Enter Amount of money you want to send and currency

  • 3. Choose whether your online sending money is Online purchase or Personal payments and check exactly purpose. For Online purchases it can be: Goods, Services or eBay items. For Personal payments it can be: Shared expenses, Payment owed, Rental charges or Others.
Send money with PayPal. Enter email, amount and purpose.




















How much does it cost to send money online with PayPal

When you use a credit or debit card, you will be charged with 2.9% of the total amount sent plus $0.30 USD per transaction.

I make a test and try to send payment of $1 to PayPal account in same country and was charged with $0.33.

$0.30 USD per transaction
$0.03 USD as 3.1% of total amount
Total: $0.33 USD fee


Create and place Buy Now button on your site

With PayPal you can easily create Buy Now button. From PayPal site you can generate HTML code for Buy Now button, place this button on your site and start to sell to your visitors. You can sell material goods and send them using standard delivery or sell services and digital goods (e-books for example).

To find out how to make Buy Now button visit How to sell an ebook with paypal.

How much does it cost to sell items with PayPal Buy now button

For a testing purpose I make one Buy now button and put a price of $1 USD. My friend was making a purchase for $1 USD. He (buyer) doesn't need to pay any fee.
In this example seller received $0.67 USD
Fee is $0.30 USD per transaction
plus $0.03 USD as 3.1% of total amount.


Tuesday, February 7, 2012

There Is No Donate PayPal Type Button

How to add donate button on my site or blog?

And one more question

I have PayPal donation button on my site but when someone try to donate to me money he get message: "Your recipient is not able to receive funds at this time. Your recipient must first set up his or her account to receive funds."

I tried to create Donate PayPal button but I didn't fund option to create Donate button anywhere on the PayPal account when I was logged in. It should be at
My Account --> Profile -- My selling tools --> PayPal buttons --> Update --> Create New Button
but there you can choose only Shopping Cart, Buy Now, Gift certificates or Subscriptions button type. My PayPal account type is Premier.

Why Donate button type doesn't exists?

Where to find PayPal donate button? I have error: Your recipient is not able to receive funds at this time. Your recipient must first set up his or her account to receive funds.

Because word "Donate" is reserved for a charity and Paypal doesn't allow Donate button in some countries (usually it is due to local legal/tax requirements incompatible with PayPal's mechanism).

How to add Donate button

On internet I found advice to go on:

https://www.paypal.com/us/cgi-bin/?cmd=_donate-intro-outside

without logging in. Then I create donate button, copy HTML code and paste it on my blog. Donate button appeared on my blog.

When I ask my friend to try sending me some funds for testing purpose he get this error:

"Your recipient is not able to receive funds at this time. Your recipient must first set up his or her account to receive funds."

Cause of this error in my case is PayPal does not support Donate button for some countries, in this case PayPal doesn't support donate button for my country.

Solution for "Your recipient is not able to receive funds at this time" error with Donate button

You can solve this problem with choosing Buy Now button type instead of Donate button type. PayPal says:

We can't quite recommend using "buy now" button to accept donations, but from technical perspective it should be working correctly. Such transaction will also show as purchase on the donor's account and credit card statement, which may be confusing.

So, they tolerate this approach, it is not perfect but it will do.

I will not going in details how to generate PayPal Buy Now button. Here is an excellent link which in details describe how to make your own Buy now button step by step with images : How to sell an ebook with paypal.


Monday, January 23, 2012

What is AdSense CTR, RPM and CPC

After adding AdSense ads on your site you want to find how successful is your AdSense combination placement with a help of performance AdSense reports. To analyze AdSense reports first you should learn what abbreviations like CTR means.


Here we will discuss most important AdSense report indicators like:

  • AdSense CTR (Click Through Rate)

  • AdSense RPM (Revenue Per thousand iMpressions)

  • AdSense CPC (Cost Per Click)


What is AdSense CTR (Click Through Rate)


AdSense CTR (Click Through Rate) is the number of the ad clicks divided by the number of page views.

CTR = (Number of ad clicks * 100) / Number of page views

If my blog have 10,000 pageviews per month and 40 AdSense ad clicks then my CTR is 0,04%.

CTR = (40 * 100) / 10000 = 0,04%


Higher CTR (Click through rate) more AdSense ad clicked means more earnings. So every AdSense publisher want higher CTR.

What is AdSense CTR - Click Through Rate

How to calculate CTR for whole page

When you calculate CTR (Click Through Rate) for whole page or site you should sum up CTR for each individual ad. For example, if my site have two ads, one ad have CTR 0,15% and another ad have 0,25% then my site have total CTR 0,40%.

When you calculate CTR for whole page you could get all ads on your site not only AdSense ads.

What is a good or bad CTR

It is not easy to tell what is good or bad CTR. Click through rate (CTR) depends on specific niche, type of site, design of site and many other factors.

Important is to find your current CTR and keep an eye on CTR during time when you make various action to increase your CTR. Ad placement have great influence on CTR, so try to optimize your ad placement. After you make changes on ad placement keep track how it affect on your CTR. Something similar to my article: Increase blog adsense revenue real case scenario.

To help with AdSense CTR benchmark I will give information what I consider as good or bad CTR:

  • under 0,10% - it is bad CTR, my blog have this CTR before any AdSense ad placement optimization

  • 0,10% - 0,20% - it is acceptable CTR but it can be better

  • 0,20% - 0,30% - it is good CTR

  • above 0,30% - excellent CTR

  • above 2% - by some sources on internet it is suspicious high CTR

Please, leave a comment about CTR on your site and your opinion what is good or bad CTR.


What is AdSense RPM (Revenue Per thousand iMpressions)


Page revenue per thousand impressions (RPM) is calculated by dividing your estimated earnings by the number of page views you received, then multiplying by 1000.


Page RPM = (Estimated earnings / Number of page views) * 1000

This is good indicator to estimate your earning in future, for example if your RPM is €1,12 then you can predict if you will have 15,000 pageviews your earnings will probably be around €16,8 (15 * €1,12).


What is AdSense CPC (Cost Per Click)


The cost-per-click (CPC) is the amount publisher earn each time a user clicks on his ad. In publisher reports, CPC is calculated by dividing the estimated earnings by the number of clicks received.

For example if your CPC is €0.26 then you need around 285 click to earn €100.


Tuesday, January 10, 2012

Make a blog plan for next year

New year 2012 is come. It is time to evaluate how my blog is doing in 2011 and to think about actions for improving blog results in next year. In first part of this article I will show some blog statistics in last year and in second part there will be a list of planning blog activity I intend to do in new year.

How successful was 2011

    To better describe 2011 year there will be shown:

  • number of visits per year

  • AdSense blog earning per year

  • traffic source overview

  • a few words about guest posting

Number of visits per year and next year expectation

In the image below is showed number of visits in 2010 and in 2011 year. There is growth of 79 percent for 2010 to 2011 or 42260 new visits. I am satisfied with this result and hope that on the end of 2012 I will get at least 42260 more visit (in this case sum will be 138.876). Or even better if growth will be 79% in 2012 I would have 172.227 visits.

Blog visits per year











AdSense blog earning per year

AdSense earnings in 2010: 11,49$

AdSense earnings in 2011: 112,61$

My AdSense earning raise much more than traffic. While traffic increased about 2 times, AdSense earning raise 10 times. Why?

Well, one reason is that I optimize my AdSense placement and type. In article Increase blog adsense revenue real case scenario you can find more details about my attempts.


Traffic source overview

My main traffic source is Google 89%, and 10% my blog get from direct traffic. In my opinion it is good to get lot traffic from search engines but I believe that my blog can get much more traffic from referring sites and I intend to work on it this year.

Traffic source overview for my blog












Guest posting

In this year my blog reached PageRank 3 for two months and fall again on PageRank 2. In that period I used myblogguest service and get more than 30 guest posts. Unfortunately those guest article bring me very little traffic. In my opinion those guest posts are not bad but are written without proper keyword research and on page optimization techniques.


Blogging plan for this year


In this year I plan to:

  • get more SEO driven traffic to my blog

  • make a blogging tribe as described in article Increase website traffic - tips from the best

  • improve blog structure - plan to make a few main sections pages which will lead to content pages of some topic (section). Something similar to Javascript effects tutorial. Links to those main section pages will be on main page of my blog

  • improve monetization of my blog - plan to try with buysellads.com service. Unfortunately they do not accept blogspot subdomain so I will think about changing domain name

  • prepare exact instructions for guest posting on my blog and put a visible offer for guest posting on my blog

  • try to buy articles with earned money using a site www.freelancer.com

  • publish some guest posts on A blogs. This is great way to reach audience.


Monday, January 2, 2012

Increase website traffic - tips from the best

How to increase website traffic? Many bloggers ask themselves this question and struggled to find the answer.


A few day ago I bumped on interview with Ana Hoffman on Michael Alexis site. In this interview Ana described her way of generating more and more internet traffic.


After a few minutes of interview I figured out that this interview is very helpful and give some new ways (unknow to me) of generating blogs traffic.

Learn how to increase website traffic from interview with Ana Hoffman










Why Ana Hoffman opinion is relevant?

Recently, I visited Ana blog trafficgenerationcafe for the first time. My first impression was that it is quality blog which stand out. This blog currently have Page Rank 4 which is good, but Alexa rank is around 8500. According to Michael Alexis, Ana started her site 1,5 year ago. In this light Alexa rank at around 8,500 is amazing achievement.

So, I believe that Ana is authority and her interview have real value based on two facts:

  • Ana blog is interesting for reading

  • her blog achieved high Alexa rank in only year and half



How to increase website traffic interview with Ana Hoffman


Original interview length is over one hour and you can find it by following the link on the beginning of this article. Here are interview notes I make and decide to share in this post.

How to pick a niche

  • become authority in a niche, when you one become authority it is much easier to generate new traffic

  • to choose a niche you have to find something that is in demand

  • to succeed you must have passion for business, if you have passion only for niche it is not enough

  • to find topics in demand you need observe and reading other blogs, comments and forums, find what a people want to learn more about

  • pick a niche you have knowledge about, for example if you just start a blog, write about starting a blog not about how to make money with blog because you can't know how to make a money when you even don't have established blog and practically earn nothing

  • start from your experience, it won't go to write about something you don't know about it, people will know that you faking it

  • you must not just a talk about topic but show you know how to do it (like Ana generate traffic on her blog about generating traffic)

  • don't write about topic everybody write, try with different approach from others, put your spin at a topic or different opinion but the most important do something different

How to establish authority

  • there is no secret trick!

  • content is very important, also pay attention how you represent your blog and how you stand out

  • people have come to your blog and say : "Wow, I never read this before, this is amazingly helpful to me, I must come back!"

  • write plainly, write the way you talk

  • don't write fancy, do not put too many words in you post

  • blog content should be simple and helpful

  • you can't do it alone, you need a help of other people

  • find blog that share a niche with you, try with established but not most popular blogs (because it is almost impossible to connect with A blog, they have many various proposals every day)

  • try to form your own tribe (community) with 15 - 20 other blogs

  • try to find a people who are good solid bloggers and a hungry for more attention

  • spread a shares and comments on each other posts, with this method you give a life to your blog plus you learn from each other

  • comment on another posts builds your brand and recognition

How to find and reach member of your tribe

  • identify blogs in your niche

  • start commenting on those blogs

  • it is better chance to be noticed on blogs that doesn't have too much traffic, for example commenting on CopyBlogger or ProBlogger give minor chances to be noticed

  • when you are noticed on this smaller blog send him request for mutually social sharing and commenting

  • pick a blogs who have solid content

  • keep your group small, up to 20, if a group is bigger it is difficult to control

  • you can use facebook group to organize tribe

  • if someone in a group doesn't comment or share he couldn't be member of the group anymore

  • so, if there are 20 members of the group you will get 20 comments and shares per new post

Find traffic sources

  • there are short term traffic (like social media) and long term traffic sources

  • social media is just a way to find people who could be interested in your blog

  • job for you is not to build relationship with them but to introduce and bring them back to your blog

  • find something that works and concentrate on that (Ana is focused on twitter and facebook)

  • stumbleupon have low conversion rate

  • facebook have higher convert rate than twitter

  • choosing right social network depend on niche

  • when you find what work for you stick with that

  • facebook like widget on your blog can be negative social proof if you have small number of facebook followers

A few words about twitter

  • post 4 tweets one after another to make attention, 2 tweets would be links on other blogs, solid posts, 1 tweet a quote because people love quotes, a last one, a tweet to your blog (it will be at the top of tweet stream and chances are that people will click this one first)

  • 25% tweets should be self promotion the rest just useful to other people

  • it is important to provide a lot of value

Conversion

  • pick exactly conversion goal

  • put a call to action in post, for example "thanks on coming, now do this please"

  • it must be only one call for action per post

  • no to popups!!!

  • in middle of quality post add this "if you like to hear more, I talk a more abut that with my subscribers" or lead a visitor to other page which have call to action

Two tips for increasing website traffic

  • think like a regular visitor, if you are a casual visitor will you stay on your blog and read it, would you even scroll down?

  • write a guest post it is best traffic generation strategy


I hope that my interview notes will help you to increase your website traffic. Please, leave comment does tips listed in this article are helpful for your website traffic.