Tampilan Error page sering kira jumpai di mana pun saat kita mengakses sebuah website. kita melihat halaman tersebut di karenakan artikel atau konten yang kita akses sedang tidak tersedia . error page sangatlah penting bagi setiap blog atapun sebuah situs web karena jika ada halaman kita yang telah dihapus atau memang tidak ada , pengunjung akan mudah mengetahuinya melalui halaman error page ini. berbagai macam tampilan error page di luar sana yang lebih keren. Namun yang akan saya bagikan kali ini tidak kalah kerennya karena ini merupakan Error page yang di buat oleh Arline Design .baiklah untuk mempersingkat waktu langsung saja simak Tutorial Cara Membuat Tampilan Error Page Responsive Di Blogger di bawah ini :
- Pastikan anda login ddi akun Blogger anda dan klik template pada dashboard blogger.
 |
| Cara Membuat Tampilan Error Page Responsive Di Blogger |
- Kemudian cari kode <body>
Masukan kode di bawah ini tepat di bawah kode <body>
<b:if cond='data:blog.pageType != "error_page"'>
 |
| Cara Membuat Tampilan Error Page Responsive Di Blogger |
Masukan kode di bawah ini tepat di atas kode </body>
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<div class='container404'>
<div class='box404'>
<h2>404</h2>
<h3>The page could not be found</h3>
<hr/>
<p>The page you are looking for might have been removed had its name changed or is temporarily unavailable</p>
<p>Please try the following :</p>
<ul>
<li>If you type the page address in the <strong>Address bar</strong>, make sure that it is spelled correctly.</li>
<li>Click <strong><a expr:href='data:blog.homepageUrl'>here</a></strong> to return to our main page.</li>
<li>If you were linked to this page, contact the administrator and make them aware of this issue.</li>
</ul>
</div>
<div class='copyright404'>
© 2016 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. All Rights Reserved.
</div>
</div>
</b:if>
 |
| Cara Membuat Tampilan Error Page Responsive Di Blogger |
- Jangan lupa untuk menambahkan kode CSS nya , letakan kode di bawah ini tepat di atas </style> atau ]]></b:skin>
body{background:#fa4949;color:#fff;}
.container404{margin:8% auto 0 auto;max-width:768px;min-width:200px;line-height:normal;font-size:16px;backface-visibility:hidden;transition:all .3s;}
.box404 hr{background:transparent;display:block;border:none;border-bottom:4px solid rgba(255,255,255,.3)}
.box404{padding:20px;font-size:110%;color:#fff;border-radius:5px 5px 0 0}
.box404 h2,.box404 h3{color:#fff;display:block;font-weight:700;font-size:2.6rem;text-transform:uppercase}
.box404 h2{position:absolute;font-size:20rem;color:rgba(255,255,255,.3);transform:rotate(-45deg);right:3%;bottom:8%}
.box404 p{display:block;margin:10px 0}
.box404 ul li{margin:0 0 8px 20px;list-style:initial;list-style-type:square}
.box404 ul li a{color:#e5ffaf;}.box404 ul li a:hover{background:rgba(0,0,0,0.1);color:#e5ffaf;text-decoration:underline}
.copyright404{display:block;margin:auto;font-weight:normal;max-width:768px;min-width:200px;padding:0 20px}
.copyright404 a,.copyright404 a:hover{color:#fff}
@media screen and (max-width:1024px) {
.box404 h2{font-size:10rem;}
.container404{margin:4% auto 0 auto;}}
@media screen and (max-width:640px) {
.box404 h3{font-size:1.6rem;}
.box404 h2{display:none}}
 |
| Cara Membuat Tampilan Error Page Responsive Di Blogger |
- Terakhir Simpan template , Jika berhasil maka nanti tampilannya akan seperti ini
 |
| Cara Membuat Tampilan Error Page Responsive Di Blogger |
Aturan Berkomentar :
[-] Berkomentar Sesuai Topik
[-] Berkata Sopan
[-] Tidak Menyinggung SARA/Pornografi/kekerasan
[-] Tidak Menaruh Link Aktif
EmoticonEmoticon