Modifikasi Halaman Page Not Found (404) Efek Parallex

Unknown
Rabu, 09 Agustus 2017

Mungkin Anda bosan dengan tampilan halaman page not found (404) di blog Anda, maka dari itu aku 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 aku 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 isyarat dibawah ini di bawah isyarat <body> atau <body...

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

Langkah kedua :

Silakan Copy dan Paste isyarat dibawah ini di atas isyarat </body> atau </body>

</b:if> <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/AVvXsEj2o4jtyd6HQ2mdjuMfmXquszK2n6o18ckBh1ocd4Rn1a9ha5HzP_cnT7R3TPue0va87LkJ5m2_IBizs298DSqEIX-wPPVw5xVT8JewKPuynXdI168l8C8XkT7V5IiWrXAIrQrs-fPHKQwp/s1600/batman2-min.jpg"/></li> <li class="layer" data-depth="0.60"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GbQbxUoY2uJs_L3BKKfeS6qOsY5mY5DCU4yqDtlbCDI_ClTxD5anynq2x2sBCeBg__G43qMd_s6XOLTAJiF6E8Q0Wcm2Xu2WpsEVOx9noVcIby1DqNoDtAT_jm7BhpJWBgU6-tIG4oKs/s1600/bg-layer-1-min.png"/></li> <li class="layer" data-depth="0.40"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsTBEt1DxYPd2O8ZPBPm2hjyoFw_Avql1DSHAPaKGkHJIDGRhfU_gBcPNzvDzbpshHm9VdkpBKtnRoesAhMkJIucgx_NI5WSNsA3z7BxHOnKdH2qqCciDUvAVS0pCVNbvGHVmGhTJJljVJ/s1600/bg-layer-2-min.png"/></li> <li class="layer" data-depth="0.92"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ksSxTuOvWF1f_vPvOxqB7acDKBmOf8WtGZDNcT7vBKhsf8HAa5wPAqOOM6SESiuK9E0Q28oBjYXphktFD-uUqsLdwP3KGeSoq2P9y7VobT3s8mZCG6ByzGaQyay87u89oAQZKDQ9MRQn/s1600/404.png"/></li> <li class="layer" data-depth="0.82"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrcs2qmqyc9POupHu76HI4Q4rIhHGLhM_1u_xGhBw4aOaTOtVjEAzfs-goswVHV3u5IbxyMUop3smOjSweI-as9-8P9hpK4mqBHp8RN-mEcfzjonkrwbSjxIg5BedlFj5g6e3jDB7hb8qi/s1600/end.png"/></li> <li class="layer" data-depth="0.70"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRE1C61HF1RY0QvF0NLMn9bjfYy-sl8-q9yhTFcFfx4WPFUmrru0PnNTB83aW-dUo1N8uNbhrowlZGJdWjZUX5S87vZsBDgc9wDkjFtffklrHYqt95bZULKdgwtg1f47cA6A8WzIkVHP4O/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/AVvXsEgYoeOPXzn5lyye7asIvLpDV_QYBNKEVhZZj53NY5S2mV5uPbsmQ8uFGfdDLR-L1r2xInhJVVGgUdQJgvi0B_y1Wor-WMyRXtQftekySkcO3rIRoRIhwqQW1Zsq9fO46vcRRHEk45hEQoG-/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 kafe Anda. Dan silakan Anda ganti goresan pena warna merah dengan url blog Anda.

Sumber :