Mungkin Anda bosan dengan tampilan halaman page not found (404) di blog Anda, maka dari itu saya membagikan tutorial membuat / memodifikasi halaman page not found 404 dengan parallex efek di Blogger.

Bukan hanya menarik dan keren, disain ini sudah di modifikasi dengan sangat ditail, maka dengan itu disain ini responsive untuk di semua tampilan HP maupun laptop/pc.

RESULT

Setelah saya menerapkan ini, mungkin akan sedikit berantakan. Tapi tidak perlu khawatir, nanti seiring waktu, kode-kode yang ada akan bekarja.

Membuat Halaman Page Not Found 404 Efek Parallex


Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Anda Copy kode dibawah ini di bawah kode <body> atau <body...

<b:if cond='data:blog.pageType != "error_page"'>

Langkah kedua :

Silakan Copy dan Paste kode dibawah ini di atas kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;


<b:if cond='data:blog.pageType == &quot;error_page&quot;'>

<style>

body {background:#000;margin:0;}

img {display:block;width:100%;}

.scene {max-height:800px;margin:0 auto;padding:0;}

.layer:nth-child(1) {opacity:0.45;}

.layer:nth-child(2) {opacity:0.10;}

.layer:nth-child(3) {opacity:0.35;}

.layer:nth-child(4) {opacity:0.60;}

.layer:nth-child(5) {opacity:0.75;}

.layer:nth-child(6) {opacity:0.90;}

</style>

<div id="container" class="container">

<ul id="scene" class="scene">

<li class="layer" data-depth="0.00"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSWOswvld55wXshWMr8DW6yd6wmAMib4yDE2vm-wKAWEP7yKggn9Wq_Zz672QnJLa_6e7cB30fFbC49VsoOQzoi9GHSL5BiIDZ5UMHAlqoUQMFE7GJxTvf8HEV6Tv3AHpUJ2zZSI9FCnW5/s1600/batman2-min.jpg"/></li>

<li class="layer" data-depth="0.60"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOfu7JW-cPlYzIkaTcABgEapO34kyPtwWvsrOhxZ2jM_VYsuKOexk_xRjeRl2_TILw9W9XcLQhS_nZICvfWjdhT69TfJHiNGdihpTbr8IdGg1oQOgmxKUhabblSQzHC0k4aX0_WRoEJgT1/s1600/bg-layer-1-min.png"/></li>

<li class="layer" data-depth="0.40"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKLswSzYoLxVhx9u4H5W0laW53ls8dvoKJVhfh-34jCEqQPnqH0f3vbt-Hlb0fg6IMM2VINOuVLTQFQHbHG692RaBbo4ZCbTBjf85v5sNVoyrHrqn6JSF3e5q9G-k0aQoA_JlIt-yfydUY/s1600/bg-layer-2-min.png"/></li>

<li class="layer" data-depth="0.92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh0iyt_VgsZ02IpvWSPoh6rI81DWBSglaAnbXTYKBdx97PertDc16yWnaFndUWSjKS7_VoeXajX_hSvP9aRweBub3ZKNKHv6nArdmQUuLdqPZPmnEay4dkorqAeVLhzZgyuK9tACbaB48a/s1600/404.png"/></li>

<li class="layer" data-depth="0.82"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuYIh3O5UQh5raXPV9CHaM1MvDbMIVdW21kHO2f4O00-prcteP8TWRV3juVFdsiMDu6fvpoM1_0so3zqQRx1XwGeMuHuP8RW1PSdG2Dm3t9xTE5sG4sCOGHdikUkKV3v1nNu6VRWewdcLR/s1600/end.png"/></li>

<li class="layer" data-depth="0.70"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifiaEIvSDoBsVkRGKpy_j9xhEw_ipHjj__WJdv-lkjXvdTpl24VG0xGid3TVw0LbmkeT5BdNBOPqcOHPeQQEjC-AmCPN5VnisOHBUFPBB3-sAxchUcpOMy33usIfU_Ij1JtRsQfnsK6b1i/s1600/zaps-min.png"/></li>

<li class='layer'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix5-ZRJsx2PAVYyhuG5KWDfzM5wgkt4GAtbYh7bmAOJe23ru3vV81UVrDiAoXFDNlocn86bqtB8srdGLm6Ah7QuuJZQ-fGV88GdQSiXkAiaRuFejUyMJ2AJZ9JTtJI7VGLEF5Ym5j4vsXX/s1600/home2.png"/></a></li>

</ul>

</div>

<script src="https://cdn.rawgit.com/antoncabon/js/master/parallax.js"></script>

<script>

var scene = document.getElementById('scene');

var parallax = new Parallax(scene);

</script>

</b:if>

Silakan Anda Save template Anda. Dan silakan Anda lihat hasil dari tutorial ini dengan cara tuliskan http://mrdzgn.blogspot.com/ di url atau addres bar Anda. Dan silakan Anda ganti tulisan warna merah dengan url blog Anda.

Sumber : https://www.antoncabon.us/2017/04/membuat-halaman-page-not-found-404.html