Saturday, December 31, 2016

Animated Happy New Year 2017 Widget for Blogger

This is the first bloggertrix article for 2017. Wish you happy new year 2017 for all bloggers. For this new year, most of are like to show new year wishing widget and decorations to your blog. So, This article helps to add animated Happy New Year 2017 Widget for Blogger. Today I'm gonna share unique style Happy New year 2017 widget for your blog. Its pretty easy to add to your blog. This will work for every blogger templates. I added demo for this widget. You can view it from below demo link before add it to your blog.

If you want to Add New Year 2017 Fireworks Decoration you can visit below article.

New Year Decorations :

Add 2017 New Year Fireworks Decoration for Blogger

Demo

How to add Animated Happy New Year 2017 Widget for Blog

1. Go to Blogger Dashboard > Template
2. Backup your template
3. Click on Edit HTML
4. Find <body> and add below code just after it

<div style="position:fixed;top:0;right:40px;z-index:5000">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg9CiUD3Cdu21T1isKPxMqqUcAZvm5Mzf-Ec4h_D5Yl5yiBaUh9McxaP0oET6adF1OA0CpBk9F9OQhS5-0dhTnty2zDz4KN8vEj0LlIhhZO904bfl8ChELxsfSCZKUA608mokRl4gRkv9w/s1600/bloggertrix2017.gif" /></div>

5. Now save your Template You are done. If you have any problem related to this Happy New Year 2017 widget. Just leave a comment.I will help you. Hope you can be a successful blogger in this year..

Author Bio: Sohan Jayasinghe is the owner and author of Bloggertrix.com .He has been blogging since 2009 and writing Blogger trix since 2010.If you want to contact him, Just leave a message via contact us page or connect with facebook or twitter

How to Add Animate Christmas Tree Widget for Blogger

Few more days for biggest Christmas festival. As a blog writer, you can prepare for it by decorate your blog. So, today I'm gonna share new unique tutorial about how to add animate Christmas tree widget for your blog. This will works with every blogger templates.You can check demo before add it your blog.

You can check our previous snow effects tricks.

More Christmas Decorations :

Demo

How to add Christmas Tree widget for blog

1. Go to Blogger Dashboard > Template
2. Backup your template
3. Click on Edit HTML
4. Find <body> and add below code just after it

<div style="position:absolute;top:0;right:40px;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRF_xKeuJKyQHY6ig7-bYvSoOserYNKn36_d58IV7Z1S_uQkn9yPnIHC1CoYna-xUrVY4DvZUBdCyorryYS-fkgTJROn05yrQmWhBZ-mN77qvQabxxsTLlWZz67QUCTK4_JJAFtPFHDJ8G/s1600/tree.gif" /></div>
<div style="position:absolute;top:240px;right:15px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhglORiYkrZIE98-mI5NL9Swh4qNj9yTV0qUjcQtwJDAr4-6XzrF-I-0HnH31p09BjMspIHQXzVPjd6hfIGFFyEZr_LXFtDXA2-UreI4j4AqS4hY0N-iHgTi9k80W7qohpDALG2xGw0KuGY/s1600/christmas.gif" /></div>

6. Now save your Template You are done. If you have any problem related to this Christmas tree widget. Just leave a comment.I will help you.

How to add Unique Snow Falling Effect to Blogger

Most of blogger are use snow falling effect to their blog. It is a common trend all bloggers to in specific seasons.Snow falling effects are very famous in Christmas season. Sometime, evrn we search about snow falling effects for blogger, hard to get working versions.Therefore, today we will learn how to add snow falling effect to your blog.You can check our previous snow effects tricks.

Must Read :

Demo

Awesome 3d Effect CSS Menu bar for Blogger

1. Go to Blogger Dashboard > Template

2. Find </head> tag
3. Paste below code just above it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script src="http://preview.bloggertrix.com/bloggertrix_christmas/snow.js"></script> <style>
img.bg {
min-height: 100%;min-width: 1024px;
width: 100%; height: auto;
position: fixed; top: 0;left: 0;}
h1 {
font-family: 'Chelsea Market', cursive;
color: #FFF;font-size: 90px;text-align: center;line-height: 95px;font-weight: normal;
margin-top: 350px;text-shadow: 5px 5px 5px #000;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg { left: 50%;margin-left: -512px; /* 50% */}
}
html, body {
font-family: Helvetica, Arial, sans-serif;font-size: 12px; line-height: 16px; padding: 0;
margin: 0;color: #333;
}
.bar {background-color: #111;color: #f0f0f0; box-shadow: 0px 0px 2px #333;
line-height: 25px;padding: 0px 20px;opacity: 0.7;
}
.bar:hover {opacity: 1;}
.bar a {color: #DDD;}
.bar a:hover {color: #FFFFFF;}
a { color: #CCC; text-decoration: none; }
a:hover { color: #FFFFFF; }
#canvas {border: 1px solid black;position: absolute;z-index: 10000; }
#flake {color: #fff;position: absolute; font-size: 25px;top: -50px;}
#page {position: relative;}
</style>