Membuat Halaman 404 Versi 2 Di Blog, Seperti yang telah saya jelaskan pada artikel sebelumnya bahwa Halaman error 404 merupakan halaman yang akan muncul ketika posting hilang atau terhapus. Nah kali ini saya akan membagikan tutroial cara simple memasang halaman 404 pada yang digabungkan dengan tombol social.
Widget ini sebenarnya sama seperti pada artikel saya sebelumnya
disini, hanya saja disini saya hilangkan tombol searchnya dan diganti dengan tombol social serta dimodifikasi sedikit agar tampilannya berbeda dengan yang lainnya.
Jika Anda tertarik untuk memasangnya silahkan ikuti tutorial berikut :
1.Letakkan code css berikut tepat diatas code
]]></b:skin>
atau didalam
style
#error-page{background-color:#142D3A;position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999}
#error-inner{margin:11% auto}
.box-404{position:relative;font-weight:bold;width:700px;height:210px;color:#fff;margin:0 auto;}
#error-inner h2{text-transform:uppercase;color:#fff;font-size:50px;margin:0 auto 20px;font-family:monospace;background-color:#34647E;margin:5px}
#error-inner h1{text-transform:uppercase;color:#FFB616;padding-top:10px}
#error-inner p{line-height:0.7em;font-size:15px;color:#999}
#social-icons li{float:left;width:147px;height:147px;margin:10px 6px 6px 0;padding:0 0 0 0;border-bottom:none;list-style:none}
#social-icons li a{line-height:1px;display:block}
#social-icons li a:hover img{-webkit-opacity:0.8;-moz-opacity:0.8;opacity:0.8}
#social-icons li a span{display:none!important}
2. Copy code di bawah ini dan letakkan tepat di bawah code
<body>
<b:if cond='data:blog.pageType != "error_page"'>
3. Terakhir simpan code berikut tepat diatas code penutup
</body>
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-page'>
<div id='error-inner'>
<h2>404: Page Not Found</h2>
<h1>Halaman tidak ditemukan</h1>
<p>Kemungkinan halaman telah dihapus, atau anda salah menulis URL blog<br/><br/> Kembali ke beranda <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> Atau Hubungi Kami Di Bawah ini</p>
<div class='box-404'>
<ul id='social-icons'>
<li class='rss-icon'><a href='http://feeds.feedburner.com/Lagioke' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr3IzxLwT3zF4U_doa8xEWxUHLgrWIernke62YOmm9C8RyFre3lYTWhdA8cxpmfuG17WYEK0CFviGhH3o2YFbdyq0fhYCbPQ-wIeGh69gMZeQJmC5BCnvd4yW9d3m6GIxdFNWdL8jNm7A/s1600/rss.png' width='147'/></a></li>
<li class='twitter-icon'><a href='http://www.twitter.com/Lagioke1' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggnqyaVWyU6aDOCj2Sb-sAtNQb6KvXf9rlQU-gXs1VDfSDHwGWfMgYeHF6gdmNOvvsevD4HNwMpnHgwqY7MdiVQIzK8cAybC2Kfn079bP_QzORrfeO_R42HCJpPY8CuOFWp_z1CmObWAo/s1600/twitter.png' width='147'/></a></li>
<li class='facebook-icon'><a href='http://www.facebook.com/Lagioke' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXAJ2OPmpNd6Qb0R33vnRJTj5ciJ8tmKF2f2Fa_xfPJpzFRzGwtJQ8oxdgt9TNVj4q3gOZFmcXDtZUAfGUPmz55KOS8ozmetHR593taHAseX68qSizuOyLyvFVfD_p5UD8Q2ZOI5y7IvE/s1600/facebook.png' width='147'/></a></li>
<li class='google-icon'><a href='https://plus.google.com/IDGP' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi77tUgqho6IiNuXX6LOtH2pegoBsYmnbK7z-UiF0h4zY7WvjYTYt7O6bUY12f55HgAhvcoaNxIXzn_ATml4iuuPdpC0liIpm34FpS6KfIwxfHQ7Gkxl7NCYJZM5p_BFbm5w0LHZCFFb1w/s1600/google.png' width='147'/></a></li>
</ul>
</div>
</div></div></b:if>
Keterangan :
Code yang ditanadai dengan warna kuning silahkan ganti dengan masing-masing ID Anda
4. Save dan lihat hasilnya....
ADS HERE !!!