Christmas snowfalls with breeze for Blogger 2012

Christmas is one of the largest festival celebrate all over the world. Christmas is the much awaited festival that knock the door of all Bloggers. And all are thinking about decorating their blog. How to decorate the blog with snowfalls and clouds ? Do you like to decorate your blog with beautiful snowflakes and clouds? Then here there is a article about how to add snowflakes with breeze to your blogger blog.

If your Blog has a dark interface then this widget serves better.The Snow flakes and the breeze are  in white color so dark background will be better to get a good look.


If you want to get dark Christmas background ,set the following picture or search darker Christmas backgrounds.
Do you want to know how this work
Click below to view the demo

View Demo

• Sign in to your Blogger Account
• Go to Template > Edit HTML
• Find ]]> (Find using ctrl + F)
• Copy the following CSS code above it [Alternate Way to copy css code]

/*-- Breeze for Snow flakes --*/
#mbl_snowflakes {
position: absolute;
height: 950px;
width: 966px;
overflow: hidden;

}
#snowContainer > div
{
position: absolute;
width: auto;
height: auto;
-webkit-animation-iteration-count: infinite, infinite;
-webkit-animation-direction: normal, normal;
-webkit-animation-timing-function: linear, ease-in;
}
#snowContainer > div > img {
position: absolute;
width: auto;
height: auto;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-transform-origin: 50% -100%;
}
@-webkit-keyframes fade
{
0% { opacity: 1; }
95% { opacity: 1; }
100% { opacity: 0; }
}

@-webkit-keyframes drop
{
0% { -webkit-transform: translate(0px, -50px); }
100% { -webkit-transform: translate(0px, 650px); }
}
@-webkit-keyframes clockwiseSpin
{
0% { -webkit-transform: rotate(-50deg); }
100% { -webkit-transform: rotate(50deg); }
}


@-webkit-keyframes counterclockwiseSpinAndFlip
{
0% { -webkit-transform: scale(-1, 1) rotate(50deg); }
100% { -webkit-transform: scale(-1, 1) rotate(-50deg); }
}

•  Search and copy the following below it

• You are done... Save the Template

How to Change comments style on Blogger?

First of all i'm saying sorry to all for the delay of posting.
This is a tutorial about how to style your comments block with effective designs.
This is done using Simple css Scripts.
The demo of a styled comments block is as follows.

Click the link below to see demo
Demo page
What's inside this article?

• Comments Style version 1.0
• Comments Style version 2.0

• Sign in to the Blogger Account
• Select Template and click Edit HTML (Click on Proceed)
• Find ]]> (Find using ctrl + F) [Alternate Wayt to copy css code]
• Copy any of  the type of below css code  just above it.
• Click on Save
  

Comments Style version 1.0

.comments .comment .comment-actions a {
background: none repeat scroll 0 0 #FFD99E;
border: 2px solid #FFB43D;
border-radius: 3px 3px 3px 3px;
color: #000000;
font: bold 12px arial;
margin-right: 14px;
padding: 3px 9px;
text-decoration: none !important;
text-shadow: 1px 1px 0 #FFFFFF;

}

.comments .comment-block {

background: none repeat scroll 0 0 #E2E2E2;
border: 4px solid #ABABAB;
border-radius: 3px 3px 3px 3px;
padding: 3px 10px;

}

.continue a {
background: none repeat scroll 0 0 #FFD99E;
border: 2px solid #FFB43D;
border-radius: 3px 3px 3px 3px;
color: #000000 !important;
display: inline-block !important;
margin-top: 7px;
padding: 3px 8px !important;
text-decoration: none !important;
text-shadow: 1px 1px 0 #FFFFFF;
}
.comment-block:hover > .comment-header {
border-bottom: 2px solid #000;
-moz-transition: border-color .5s ease;

}

.comment-header a {

color: #000000 !important;

}

#comments .avatar-image-container img {
border: 2px solid #FFFFFF !important;
border-radius: 50px 50px 50px 50px;
height: 57px;
max-width: 57px;

}

.comments .avatar-image-container {
border: 2px solid #FFFFFF;
border-radius: 34px 34px 34px 34px;
box-shadow: 1px 1px 3px #ABABAB;
float: left;
margin-left: -40px;
max-height: 60px !important;
overflow: hidden;
width: 60px !important;
}

Comments Style version 2.0

.comments .comment-block {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghs0ds3go6EBzNpx0vzd6lsj0bh6nTSGAH8XfmUByF_JV-g94_mGGTVEoSrdyprpEW7pS_w6U0fSUZEEMArk7BEUFw0aGFk1U-_vsLW2hMJEv7ORWNuCtTljmCsFUlnIntYeDzcRnr-ro/s1600/bg.png") repeat scroll 0 0 transparent;
border: 4px solid #EAEAEA;
border-radius: 3px 3px 3px 3px;
box-shadow: 3px 3px 0 #D6D6D6;
margin-left: 48px;
padding: 3px 10px;
position: relative;
}
#comments .avatar-image-container img {
border: 2px solid #FFFFFF !important;
border-radius: 50px 50px 50px 50px;
height: 57px;
max-width: 57px;
}
.comments .avatar-image-container {
border: 2px solid #FFFFFF;
border-radius: 34px 34px 34px 34px;
box-shadow: 1px 1px 3px #ABABAB;
float: left;
margin-left: -40px;
max-height: 60px !important;
overflow: hidden;
width: 60px !important;
}
.comment-header {
border-bottom: 2px solid #F1F1F1;
}
.comment-block:hover > .comment-header {
-moz-transition: border-color 0.5s ease 0s;
border-bottom: 2px solid #000000;
}
.comments .comment .comment-actions a {
background: -moz-linear-gradient(center top , #EEEEEE 0%, #CCCCCC 100%) repeat scroll 0 0 transparent;
border: 2px solid #E0E0E0;
border-radius: 3px 3px 3px 3px;
color: #000000;
font: bold 12px arial;
margin-right: 14px;
padding: 4px 11px !important;
text-decoration: none !important;
text-shadow: 1px 1px 0 #FFFFFF;
}

Protect all images in your Blog jquery trick

Here is a most important trick every blogger need. This trick is about how to protect all your images in your blog with a transparent image covered on it. I recently posted an article about How to protect images? .This article about to protect all images.

Related Articles
How to protect images in your blog?
Do you want to see demo? Try to save picture in this blog.
----------------------------------------------------------
What's inside this article

• 1. Protect only First image in every Post
• 2. Protect all images in every post

 Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)

• Go to Template->Edit HTML [A dialog box appears click Proceed]
• Copy and paste the below code and save it

Protect all images in every post

I think you liked this article...please like and share..

Protect your images Blogger image hack

This is an awesome trick to protect your images.You can protect your images from copying with this Simple CSS Blogger Tricks.After applying this trick the person who save the image will get a transparent image instead of the original image.







Demo

Try to Save the below image


Protect your image Trick for all images (UPDATED VERSION)
What's inside this article
Protect your image Trick 1 -With overlap image
Protect your image Trick 2 -With span background image

Protect your image with CSS overlapping

• Go to Blogger Account
• Use the Following trick

•  You can use this code anywhere, if you want to protect an image in your post. Add image and switch to HTML tab and copy the URL of image(eg- http://3.bp.blogspot.com/-xxxxx/xxxxx/s1600/name-of-image.jpg) and paste to that code mentioned above.
• That's it.

Protect your image with SPAN background

• Use the following code

 

• You are done..

If you liked this article please share and like....

Awesome NetOopsblog Subscription Widget for blogger

This post is about how to add a Subscription Box like our NetOops blog. Subscription box contains Facebook, Twitter, RSS Feed, e-mail subscription. This widget is based on a wooden theme. Facebook, Twitter, RSS Feed links are shown as Natural Wooden Sticky Boards. In this tutorial i am adding a new e-mail subscription box with wooden theme.




 

Demo is in the Right of this Blog

What's inside this article??

• Subscription Box Widget with Fully Wooden Theme
• Subscription BoX Widget with Basic Wooden Theme

Subscription box with Fully Wooden Theme

• Go to Blogger Dashboard
• Go to Layout 
• Select Add a Gadget
• You can type title any
• And Copy the following code in the content.

Demo of Fully Wooden Theme

 Important: If you don't want Mouse over effect of Images in the Subscription box, please delete the RED highlighted code,. If you want then leave it there.

<style type="text/css">
 /* Delete form Here*/ 

img.beintouch:hover {

    background: none repeat scroll 0 0 #D6D6D6;

    border-radius: 16px 16px 16px 16px;

    box-shadow: 0 0 10px #565656;

}

/* Delete to Here*/
.emailtext {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTTYM0QDeLvPd-lDCi0Elf-8X3ZS9bJsEVYdHZdi0np1KUpZBdLemv6jch8OJ4oJvUGnO0ODDyc4iZc6yZ3lNXAgm6BYT5jPtdNXw9yjgOg-_AxXW72MXEQ80t5tbY_04ReKS-J5EcwPk/s1600/mailbox.png") no-repeat scroll 4px center transparent;
    border: 1px solid #7E4E27;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 4px #7E4E27 inset;
    color: #444444;
    font-weight: bold;
    margin-left: 2px;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
    width: 176px;
}
.ebutton {
    background: -moz-linear-gradient(-45deg, #3C1F0E 0%, #D28A47 30%, #F9E183 30%, #D28A47 55%, #3C1F0E 100%) repeat scroll 0 0 transparent;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    margin-left: -18px;
    margin-top: 5px;
    padding: 6px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #000000;
}

http://www.facebook.com/pages/NetOops-Blog/159796530791611">

http://twitter.com/netoopsblog/" rel="nofollow">

http://feeds.feedburner.com/NetOopsBloggerTricks" rel="nofollow">

Get Latest Tips via e-mail

netoopsbloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">

Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively.

Subscription box with Default Basic Wooden theme

• Go to Layout 
• Select Add a Gadget

 Important: If you don't want Mouse over effect of Images in the Subscription box, please delete the RED highlighted code,. If you want then leave it there.

<style type="text/css">
 /* Delete form Here*/ 

img.beintouch:hover {

    background: none repeat scroll 0 0 #D6D6D6;

    border-radius: 16px 16px 16px 16px;

    box-shadow: 0 0 10px #565656;

}

/* Delete to Here*/

.emailtext {

    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTTYM0QDeLvPd-lDCi0Elf-8X3ZS9bJsEVYdHZdi0np1KUpZBdLemv6jch8OJ4oJvUGnO0ODDyc4iZc6yZ3lNXAgm6BYT5jPtdNXw9yjgOg-_AxXW72MXEQ80t5tbY_04ReKS-J5EcwPk/s1600/mailbox.png") no-repeat scroll 4px center transparent;

    border: 1px solid #D3D3D3;

    border-radius: 4px 4px 4px 4px;

    box-shadow: 1px 1px 2px #CCCCCC inset;

    color: #444444;

    font-weight: bold;

    margin-left: 2px;

    padding: 7px 15px 7px 35px;

    text-decoration: none;

    width: 176px;

}

.ebutton {

    background: -moz-linear-gradient(center top , #FBFBFB 0%, #F4F4F4 100%) repeat scroll 0 0 #ABAB12;

    border: 1px solid #D3D3D3;

    border-radius: 4px 4px 4px 4px;

    color: #444444;

    cursor: pointer;

    font-weight: bold;

    margin-left: -18px;

    margin-top: 5px;

    padding: 6px 15px;

    text-decoration: none;

}

http://www.facebook.com/pages/NetOops-Blog/159796530791611">

http://twitter.com/netoopsblog/" rel="nofollow">

http://feeds.feedburner.com/NetOopsBloggerTricks" rel="nofollow">

Get Latest Tips via e-mail

netoopsbloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">

Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively.

I think this widget helps you, Please share and like...

How to Backup/Restore template in new blogger interface?

Here i'm saying about an important topic that i had posted early " How to Backup/Restore Blogger Template? ". But i'm going to show you How to Backup/Restore  Blogger Template in New Blogger Template . Now a days Blogger default interface is Upgraded New Blogger Interface. Backup/Restore Template is so important,So don't take this as a silly matter.
Read Following see How to backup template in New Blogger Interface..

CHECKOUT OTHER SIMILAR POSTS

•  How to Backup/Restore Old Blogger Interface

How to Backup/Restore Template

• Go to Blogger Account
• Select Template [as shown in fig.]

• Click on the Button Backup/Restore  in Left top .

•  A box appears [as shown in fig.]

• As shown in the above fig. 
• Click on Download Full Template to download Template.Save it
• Click on the Browse to Restore the early downloaded Template.
• That's all ..Enjoy with us...

Check out other Blogger Tricks HERE and Blogger jquery Widget Generators HERE

Optimize your post title to H1 tags better SEO Blogger Hack

This is an important SEO Blogger trick to increase SEO. Heading tags have a great importance in Search engine results, Heading tags helps Search engines to recognize what is important in your blog.Heading are form H1 to H6 .H1 tags have higher priority.So we are going to hack blogger template by changing H3 tags to H1 tags. By default blogger post title is in H3 tag,here is a trick to change it to H1 tag for more SEO.

• Go to Blogger Account
• Select Template -> Edit HTML [click Proceed] 
• Find the code like below [Find easily using Crtl+F]
• Or simply find

     
       
     
       
         
           
         
           
         
       
         
       
     
 

• and Change it with

  [Change all H3 to H1]

• Change all H3 tags with H1 tag
  
• Done ..Wait for few weeks you can find the change in Google SERP.
• Your Blog pages will show in Google Search Page.

Update [21.11.2012] : I have noticed that this trick displays error in some webmaster like Bing. If you get error message from the webmaster then change the H1 tags which we changed before to H2.
Note: Only change the H1 tags you changed earlier.
Google Webmaster will not show error on this trick.

I think you enjoyed this ..if so please share...

Protect Your Blog posts from Copying Blogger Trick

Copying blog posts or articles from sites/blogs on internet is a usual thing.Here i am going to share you how to protect your blogger posts/articles form getting Stolen.This is a trick to lock your text and the visitors of your blog can't select the text only they can read the text. If they cracked that method and select the text there is another trick to disable right click menu,so they can't copy text.. Enjoy...

To view Demo click the link below:- Open this link and try to select text..Or do a right click..

View Demo

Copy the Following CSS codes to your Blog

•  Go to Blogger Dashboard
• Select Template->Edit HTML click Proceed    [or Use Alternate Way to copy CSS code]
• Find ]]>
• Copy the following code  and save

-moz-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
-ms-user-select:none;
user-select:none;

Disable Right Click

• Copy the following code inside

Add CSS code

• Add the following css code before ]]> (Add CSS code another way)

.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
#blog-pager{height:100% !important;}