Menambahkan Recommended Content Di Halaman Error 404
Error 404 sudah lazim terjadi di dunia internet. Error 404 muncul dikala sebuah halaman yang dicari atau dituju pengunjung ternyata tidak ada pada web atau blog. Ini sanggup terjadi sebab 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 sekarang saya akan sharing cara menambahkan recommended content pada halaman error 404 blogger, inspirasi yang gres terpikirkan oleh saya hehehe.... Dengan begitu pengunjung yang mendapat error 404 pada blog kita akan diberikan rekomendasi postingan lainnya, sehingga diperlukan 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 wacana memodifikasi halaman error 404 blogger ini, nah sekarang saya akan merubah sedikit tampilannya dan menambahkan rekomendasi postingan di dalamnya sehingga akan tampak menyerupai 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, bila belum mempunyai 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 kemudian 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 arahan berikut untuk memodifikasi halaman error 404 blogger.
<style scoped='scoped' type='text/css'>
body{background:#888 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh39XYi47-erKY3hSYm20G0aSB2gV4D5TsAiw-roqf6GMKB_-de3r8Yv-ZJXPfzWC4aLwKxMCmr2ORSfRHjnvIOpzdRvH2O161ninvN_W9WQHOUyoftPOA7gQD7zUBm2NNVSZGiEY9uwXzV/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 sanggup 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, bila belum memilikinya silahkan buat dan simak postingan cara membuatnya DI SINI.
Dan silahkan ganti KODE WIDGET RECOMMENDED CONTENT FOOTER ADDTHIS DI SINI dengan arahan widget AddThis yang didapat dari Langkah Pertama tadi.
Penempatan arahan di atas pada edit HTML silahkan perhatikan arahan 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>
0 Response to "Menambahkan Recommended Content Di Halaman Error 404"
Posting Komentar