Membuat Halaman Error 404 Seperti di Blog Ini

Membuat Halaman Error 404 Seperti di Blog Ini

Selamat pagi pemirsa setia blog ngga jelas ini, bagaimana punya kabar? Semoga hari kalian membahagiakan. Ok setelah pada postingan sebelumnya saya telah membahas tentang cara Memasang Widget Sosial Media Seperti di Blog Ini, pada kesempatan kali ini saya ini saya akan menjelaskan tentang bagaimana cara Membuat Halaman Error 404 Seperti di Blog Ini.

Ya halaman Error 404 atau Error Page merupakan elemen yang sanagat penting pada sebuah blog, halaman Error ini sendiri akan muncul ketika pengunjung ternyata tidak menemukan sebuah artikel yang dicari atau dituju, hal ini bisa disebabkan karena sang admin blog tersebut telah menghapus postingan atau si pengunjung salah dalam menuliskan link/url pada Address Bar. Ya kurang lebihnya halaman error ini berfungsi untuk memberitahukan pengunjung blog bahwa artikel/atau halaman yang dicari tidak ada pada blog tersebut.

Nah halaman error yang saya pakai ini sangatlah sederhana, halaman error ini hanya berisi peringatan bahwa halaman yang dituju atau dicari oleh pengunjung tidak ditemukan dengan ditambah saran untuk kembali ke halaman utama blog, ini berfungsi agar si pengunjung blog tidak langsung pergi sehingga bisa diarahkan ke halaman utama blog kita untuk mencari artikel-artikel yang lainnya.

Baiklah, untuk kalian yang ingin juga memasang bisa simak langkah-langkah berikut:
1. Masuk ke Blogger,  Lalu pilih Tema/Template
2. Klik Edit HTML
3. Cari kode <body>, lalu paste script berikut ini di bawah kode <body> tadi.
<b:if cond='data:blog.pageType == &quot;error_page&quot;'> <style scoped='scoped' type='text/css'> /*<![CDATA[*/ .large-heading,body{text-align:center} body{background:#fff;height:100%;margin:0;padding:0;color:#FF0000;font-family:Roboto,Arial,sans-serif;overflow:hidden} .large-heading{font-size:16rem;color:rgba(0,0,0,.3);font-weight:900;width:100%;margin-top:50px;-webkit-filter:blur(3px);filter:blur(3px)} .light-heading{font-size:2rem;color:rgba(0,0,0,.6);font-weight:700} .fixed{position:fixed;font-size:2rem;color:rgba(0,0,0,.6);z-index:9999;width:500px;bottom:50px;left:calc(50% - 250px);text-align:center} .fixed a {border:4px solid #fff;border-radius:10px;padding:5px 16px;transition:all 400ms ease-in-out} .fixed a:hover {background: #fff;} .kompi{font-family:Georgia,serif;font-size:300%;font-style:italic;margin-top:100px;color:rgba(0,0,0,.3);} html::after{content:"";background:radial-gradient(circle,rgba(0,0,0,0),rgba(0,0,0,1));position:absolute;top:0;left:0;bottom:0;right:0} .large-heading,.kompi,.light-heading{-webkit-animation:funnytext 4s ease-in-out infinite;animation:funnytext 4s ease-in-out infinite} @-webkit-keyframes funnytext{0%,100%{color:rgba(0,0,0,.3);-webkit-filter:blur(3px)} 30%{color:rgba(0,0,0,.5);-webkit-filter:blur(1px)} 65%{color:rgba(0,0,0,.2);-webkit-filter:blur(5px)} } @keyframes funnytext{0%,100%{color:rgba(0,0,0,.3);filter:blur(3px)} 30%{color:rgba(0,0,0,.5);filter:blur(1px)} 65%{color:rgba(0,0,0,.2);filter:blur(5px)} } /*]]>*/ </style> <div id='error-page'> <div class='light-heading'><i aria-hidden='true' class='fa fa-exclamation-circle'/>404</div> <div class='light-heading'>PAGE NOT FOUND!</div> <div class='fixed'><a expr:href='data:blog.homepageUrl' title='Inisial BT'>Go to Homepage</a></div> </div> </b:if>
4. Klik Simpan Tema

Ok sekian dulu untuk postingan ngawur kali ini, selamat mencoba bagi yang mau mencoba saja, semoga ada manfaanya dan wasssalam.



BACA JUGA POSTINGAN LAINNYA:




KLIK UNTUK BERKOMENTAR