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.

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

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

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

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

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

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

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

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)

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


• sign in to your blogger account and go to 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>