Membuat Custom Halaman 404 Di Blog

Hallo,Sobat Giri Blog's kembali lagi saya akan membagikan sebuah Artikel mengenai Cara membuat Halaman 404 di blog ,Halaman 404 ini Akan Memberitahu Kepada pengunjung Yang Salah Memasukkan Kata Kunci/Keyword.

Halaman 404 ini sangat ringan di karenakan di buat dengan CSS3 Murni,dan HTML 5 tentu tidak akan menggangu kinerja dari loading blog sobat ,Malah akan menambah kesan keren pada blog sobat.

Selain Ringan Halaman 404 Ini Juga Responsive ,Karena sobat dapat melihat Halaman 404 ini di berbagai macam ukuran device .Dan Ramah Untuk Pengunjung Karena Penempatan Tata Letaknya Yang Rapih

Sedikit penjelasan Halaman 404 Akan Muncul Jika ada Pengunjung Yang salah Memasukkan Kata-Kunci / Keyword,Bukan Hanya Itu Saja Halaman 404 Ini akan Mucul Juga Ketika Artikel Yang di cari pengunjung Tidak ada di blog kita.

DEMO

Bagi sobat yang tertarik untuk menerapkanya di blog silahkan ikuti langkah berikut.

1.Masuk Ke Blogger > Tema > Edit HTML

2.Copy dan letakkan kode CSS Berikut tepat di atas tag <b:skin> atau </style>

@import url('https://fonts.googleapis.com/css?family=Dosis'); .content{background-color:#fff;border:1px solid #666;border-radius:15px;box-shadow:0 4px 6px 1px rgba(50,50,50,0.14);box-sizing:border-box;color:#000;line-height:1.5;margin:5.5em auto 0;max-width:640px;padding:30px 35px 30px 37px;width:100%;font-family:'Dosis',sans-serif;} .icon{-webkit-margin-start:25px;content:-webkit-image-set(url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhohn2RaRpfPtU2yIMen6yv2OJeFZeh-IxfDe2zlj3NTbdq6V7L6FBRVcqZu5YzrAeea0-VCy7qm3uOTu72SUYK4p9nrIVxRwuIO40JfgtEsMXsLKaGqPRBvqRwAc1HV2g5k9QAEpM6144/s1600/Logo_Ku.png)1x);float:right;height:128px;margin-bottom:10px;margin-top:4px;width:128px;} .code{font-family:monospace;color:#000;} #bsearch-box{float:none!important;top:inherit;left:inherit;right:inherit;margin:0;position:relative;display:block;} #search-text{border:2px solid #f5f5f5;box-shadow:0 2px 7px rgba(32,33,36,.28);background:#fff;border-radius:25px;font-size:12px;color:#fff;padding:15px 20px 15px 42px;width:220px;max-width:100%;margin-right:-1px;transition:all .3s ease-in-out;} #bsearch-box button{background:url(https://3.bp.blogspot.com/-hRs9Xy9mKqM/W0rpeDdO7fI/AAAAAAAAKRo/rGzoU84AWU0vHBH6tMWrFsICwxYPOBzkACLcBGAs/s18/search-icon.png);width:17px;height:17px;border:none;position:absolute;margin-top:15px;margin-left:17px;left:0;outline:none;}

3. Simpan
4.Setelah Itu Sekarang Pasang Kode Ini Tepat di bawah CSS Tadi

<b:if cond="data:blog.pageType == "error_page"> <div class='content'> <div class='icon'></div> <span><h1>404 Page Not Found</h1> <p> <span>The Page You're Looking for is not found.This Page</span> <code>http://giridiwa.blogspot.com/menemukanHalaman404</code> <strong>Not Available</strong> In The database Of Website. </span> <a href='http://giridiwa.blogspot.com' title='Back To Homepage'>Back To Homepage</a> </p> <p><strong>OR YOU CAN SEARCH ARTICLE ON THIS BLOG:</strong></p> <div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'> <meta content='https://giridiwa.blogspot.com' itemprop='url'> <form action="/search" id="bsearch-box" itemprop="potentialAction" itemscope="itemscope" itemtype="https://schema.org/SearchAction" method="get"> <meta content="/search?q={q}" itemprop="target"> <input id="search-text" itemprop="query-input" name="q" placeholder="Search on Here" required="required" type="text" value=""> <button type="submit"></button> </form> </div> </div> </b:if>

5.Selesai,Selamat menikmati.

Sekian Postingan Kali Ini ,Tunggu Postingan Yang Pastinya Menarik Hanya di blog ini

Belajar CSSBelajar HTML

Share This :