Membuat Halaman Page Not Found 404 Parallax Style di Blogger

Membuat Halaman Page Not Found 404 Parallax Style di Blogger

Membuat Halaman Page Not Found 404 Parallax Style di Blogger

Pada postingan kali ini kita akan membuat halaman error page not found 404 dengan gaya parallax, wah gaya parallax? jadi penasaran nih... Sebetulnya teknik mengkostumisasi halaman error 404 di blogger sudah banyak sekali tutorialnya, macam-macam jenis dan tentunya menerik dilihat, bukan hanya menarik tetapi sesuai dengan fungsinya, yaitu memberi tahu kepada pengunjung bahwa artikel atau postingan yang mereka cari tidak ditemukan di blog anda sob...

Halaman error gaya parallax ini sudah responsive dan support mobile version, juga ringan dan yang paling penting menarik.

Untuk images background dan yang lainnya dapat anda sesuaikan dengan selera masing-masing sob, dan kebetulan tema yang akan saya bagikan berikut ini adalah tema Film Batman hehehe...

Ok yuk kita pasang di blog kita dengan mengukuti langkah-langkah berikut ini:
Membuat Halaman Page Not Found 404 Parallax Style di Blogger


1. Silahkan anda copy kode di bawah ini dan simpan di bawah kode <body>

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

2. Copy kode dibawah ini dan letakan diatas kode </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://1.bp.blogspot.com/-9jjV792KiQM/WPxi7SWR14I/AAAAAAAAAYU/_LfmvCAvzL4kLcPs5a_ljLSHYZSueBatgCLcB/s1600/batman2-min.jpg"/></li>
<li class="layer" data-depth="0.60"><img src="https://3.bp.blogspot.com/-UJD6axvsgJE/WPxi6SnrYJI/AAAAAAAAAYQ/-r1j0gBzd4UuEDaVm9w7fk_u20pefp3PwCLcB/s1600/bg-layer-1-min.png"/></li>
<li class="layer" data-depth="0.40"><img src="https://3.bp.blogspot.com/-Xs_SnLtAavY/WPxi7hon0EI/AAAAAAAAAYY/2oRDaPYWea860YxFhFz7HhPQFQ_H6hzBQCLcB/s1600/bg-layer-2-min.png"/></li>
<li class="layer" data-depth="0.92"><img src="https://4.bp.blogspot.com/-fXXjXezV0io/WPxjG3LulaI/AAAAAAAAAYg/KNzBJ2c3lkUqwtGVekMi7UdICNyQ4cf7ACLcB/s1600/404.png"/></li>
<li class="layer" data-depth="0.82"><img src="https://4.bp.blogspot.com/-tIY2WL5bsfo/WPxjHIZE2gI/AAAAAAAAAYk/kkWr96mhl0AmsCT2mVTVrz6f-IhObW6mgCLcB/s1600/end.png"/></li>
<li class="layer" data-depth="0.70"><img src="https://3.bp.blogspot.com/-o7nfgkDEKDI/WPxi7r6XeCI/AAAAAAAAAYc/lMrdlUyvwQ8Y68zVmSGw7ZpjX0Lb_9gZACLcB/s1600/zaps-min.png"/></li>
<li class='layer'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><img src="https://2.bp.blogspot.com/-CkYJ7VS7oyk/WPxvTGjPlWI/AAAAAAAAAZg/4ngZ2JfH-n4dAqJfruks0rIyCo-um_mpwCLcB/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>

3. Simpan template anda dan lihat hasilnya.


Demikianlah Tutorial mengenai Membuat Halaman Page Not Found 404 Parallax Style di Blogger, semoga ada manfaatnya ya, dan saya sangat senang jika sobat dapat berkomentar atau memberi masukan mengenai tutorial diatas.

Jika ada sobat Blogger yang ingin berdiskusi seputar Postingan ini atau Postingan tentang Dunia Kebun Sawit, silahkan tinggalkan komentar sobat di kolom komentar blog ini. saya akan sangat senang meresponnya, terimakasih salam Antoncabon.

"Hendaknya kesibukan kita lebih berfokus pada penyempurnaan penunaian kewajiban-kewajiban kita kepada Tuhan, sebab Dia, Tuhan yang sekaligus Pemberi Rejeki pasti akan membalas penunaian kewajiban tersebut dengan anugrah-Nya yang akan mencukupi kebutuhan kita." my fav words!

DONASI VIA FASAPAY



Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

This Is The Newest Post
Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed
This Is The Newest Post

Nobody likes ads, but Antoncabon is paid for using the ads on www.antoncabon.us. If you like our free articles, please consider to disable your ad blocker..

This is how to whitelisting Antoncabon in your ad blocker.

Thank you!

×
×
×