Halaman dengan error 404, adalah sebuah halaman yang kerap kita jumpai pada situs web saat kita melakukan pencarian baik itu dari Google Search Engine maupun pencarian internal suatu situs. Pada umumnya jika bounce/pentalan ke halaman tidak ditemukan padahal kita mendapatkan sumber tersbut dari google search itu biasanya terjadi apabila si pemilik menghapus postingan yang mengarah ke halaman tersebut sehingga munculah pesan 404 Not Found. Membuat animasi pada halaman error 404 not found menggunakan JQuery dan CSS. Untuk itu perlu adanya penanganan terhadap kasus ini yaitu dengan cara membuat halaman yang lebih kreatif dan sertakan beberapa link yang mengarah ke beranda maupun halaman tertentu agar pengunjung bisa menemukan informasi yang berkaitan dengan yang diinginkannya.
Perlu dipahami bahwa adanya kesalahan error 404 adalah suatu kesalahan dan kekurangan yang akan mempengaruhi SEO (Search Engine Optimization) situs Anda. Oleh karena itu kita harus pandai-pandai alias harus pintar untuk menyikapi page not found ini. Alasana mengapa Error 404 menjadi nilai negatif yang memepengaruhi SEO akan kita bahas pada postingan berikutnya.
Namun, tentu kita harus mempunyai solusi yang tepat untuk mengatasi masalah ini, salah satunya dengan memaksimalkan halaman error not found menjadi suatu keuntungan baik kepada situs kita, maupun kepada pembaca yang sudah berkunjung.
Berikut ini adalah script CSS yang bisa Anda gunakan untuk membuat tampilan animasi roket sebagai solusi untuk page 404 not found.
Langkah-langkah membuat halaman error 404 not found menjadi keuntungan bagi situs kita, yaitu dengan cara membuat halaman 404 bermanfaat yang berisikan skrip berikut ini :
Script CSS
<style type="text/css">#rocket {
width:100%;
height:350px;
background:url('http://demo.tutorialzine.com/2010/08/animated-404-not-found-page-css-jquery/img/rocket.png') no-repeat;
margin:50px auto 50px;
position:relative;
}
/* Two steam classes. */
.steam1,
.steam2 {
position:absolute;
bottom:78px;
left:50px;
width:80px;
height:80px;
background:url('http://demo.tutorialzine.com/2010/08/animated-404-not-found-page-css-jquery/img/steam.png') no-repeat;
opacity:0.8;
}
.steam2 {
/* .steam2 shows the bottom part (dark version) of the background image. */
background-position:left bottom;
}
hgroup {
/* Using the HTML4 hgroup element */
display:block;
margin:0 auto;
font-family:'Century Gothic',Calibri,'Myriad Pro',Arial,Helvetica,sans-serif;
text-align:center;
}
h1 {
color:#76D7FB;
font-size:60px;
text-shadow:3px 3px 0 #3D606D;
white-space:nowrap;
}
h2 {
color:#9FE3FC;
font-size:18px;
font-weight:normal;
padding:25px 0;
}</style>Berikut ini source code javascript untuk membuat animasi pada gambar rocket.
Script untuk JQuery
<script type="text/javascript">$(window).load(function(){
// We are listening for the window load event instead of the regular document ready.
function animSteam(){
// Create a new span with the steam1, or steam2 class:
$('',{
className:'steam'+Math.floor(Math.random()*2 + 1),
css:{
// Apply a random offset from 10px to the left to 10px to the right
marginLeft : -10 + Math.floor(Math.random()*20)
}
}).appendTo('#rocket').animate({
left:'-=58',
bottom:'-=100'
}, 120,function(){
// When the animation completes, remove the span and
// set the function to be run again in 10 milliseconds
$(this).remove();
setTimeout(animSteam,10);
});
}
function moveRocket(){
$('#rocket').animate({'left':'+=100'},5000).delay(1000)
.animate({'left':'-=100'},5000,function(){
setTimeout(moveRocket,1000);
});
}
// Run the functions when the document and all images have been loaded.
moveRocket();
animSteam();
});</script> Menampilkan Objek Rocket
Halaman untuk menampilkan animasi dari CSS dan Jquery yang telah kita buat sebelumnya adalah menggunakan skrip di bawah ini :
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating an Animated 404 Page | Tutorialzine Demo</title>
<!-- Internet Explorer HTML5 enabling script: -->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="rocket"></div>
<hgroup>
<h1>Page Not Found</h1>
<h2>We couldn't find what you were looking for.</h2>
</hgroup>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="script.js"></script>
</body></html>Namun perlu diperhatikan jangan lupa mendownload atau memasang library jquery.min.js.
Simulasi Animasi pada 404 Page
Setelah mendapatkan source code untuk membuat animasi roket, maka berikut ini kita lihat bagaimana simulasi dari halaman 404 yang telah kita buat statis.
Page Not Found
We couldn't find what you were looking for.
Download di sini : Animasi Error 404 Page Not Found
World Series 2019 Live Stream “Each year, as stipulated in the basic agreement between the players union and Major League Baseball,
ReplyDeleteThe 22-year-old was the club's designated hitter in Games 1 and 2, and started in left field for Game 5in World Series 2019 Live Stream.
ReplyDelete