Ditulis oleh: Ditulis pada: 12/29/2014
Error 404 sudah lazim terjadi di dunia internet. Error 404 muncul ketika sebuah halaman yang dicari atau dituju pengunjung ternyata tidak ada pada web atau blog. Ini bisa terjadi karena memang halaman yang dituju tersebut sudah dihapus oleh admin blog atau mungkin juga kesalahan penulisan url oleh pengunjung tersebut atau orang yang menulis link tersebut di web/blog lain.
Namun di sini saya tidak akan membahas bagaimana cara untuk mengatasi error 404 ini, namun kini saya akan sharing cara menambahkan recommended content pada halaman error 404 blogger, ide yang baru terpikirkan oleh saya hehehe.... Dengan begitu pengunjung yang mendapatkan error 404 pada blog kita akan diberikan rekomendasi postingan lainnya, sehingga diharapkan pada pengunjung tersebut tidak buru-buru menutup halaman error 404 tersebut atau meninggalkan blog kita, namum tertarik untuk mengunjungi halaman lainnya dari widget recommended content tersebut.
Sebenarnya saya sudah membaikan postingan tentang memodifikasi halaman error 404 blogger ini, nah kini saya akan merubah sedikit tampilannya dan menambahkan rekomendasi postingan di dalamnya sehingga akan tampak seperti pada gambar di bawah ini, di sini saya memanfaatkan widget recommended content dari AddThis.
Langkah Pertama
Silahkan buat dulu widget recommended content dari AddThis. Silahkan Anda menuju link berikut: http://www.addthis.com/. Silahkan login, jika belum memiliki akun silahkan signup dulu. Kemudian silahkan menuju Tool Gallery dan silahkan cari widget Recommended Content Footer.
Kemudian silahkan klik tombol Get Code, kemudian silahkan kosongkan pada kolom Title lalu pada option Theme silahkan pilih yang gelap (dark), pilih 1 pada Number of Rows, 5 pada Number of Items per Row, kemudian klik tombol Show More Option. Lalu pilih True pada Hide on Homepage, pada Container DIV silahkan isikan kode
#error-page. Lalu copy kodenya dan untuk sementara paste kodenya di notepad dan kemudian aktifkan widgetnya dengan mengklik tombol Activate.
Langkah Kedua
Silahkan gunakan kode berikut untuk memodifikasi halaman error 404 blogger.
<style scoped='scoped' type='text/css'>
body{background:#888 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbrPnSYwYsZwC2pSlkQYDTJAmQ3nAgEkHnyNPuOUEM1t9eZgONgPLlc0A_jeeRRYbyeNfT0q7Pis3NxA87VNSBjhkxrF7sSHmD-TvHffYDaBRsU4czElktW7c0viHtSQffmjHgHcJw37OU/s1600/bo_play_pattern.png) repeat top left;position:relative;text-align:center;height:100%;margin:0;padding:0;color: #666;font-family:'Open Sans',sans-serif;overflow:auto}
.large-heading {text-align: center;text-shadow: 0px 1px 0px #c7c8ca, 0px 2px 0px #b1b3b6, 0px 3px 0px #9d9fa2, 0px 4px 0px #8a8c8e, 0px 5px 0px #77787b, 0px 6px 0px #636466, 0px 7px 0px #4d4d4f, 0px 8px 7px #001135;color: #fff; font-size:400%; font-weight: 700;width:100%;margin-top:50px;}
.light-heading,.another-option {font-size: 22px;text-shadow:0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000, -1px 0 1px #000;color:#fff;line-height:1.8em}
.another-option {margin:40px auto -40px}
.light-heading a{color:#fff!important}
.light-heading a:hover{color:red!important}
.searchbox {width:100%;height:25px;padding:0;margin-top:20px}
.searchform {color:gray;width:25%;height:25px;padding:0 35px;margin:0 auto;transition: all 0.2s linear 0s;position:relative;box-shadow:0 1px 1px #000, 0 -1px 1px #000, 1px 0 1px #000, -1px 0 1px #000;}
.search-form{background:#fff;width:80%;height:25px;line-height:25px;padding:0 10px!important;margin:0;border:0;font-size:14px;position:absolute;top:0;left:0;}
.search-button{background:#555;color:#eee;width:60px;height:25px;line-height:25px;text-align:center;padding:0 5px;position:absolute;top:0;right:0;cursor:pointer;border:0;border-radius:0;text-shadow:none;box-shadow:none;transition:all 400ms ease-in-out;font-size:14px}
.search-button:hover{background:#777;color:#eee!important;}
.search-form:focus{outline:none;color:black;}
</style>
<div id='error-page'>
<div class='large-heading'>OOPS! 404 LAMAN TIDAK DITEMUKAN!</div>
<div class='light-heading'>Mungkin halaman telah dihapus. Kami mohon maaf atas ketidaknyamanan ini.<br/>
Silahkan kembali ke homepage <a href='/' title='Homepage'><b>Kompi Ajaib</b></a>,<br/>
atau gunakan search box untuk kembali mencari artikel yang Anda inginkan.<br/>
Atau Anda bisa pilih rekomendasi postingan di bawah ini.
</div>
<div class='searchbox'>
<div class='searchform'>
<form action='URL HALAMAN SEARCH RESULT'>
<input name='cx' type='hidden' value='006106396690849xxxx:tlmc3wxxxx'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input class='search-form' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' type='text' value='Search here....'/>
<button class='search-button' title='Search' type='submit'>Search</button>
</form>
</div>
</div>
<div class='another-option'>Just Another Option For You</div>
KODE WIDGET RECOMMENDED CONTENT FOOTER ADDTHIS DI SINI
</div>
Untuk melengkapi form search box silahkan sesuaikan dengan search box custom search Google blog Anda, jika belum memilikinya silahkan buat dan simak postingan cara membuatnya DI SINI.
Dan silahkan ganti KODE WIDGET RECOMMENDED CONTENT FOOTER ADDTHIS DI SINI dengan kode widget AddThis yang didapat dari Langkah Pertama tadi.
Penempatan kode di atas pada edit HTML silahkan perhatikan kode di bawah ini.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML expr:dir='data:blog.languageDirection'>
<head>
.......
.......
.......
</head>
<body>
<b:if cond='data:blog.pageType == "error_page"'>
KODE PADA LANGKAH KEDUA
</b:if>
<b:if cond='data:blog.pageType != "error_page"'>
<div class='content-wrapper'>
<div id='headerpic-wrapper'>
.......
.......
</div>
<div id='main-wrapper'>
.......
.......
</div>
.......
.......
</div>
.......
.......
</b:if>
</body>
</HTML>