Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
On my prior tutorial about the vertical menu, i'v shared how to add vertical menu on the side of blog , today we will discuss the 404 Error Page. 404 error page is the http standart reponse code informs to users that they have clicked on a link that is broken or has been deleted by the admin also it could be due to an error in typing the url.
An 404 error page to function as important as the navigation bar on a website or blog. Sometimes there are visitors who wrong type something and landed on a page error, however we can still communicate and lead them back to the home page, so they can easily search for what they have not been found. Which is part of the function an 404 error page, so we really need to make it look nice on our site.
If you do not have a 404 error page on a website/blog, or already have but only the default error page, and wanted to change it to make it more interesting?. You might have to start thinking to create it, today i will share a little tutorial on How To Create A Cool 404 Error Page On Your Blog.
An 404 error page to function as important as the navigation bar on a website or blog. Sometimes there are visitors who wrong type something and landed on a page error, however we can still communicate and lead them back to the home page, so they can easily search for what they have not been found. Which is part of the function an 404 error page, so we really need to make it look nice on our site.
If you do not have a 404 error page on a website/blog, or already have but only the default error page, and wanted to change it to make it more interesting?. You might have to start thinking to create it, today i will share a little tutorial on How To Create A Cool 404 Error Page On Your Blog.
 |
| Cool 404 Error Page [images source:www.acebangsam.us] |
Let's start to add the cool 404 error page :
Step 1: Login to your blogger panel adminStep 2: Click On Template » Edit HTML
Step 3: Add this code just below the code <body> <b:if cond='data:blog.pageType != "error_page"'>Step 5: Then add the following HTML code bellow just above the code </body>
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
body {background-image:url(https://sites.google.com/site/jhondeoaja/file/darkgrey.jpg);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
@charset "utf-8";
body {background-image:url(https://sites.google.com/site/jhondeoaja/file/darkgrey.jpg);}
#socialbox {margin-top:-370px;width:880px;height:75px;margin-left:auto;margin-right:auto;}
#socialicon {margin-right:10px;float:right;}
#socialicon img {width:50px; height:50px;opacity:.5}
#socialicon img:hover {opacity:.9}
#box {width:970px;height:385px;background-image:url(https://sites.google.com/site/jhondeoaja/file/frame-404.png);
margin-left:auto;margin-right:auto;margin-top:150px;}
a {text-decoration:none;color:#999;}
a:hover{color:#CCC;}
#typebox {width:440px;height:243px;margin-left:508px;margin-top:65px;position:absolute;font-size:12px;color: #999;font-family:"Edmondsans Regular";padding-top:45px;top: 150px;}
#listone {width:200px;height:150px;float:left;margin-top:40px;margin-left:0px;position:absolute;left: 2px;top: 69px;}
#listtwo {width:200px;height:150px;float:left;margin-top:-73px;margin-left:220px;margin-bottom:100px;position:absolute;left: -2px;top: 74px;}
#typebox ul {margin-top:-20px;list-style:none;margin-left:-40px;color: #999;font-family: "Edmondsans Medium";}
#typebox li {list-style:none;margin-left:5px;font-family:"Edmondsans Medium";font-size:12px;color: #999;}
#searchbutton {width:232px;height:23px;line-height:23px;position:absolute;float:right;margin-left:184px;margin-top:40px;top: 100px;background:#444;}
</style>
<script type='text/javascript'>
//<![CDATA[
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//]]>
</script>
<!-- Error Page Start -->
<div id='box'>
<div id='typebox'>
Mohon maaf atas ketidak nyamanan ini, kami akan selalu berusaha untuk yang terbaik buat anda
<div id='listone'>
<ul>
<img src='https://sites.google.com/site/jhondeoaja/file/break.png'/>
<li><img src='https://sites.google.com/site/jhondeoaja/file/dot.png'/><a href='/'>Home Page</a></li>
<img src='https://sites.google.com/site/jhondeoaja/file/break.png'/>
<li><img src='https://sites.google.com/site/jhondeoaja/file/dot.png'/><a href='/p/about.html'>About Us</a></li>
<img src='https://sites.google.com/site/jhondeoaja/file/break.png'/>
<li><img src='https://sites.google.com/site/jhondeoaja/file/dot.png'/><a href='/search/label/Template'>Template</a></li>
<img src='https://sites.google.com/site/jhondeoaja/file/break.png'/>
<li><img src='https://sites.google.com/site/jhondeoaja/file/dot.png'/><a href='/'>Blog</a></li>
<img src='https://sites.google.com/site/jhondeoaja/file/break.png'/>
</ul>
<div id='listtwo'>
<ul>
<img src='https://sites.google.com/site/jhondeoaja/file/break.png'/>
<li><img src='https://sites.google.com/site/jhondeoaja/file/dot.png'/><a href='/p/disclaimer.html'>Disclaimer</a></li>
<img src='https://sites.google.com/site/jhondeoaja/file/break.png'/>
<li><img src='https://sites.google.com/site/jhondeoaja/file/dot.png'/><a href='/p/privacy-policy.html'>Privacy Policy</a></li>
<img src='https://sites.google.com/site/jhondeoaja/file/break.png'/>
<li><img src='https://sites.google.com/site/jhondeoaja/file/dot.png'/><a href='#'>FAQ</a></li>
<img src='https://sites.google.com/site/jhondeoaja/file/break.png'/>
<li><img src='https://sites.google.com/site/jhondeoaja/file/dot.png'/><a href='#'>Testimonials</a></li>
<img src='https://sites.google.com/site/jhondeoaja/file/break.png'/>
</ul>
</div>
<div id='searchbar'>
<div id='searchbutton'>
<form action='/search'> <input class='search' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search....'/> SEARCH FORM</form>
</div>
</div>
</div>
</div>
</div>
<div id='socialbox'>
<div id='socialicon'>
<a href='#' target='_blank' title='Twitter'><img border='0' height='69' id='twitter' name='twitter' src='https://sites.google.com/site/jhondeoaja/sosial-icon/twitter.png' width='65'/></a>
</div>
<div id='socialicon'>
<a href='#' target='_blank' title='RSS Feed'><img border='0' height='69' id='envato' name='envato' src='https://sites.google.com/site/jhondeoaja/sosial-icon/rss.png' width='65'/></a>
</div>
<div id='socialicon'>
<a href='#' target='_blank' title='Facebook'><img border='0' height='69' id='facebook' name='facebook' src='https://sites.google.com/site/jhondeoaja/sosial-icon/fb.png' width='65'/></a>
</div>
<div id='socialicon'>
<a href='#' target='_blank' title='Google Plus'><img border='0' height='69' id='tumblr' name='tumblr' src='https://sites.google.com/site/jhondeoaja/sosial-icon/gplus.png' width='65'/></a>
</div>
</div>
</b:if>That's a little explanation from me about on How To Create A Cool 404 Error Page On Your Blog , i hope this article can help you, also look forward for my next tutorial, see you.