Wednesday, January 4, 2017

Desain Halaman 404 Sendiri Untuk Blog

      , , , ,    Comment  


Halaman 404 memang sudah tidak asing lagi bagi blogger baik dari kalangan newbie seperti admin maupun yang sudah master, fungsi dari halaman 404 ini adalah untuk memberitahu kepada para pengunjung bahwa postingan yang akan dilihat telah dihapus atau telah diubah urlnya. Di halaman 404 ini juga ditampilkan tombol untuk pergi ke halaman utama dan kotak pencarian yang berfungsi untuk memudahkan para pengunjung mencari apa yang diinginkan.

Pembuatan Halaman 404 pada Blog :

  • Masuk ke akun blogger
  • Pilih menu Template lalu pilih Edit HTML
  • Masukkan kode meta tag berikut tepat dibawah kode <head>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
<b:else/>
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <title>404: Page Not Found ~ <data:blog.title/></title>
    <b:else/>
        <title><data:blog.pageName/> ~ <data:blog.title/></title>
    </b:if>
</b:if>

Fungsi Dari Kode diatas adalah memberikan title tag jika muncul halaman 404.
  • Lalu masukkan kode CSS berikut diatas kode ]]></b:skin> atau </style>
/*Desain Halaman 404 Error Not Found
----------------------------------------------- */
#error-page {
background-color:#e9e9e9;
position:fixed !important;
position:absolute;
text-align:center;
top:0;
right:0;
bottom:0;
left:0;
z-index:99999;
}
#error-inner {
margin:11% auto;
}
#error-inner .box-404 {
width:200px;
height:200px;
background:#21afa4;
color:#fff;
font-size:80px;
line-height:200px;
border-radius:10px;
margin:0 auto 50px;
position:relative;
}
#error-inner .box-404::after {
content:&quot; &quot;;
width:0;
height:0;
bottom:-8px;
border-color:#21afa4 transparent transparent;
border-style:solid;
border-width:9px 9px 0;
position:absolute;
left:47%;
}
#error-inner h1 {
text-transform:uppercase;
}
#search-box{position:relative;width:350px;margin:10px auto}
#cse-search-box{height:30px;border-radius:2px;background-color:#fff;overflow:hidden;border:1px solid #bbb}
#search-text{font-size:12px;color:#ddd;border-width:0;background:transparent}
#search-box input[type=&quot;text&quot;]{width:85%;padding:5px 20px 12px 0;color:#666;outline:none}
#search-button{position:absolute;top:0;right:0;height:32px;width:20px;margin-top:10px;font-size:14px;color:#fff;text-align:center;line-height:0;border-width:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis1FRELjqNN8IWN9peZL7sp8ZskcbONQRAecBXl0rmQwc7q2KqPpeAXX0L9MAzVExdChK1jVukjts9cXMYpfgoaPKI2wO2Zune8Swux-BxNA7IeEFDDObYRICdLm98JUoEPPET6N5O7-s/s200/search-c.png) no-repeat;cursor:pointer}
#error-inner p {
line-height:0.7em;
font-size:15px;
}
Untuk kode ini fungsinya adalah memberikan effek warna dan lain lain, agan juda bisa mengedit style 
  • Masukkan juga kode berikut diatas kode </body>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <div id='error-page'>
          <div id='error-inner'>
            <div class='box-404'>404</div>
           <h1>Halaman tidak ditemukan</h1>
            <p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
            <p>Kembali ke <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></p>
            <div id='search-box'>
          <form action='/search' id='cse-search-box' method='get'>
            <input id='search-text' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Cari disini ...'/>
            <button id='search-button' type='submit'/>
          </form>
        </div>
          </div>
        </div>
    </b:if>

Untuk Kode Diatas Agan bisa merubah kata - katanya

  • Terakhir klik Simpan Template

Sampai disini dulu artikel kali ini, Bila ada pertanyaan Silahkan berkomentar Saja 

Semoga Bermanfaat .

0 comments:

Post a Comment