Awesome And Stylish Custom 404 Page With List Of All Posts

Whenever a web server is unable to locate a requested page, it returns a 404 error. These errors are often caused by users who input wrong addresses, but a site redesign can also result in a lot of incoming links that point to nonexistent pages or deleted. A visitor who arrives at a 404 page is highly likely to bounce, or immediately leave the website, because default error pages cause users to disengage from the content. That means a custom 404 page can be a perfect opportunity to reengage a portion of the readership, which can pull those valuable users back into the content of a site. Default 404 pages have changed very little over the years. Web servers provide bare bones 404 pages, and some browsers also include default error pages that are a little more helpful. These error pages are just designed to convey basic information, which means they do an extremely poor job of retaining users. Over the years, most people have become accustomed to simply closing their browser windows whenever a 404 error shows up.

You have to make it user friendly because the visitor will 101% disappointed after seeing that there required page is not found so don't let him angry but make it happy that i came here...There are a lot of different ways to handle a customized 404 page,some buddies share many of beautiful design pages having rest of page clear or gadgets but here i am sharing my own ideas that when visitor did not find there target then he is going to leave the sites or blog but when they see that there is another a list of HOT article available here the start seaching again and be happy. So first see the DEMO and then if you like this use it...
This page is designed with the help of AbuFarhan widgets.

CLICK HERE TO SEE DEMO

Features:

1.) An Awesome Image.
2.) A "List Of Your Blog's All Post" Under There Labels.
3.) Change Able Text.

4.) Easy To Install.

5.) Stylish And Beautiful Design.


How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

<h3>Oop's, This Page Is Deleted Or Move Under Other Title.</h3>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG33Ic9-Z9nvQa6JR6Ghe-YgGNHSWvnDicw21ec2vhhCRgUN_4R81JB3TR34OYjk4VUgzmYRMEE-UB-2f_1oDJ2KncFsflPrOwG_rRg9KSCCuhHcuvjNqRRopdAxLSiHs8_XXxT9GU_A/s491/EXEIdeas-Custom-404-Error-Page.png"/>

<h3>Please Search Your Topic From The Given List...</h3>

<style type="text/css">

.judul-label{

background-color:#E5ECF9;

font-weight:bold;

line-height:1.4em;

margin-bottom:5px;

overflow:hidden;

white-space:nowrap;

vertical-align: baseline;

margin: 0 2px;

outline: none;

cursor: pointer;

text-decoration: none;

font: 14px/100% Arial, Helvetica, sans-serif;

padding: .5em 2em .55em;

text-shadow: 0 1px 1px rgba(0,0,0,.3);

-webkit-border-radius: .5em;

-moz-border-radius: .5em;

border-radius: .5em;

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

-moz-box-shadow: 1px 1px 4px #AAAAAA;

box-shadow: 0 1px 2px rgba(0,0,0,.2);

color: #e9e9e9;

border: 2px solid white !important;

background: #6e6e6e;

background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));

background: -moz-linear-gradient(top, #888, #575757);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');

}

.data-list{

line-height:1.5em;

margin-left:5px;

margin-right:5px;

padding-left:15px;

padding-right:5px;

white-space:nowrap;

text-align:left;

font-family:"Arial",sans-serif;

font-size:12px;

}

.list-ganjil{

background-color:#F6F6F6;

}

.headactive{

color: #fef4e9;

 border: 2px solid white !important;

 background: #f78d1d;

 background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));

 background: -moz-linear-gradient(top, #faa51a, #f47a20);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');

}

</style>

<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>

<script src="http://www.----------.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

<script type="text/javascript"> var accToc=true; </script>

Customization:
1.) Change Red Text If You Want.
2.) Change The URL To Your's Own In Blue.
3.) Save And Done.