With the introduction of latest search preferences by Blogger, BlogSpot blogs are now far more optimized than they used to be before. One of the features was "Errors and redirections" The "404 Error"
in simple terms is a page that appears when a broken link is clicked
and it tells the visitor that the page he clicked no more exits or is
deleted. The error page loads inside your post body surrounded a dull
grey box. By default you can only add plain text along with HTML tags
inside the "Custom Page Not Found"
input box using search preferences option page. The message display
using this technique looks pretty ugly and we would therefore need a
better approach to design a creative 404 Message for a BlogSpot blog. Design 404 Error Page For Blogger
The reason why a box appears around the error message is because of
Blogger's default style sheet for status messages. We would therefore
override the existing style sheet for the error_page alone using
conditional statements. I will be using the CSS code prepared by my
friend aneesh joseph which really make things simple and would add slight modifications to make the error box more attractive.
Our 404 page will prompt visitor that he has landed a wrong page and will provide him three important options which are:- Go Back to the page from where he came from. We will use JavaScript here.
- Contact the Admin and inform him about the broken link. This will help you track broken links
- And finally to provide a link to homepage.
- Go To draft.blogger.com > Settings > Search Preferences
- Click on Edit link next to : Custom Page Not Found
- Inside the box paste the following code:
<!-- MBT Default Template -->
<div class='MBT-404-box'>
<p style='line-height: 30px'><strong>
<font color='#ff0000' size='5'>
Oops!
</font> <font color='#666666'>
Looks like you either clicked a broken link or a Page that no more exits. Kindly do one of the followings:
</font></strong></p>
<ol style='line-height: 25px'>
<li><a href='javascript:history.go(-1)'>« Go Back</a> </li>
<li>Report the Problem to us by <a href='http://contact.mybloggertricks.com'>Clicking Here</a>    (<em>This will help us serve you even better</em>) </li>
<li>Go To Homepage by <a href='http://www.myblog.com'>Clicking Here</a>
<br/></li>
</ol>
<p>
<br/>
<br/>
<br/></p>
<p align='center'><font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p>
<p> </p>
<p align='center'/>
<p align='center'><font size='5'>Page Not Found!</font></p>
</div>
Make these customizations:
- You can edit the bolded texts with anything you like
- Replace http://contact.myblog.com with link of your contact page
- Replace http://www.myblog.com with your homepage link
5. Now go to Template > Edit HTML
6. Search for this ]]></b:skin>
7. Just below it paste the following code stylsheet code:
<b:if cond='data:blog.pageType == "error_page"'>To change the background colour of the box edit #FFFFFF
<style type='text/css'>
.status-msg-wrap {
font-size: 100%;
margin: none;
position: static;
width: 100%;
}
.status-msg-border {
display:none
}
.status-msg-body {
padding: none;
position: static;
text-align: inherit;
width: 100%;
z-index: auto;
}
.status-msg-wrap a {
padding: none;
text-decoration: inherit;
}
.MBT-404-box {
background:#FFFFFF;
width:98%;
margin:10px 0px;
padding:20px 10px;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
}
</style>
</b:if>
8. Save your template
9. Done!
Visit any page of your blog that do not exist to see it working just perfectly. You may type anything after your blog address to see the 404 error appearing. For example like:
http://yourblog.blogspot.com/blablabla
or
http://yourblog.blogspot.com/xyz
or
http://yourblog.blogspot.com/anything-here
etc....
What's next?
I am working on some exciting new designs for the 404 error page display
and will share latest 404 templates soon. Do let me know if you got
into some trouble. Make the best out of blogger. Peace pals! :)
The
contact form that I am using on this blog is from emailmeform and it is
all free but customized using CSS. I previously published a post on how
to customize contact form
provided by emailmeform but later due to change in the coding provided
by them the styling do not work for new forms so today we will learn to
create a simple contact form with no company Ads and along with an
upload option that will allow your visitors to send you files straight
from your website. The files can be a text file, video, audio, pdf, gif,
png, anything. Follow these steps:
Just few months back I wrote a post on how to add a Recent Posts Widget by Feedburner to your Blogger and Typad blogs and today we will learn a similar tutorial based on a really attractive and fast loading 
Today's tutorial is the most demanded and most wished but rarely
answered in blogosphere. For some designers customizing the Blogger
Comment Form is somehow not possible whilst for others it is tricky but
from today onwards InshAllah every blogger will actually be able to
customize the Blogger Comment Form in the best way possible! After some
trial and errors we actually succeeded in altering Blogger’s official
CSS coding. We are happy to have brought you with a tutorial that will
indeed enable you to have a customized Comment Form far better than that
of Wordpress, Typad etc. 
One
of the very first things that any web owner likes to do after
purchasing a domain is setting up a branded Email address ending with
the domain name. Blogger users who purchase a domain
often find it difficult to set the MX records in their webhosting
account, thus they don't bother using a branded email address. If your
website address is www.example.com then your branded email Id would look like yourname@example.com. You will be able to access it using the address mail.example.com.
The best thing about todays' tutorial is that we wont be using
inefficient webmail services like roundcube, squirrelmail or horde that
you often find in your hostgator webmail clients. We will be using 
In 2009 
