Sunday, December 19, 2010

Animated falling leaves on your site


This is a demo of animated autumn falling leaves effect for web sites and blogs. It is accomplished with java script code and very easy to implement to web page.


You need to copy and paste this code in your HTML:


<script type="text/javascript">
var snowsrc = "[PathToImageFile]";
</script>
<script src="[PathToSnowfallJsFile]" type="text/javascript"></script>

But do not forget to replace [PathToSnowfallJsFile] with path to javascript file and [PathToImageFile] with path to image of leaf.

For those who want to choose make this effect on their web sites I suggest to download instructions how to choose leaf shape or snowflake shape.

There are more javascript effects tutorials on my blog.


Saturday, December 18, 2010

Falling snow flakes on web site demo



For those who want to choose shape of snow flakes I suggest to download instructions how to choose snowflake shape with more than 10 snowflake images like two snowflakes below.


Following above link you will find step by step instruction how to get custom images of snowflakes on your site. It is accomplished with code like this:


<script type="text/javascript">
var snowsrc = "[PathToImageFile]";
</script>
<script src="[PathToSnowfallJsFile]" type="text/javascript"></script>

Following this link will also find URL's for [PathToSnowfallJsFile] and [PathToImageFile]


For guide how to implement basic snowing effect on blogger follow the link.

Saturday, December 4, 2010

Snowing effect with custom snowflake shape



For those who want to choose shape of snow flakes I suggest to download instructions how to choose snowflake shape with more than 10 snowflake images like two snowflakes below.

Following above link you will find step by step instruction how to get custom images of snowflakes on your site. It is accomplished with code like this:

<script type="text/javascript">
var snowsrc = "[PathToImageFile]";
</script>
<script src="[PathToSnowfallJsFile]" type="text/javascript"></script>

Following this link will also find URL's for [PathToSnowfallJsFile] and [PathToImageFile].


For guide how to implement basic snowing effect on blogger (without custom shapes) follow the link.
You can find more interesting tutorials for javascript effects on my blog.

Tuesday, March 16, 2010

Web mind reader

Computer can read your mind. Don't believe? Try this computer magic trick. This page will attempt to read your mind, please follow the instructions carefully. You will probably be amazed (I was when I try this ming game for the first time), computer really know what symbol you imagine. If you think you know how it works please leave comment.


  1. Imagine one two digit number (example: 42)

  2. Substract digits from that number (example 42 - 4 - 2 = 36)

  3. Find results in a table and remember symbol attached to result number

  4. Concentrate on symbol. Click on square below and see result.


For visitors who are interested how this mind puzzle works there are two hints:

  • think what computer can do?

  • what you do?


Tuesday, March 2, 2010

Add digg button to every post

This article will step-by-step guide reader to place a real time Digg count button to every single blogger post. With Digg button you have a better chance your post will be digged and get you more web traffic. In this article reader can also find how to add Digg button on top or bottom of each post and how to align Digg button on left or right side of posts.

Example of Digg button:

Digg button


How to add Digg button to every blogspot post


To add Digg button to every post on your blogger blog you should copy and paste this code in blogger template:

<script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>


You can add Digg button on the beginning of every post or on the bottom of every post. In HTML layout search for <data:post.body/> and paste the code just before if you want to have Digg button on the top of the post or after it for twitter button on the bottom of the post.


Here are step by step guide to add Digg button counter to blogger:

  • Go to Layout in your blogspot blog

  • Click on Layout --> Edit HTML

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

  • check on Expand Widget Template checkbox

  • find <data:post.body/>

  • for Digg button counter on the top of post add Digg button code (for code check code above) before <data:post.body/>

    ...

    [DIGG BUTTON CODE]
    <data:post.body/>
    ...

  • or you can want Digg button on the end of your posts, add Digg button code just after the <data:post.body/>

    ...
    <data:post.body/>
    [DIGG BUTTON CODE]
    ...



How to align Digg button left or right

To align your Digg button left use this code:

<div style='padding: 4px; float: left;'>
[DIGG BUTTON CODE]
</div>


Code needed to align your Digg button counter right:
<div style='padding: 4px; float: right;'>
[DIGG BUTTON CODE]
</div>


Sample code for Digg button on beginning of every post on right side:

<div style='padding: 4px; float: right;'>
<script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>


<data:post.body/>


Tuesday, February 16, 2010

Parameters for tweeter buttons

There are parameters (options) for three retweet buttons counters: Tweetmeme, Backtype and Topsy. You can get more control over your tweet buttons with options listed for those three tweet counters.


Find answers how to:

  • change the @username who is tweeted

  • change the size of the button

  • what to do when the URL is different from the current URL

If you are interested in implementing twitter button on blogspot check Add twitter retweet button to blogger.


Tweetmeme options



Tuesday, February 9, 2010

Approve comments on blogger

Blogger owners who want to moderate comments on their blog will find this guide useful. You can moderate comments on blogger before it goes live on blog. This is handy for control comment spam. Blogger administrator can accept or reject comment before comment is published. Here you will find step by step instructions how to enable comment moderation.


Also, this post give answer how to find out to which post unpublished comment is connected. For example I have one unpublished comment and want to learn to which post it will be published.

Moderate comments on blogger



Tuesday, February 2, 2010

Add twitter retweet button to blogger

Learn how to add tweet retweet button and counter to every post on your blogspot blog and show the number of times your posts have been linked on Twitter and let readers retweet. Here you will find guide how to add retweet button to the top or a bottom of your posts and how to align retweet button on left or right side of your posts. You can choose one of three retweet counters (tweetmeme, backtype and topsy) described in this article. You will also find advantages and drawbacks for each one of those three retweet counter services.

Tweeter button looks like this button on the picture below:




Tuesday, January 26, 2010

Expandable post summaries on blogger

You want know how to create expandable post summaries on main page of your blogger blog? You want to display only few lines of text from the beginning of each post, and one read only link bellow each summary which is linking to the rest of article? With help of jump break blogspot feature it is very easy to accomplish it. "Jump break" feature is also called "After the Jump" feature lets you create expandable post summaries in your blog posts, so longer posts appear as an intro with a link to Read More.



Tuesday, January 19, 2010

Scrolling text HTML code

Learn how to add scrolling text on your site or web page. Read this guide and you can make text to move horizontal or vertical. You just need to copy scrolling text HTML code from this page, adjust copied code and paste it to your HTML page.


To add scrolling text or images on web page use MARQUEE HTML tag. MARQUEE tag can work well for announcements. So, with MARQUEE tag you can easily get animated text effect on your page.



Monday, January 4, 2010

Do not count my visits in GA - cookies

Here is a guide how to exclude your visits from GA (Google Analytics) statistics with help of cookies. If you have static IP address you can learn how to exclude your IP address in google analytics by clicking this link. In linked article you can also find do you have static or dynamic IP address.


This tutorial for excluding your visits in GA is simpler than most other tutorials you can find on Internet about same topic. Main goal of this article is to help blogger users to count off their visits from GA records.


Exclude your own traffic from GA records with cookies


  • First go to web page you track with Google Analytics

  • copy code below and paste this code in address bar of you browser (don't forget to click enter)

    javascript:pageTracker._setVar('DoNotCount');alert('Cookie has been created')


  • With this line of code in browser address bar you will create cookie for visited site with content "DoNotCount" or other if you change colored text. If you want to check created cookie visit my article Check cookies on my computer


  • now you need to create filter


  • In your Google Analytics click Edit

    Edit in Google Analytics

  • Click Add filter in the Filters Applied to Profile box

    Add filter in Google Analytics


  • enter filter name, for filter type choose Custom filter, choose Exclude. For filter field choose User defined. For field pattern enter same text you set in javascript we paste in address bar (colored text, in our example: DoNotCount)

    Custom exclude filter for cookie in Google Analytics

  • now you need to wait few days and GA (Google analytics) will no more count your visits. This guide was tested on my blog and it works.