Show one time greetings to the readers of your website intelligently (With some animation effects)

Show some festival greetings with amazing widget.

If you run a blog you can simply make a post and wish your readers a happy new year or any festival etc. You can wish your readers in different ways, but a small effective way is to add a little window showing your greetings to your readers. If some reader is redirected to a page on your site or blog he'll definitely see that small window wishing him anything that's going on. It can attract users to visit your site again and again.

I should come to point without saying anything else. If you visited my blog for 4 or 5 days you might have noticed a small window in right bottom corner. That's what I am talking about. I've improved it a little bit. Now if you click on the image its larger version will be viewed in a light box with cool animation effects.

Demo

Features:

You don't have to be expert to implement this on your site. Code with simple steps to implement this on your site is given.

Once user hides this greeting window it'll be hidden unless he/she cleans the localstrage allocated to your site. It means once user saw notification and clicked on hide button it'll stay hidden without bothering your reader again.

When you add new image (means different link of new image) it'll automatically show that too. You don't have to do anything with localstorage.

Just configure start date, end date, month, year, image links and title of the image and you are done. (More details on this are given with implementation instructions below)

How to implement this?

Implementing this is really easy as long as you are following these steps carefully.

Add this line in between <head> and </head>:

<link rel="stylesheet" href="//ethow.github.io/show-one-time-greetings/show-one-time-greetings.css">

Add below shown line anywhere between <body> and </body> tags.

<script>
    var greeting_settings = {
        start_date: 21,
        end_date: 31,
        month: 12,
        year: 2014,
        image_link: "http://i.imgur.com/gOcH2nBm.jpg",
        full_image_link: "http://i.imgur.com/gOcH2nB.jpg",
        image_title: "Happy holidays and NEW YEAR"
    };
</script>
<script src="//ethow.github.io/show-one-time-greetings/show-one-time-greetings.js"></script>

Everything highlighted in yellow color can be edited. start_date is the date when greeting will start showing up. After end_date it'll stay hidden. month and year are also required. image_link is the link of the image of 320x246 width and height. full_image_link is the link to full size image. I'll be shown when user clicks on the small image. image_title is the title or description that you want to give to your image.

Think it a small gift from me for new year.

Some details to keep in mind.

start_date, end_date and month can be like this:

Every digit should be written without any leading zeros. (Not acceptable 04)

Year should be like this:

2014 (14 or 014 not acceptable)

How to handle errors?

After including this code in your page, if an error box appears saying jQuery is not available then you don't have to worry. Just add below line of code between <head> and </head>.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Haven't seen demo yet? Here's the link again:

Demo

Happy New Year Guys!

Pages - Menu