How to make Beautiful Custom 404 error page in Blogger

"The 404 or Not Found error message is a HTTP standard response code indicating that the client was able to communicate with the server, but the server could not find what was requested." In simple words the page that will be displayed when the actual page is not found is called a 404 Error Page.  Now Blogger Error pages use the same template .This would help template designers in making up custom beautiful 404 Pages.This tutorial will help you in setting up a Custom stylish mouse hover effect 404 page for your Blog.You may seen many 404 designs and images but this is very stylish and and made up of no image .This will also make your blog more professional.This is the much needed one for Every developing or developed blog. Lets see the Live Demo

Demo

By Default, your Blogger Error page will display this error message

You can Customize this message beautifully to something else from the Blogger Settings.

 Copy the below codes and paste in that box

<style type="text/css"> #error-404 { border: 20px solid #1B1B1B; border-radius: 240px 240px 240px 240px; height: 240px; margin: 0 auto 40px; text-align: center; transition: all 0.8s ease 0s; width: 240px; } #error-404:hover { border-color: #333; } #error-404 span { color: #FA4C29; font-size: 100px; font-weight: bold; line-height: 240px; } .large-heading { font-size: 48px; line-height: 1.2em; } .light-heading { font-weight: 400; } .status-msg-bg { background-color: transparent; } .sidebar-wrapper, .page-header { display: none; } .main-wrapper { margin-right: 0; } .outer-wrapper { min-height: 0; } .status-msg-border { border: 0 none; } </style> <div id="error-404"> <span>404</span>

</div> <h1 class="large-heading" style="text-align: center;">Page not found.</h1> <h2 class="light-heading" style="text-align: center;">Please check that there isn&#8217;t a typo in your URL.</h2>

That all! You have a beautiful 404 error page in your blog.Do not forget to share and comment about this post :)

Read More

Jquery Closable Christmas wishing widget for Blogger

As Christmas is nearing , Every blogger will be thinking of wishing there users and there family.This makes the bloggers to be friendly with there visitors.There are many christmas decorative widget for blogger which can make your blog to load slow and give ugly appearance.That goodies also make your post unreadable to your users .Do you want to wish your users or make them to get away from your site??

So to avoid this, I camed with a new widget which wishes your users beautifully and attractively.This is fast loading and does not increase your blogs load time.This widget is user friendly as it comes with closeable button too.This also make your blog professional! Live preview can be viewed in this blog.want on for you blog also? Just follow these simple steps.

How to install this widget in your blog?

• Go to Blogger.com and open your dashboard.
• Go to layout menu and open a new desirable widget box and paste this codes in that.

 <style>

/*--Widget by truebloggertricks.blogspot.com--*/

#announcement{
width: auto;
font:bold 15px Trebuchet MS;
border: 2px solid #FF0000;
border-radius: 20px;
margin: 0 40px 5px 40px;
text-align: center;
padding:15px 10px 15px 70px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #FF0000;
background-color: #F9EAD4;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7X7I4ugWliIatKSH5qRJnE7jYY0FbKVumkMhwHjQ7gv99fffEBElOmjPrEf82xFSLOCVgXHx2rdsJj8rn2kHB4yrfYgtczTayzas-XCBwhjQbUlXbMfBxQduBJeaIVtJYtr6JpRgmheU/s1600/two_christmas_bells_ringing_ty_clr.gif');
}
</style>
<script src='http://code.jquery.com/jquery-1.2.3.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".close").click(function(){
$("#announcement").remove();
});
$("#announcement").fadeOut(800).fadeIn(800)
.fadeOut(400).fadeIn(400)
.fadeOut(400).fadeIn(400);
});

</script>
<div id='announcement'>
<a class='close' href='#close' style='float: right;'><img border='0' src='http://cdn1.iconfinder.com/data/icons/nuvola2/16x16/actions/button_cancel.png'/></a>
<center>
Wish You a Merry Christmas to All our Visitors and Their Family.
</center></div>

Or you can use this easy install option.Just click and install this widget in your blog.

Thats all!!. We whole heartly wish a merry and happy Christmas to you and your family members. You can also share your wishes via comments.  

Read More

Simple Fog Effect for Blogger post Image

Maybe you are boring with the image on your blog. Because the image does't has any effect. Now we will add some effect to your image. That's Simple Fog Effect for Blogger Image. Usually fog effect can be called with "Blur". The effect is when you put your cursor on the image, the image will be foggy. See the demo

Nice right? OK, if you want to try Simple Fog Effect for Blogger Image, just follow the steps below.

1. Log in to your blogger icon

2. Go to Design --> Edit HTML

3. Copy the code below, and paste above ]]></b:skin>

.truebloggertricks-blur img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.truebloggertricks-blur:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}

4. Click SAVE TEMPLATE

Then to "call" the effect just add some code, so the image code will be like this

<a class="truebloggertricks-blur" href="http://truebloggertricks.blogspot.com/"><img alt="blogger icon" border="0" src="YOUR IMAGE URL" /></a>

So easy right?

Read More

How to Add Drop Shadows Effect to Images in blogger

With drop shadows effect to images, our blog images will given a kind of shadow which will surround beside the images. So, the images will look attractive. This effect is active when you put your cursor on the picture, then the picture will expand and there are drop shadows effect. For additional info, drop shadows effect is used CSS (CSS 3), so your blog is not too heavy. Now, if you want to know how to add drop shadows effect to images, just follow the steps below.

1. Log in to your blogger account

2. Go to Design --> Edit HTML

3. Copy the code below, and paste above ]]></b:skin>

.truebloggertricks-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}

.truebloggertricks-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

4. Then, when you will use drop shadow effects to images, use this code

<div class="truebloggertricks-CSS3">
<img src="IMAGE URL" />
</div>

=> Change IMAGE URL with your image URL choice

5. Done!

How to add Zoom Hover Effect to Image in blogger

Hi friends! Maybe you've heard about How to Add Drop Shadows Effect to Images. Now, we will make new effect. That's Add Zoom Hover Effect to Image. Shortly, when you put your cursor on an image, the image will be zoom (larger). Do you want to try the demo? OK, this is it. And if you want to know how to make the effect, just follow the steps below.

1. Log in to your blogger account

2. Go to Design --> Edit HTML

3. Copy the code below, and paste above ]]></b:skin>

.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

4. Then if you want to active the effect, use this code

<a class="hovergallery" href="http://truebloggertrick.blogspot.com/" target="_blank">
<img src="http://1.bp.blogspot.com/-ycrEcnVzJAs/TcXGWwcjL3I/AAAAAAAAAYQ/MiQNmK44ZOg/s200/fullblogtricks-blogger-icon.jpg" /></a>

=> Replace the blue code with your link
=> Replace the red code with image URL

5. Finish... Hopefully useful..

Read More