Membuat halaman error 404 di blogger

Membuat halaman error 404 di blogger

Trik

Sudah membuat halaman error 404 di blogger anda? tes dulu halaman tersebut muncul atau tidak atau hanya pekerjaan sia - sia yang anda lakukan. jika anda tidak mengetahui cara untuk menguji silahkan paste link berikut ini

http://nama-blog-anda.blogspot.com/tes-halaman-error-404-blog.html

Ganti nama-blog-anda dengan sub domain blogger anda dan lihat apakah halaman error 404 anda muncul dan berfungsi atau tidak. jika yang muncul hanya halaman kosong dan sidebar blog anda berarti halaman error 404 yang anda buat tidak berjalan. dan ini percuma anda terapkan di blog anda walaupun anda telah mendesain halaman tersebut dengan tampilan sebagus mungkin. kali ini saya akan berbagi cara membuat halaman error 404 untuk blogger dengan kotak pencarian lihat demonya di bawah ini


Demo halaman yang anda lihat adalah hasil dari tag kondisional untuk halaman kesalahan/error page. Berikut ini adalah cara paling sederhana untuk membuatnya

Contoh tag conditional yang akan digunakan:

<body>
    <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
        ...
        ...
        Baris/bidang element blog seperti posting, widget, sidebar dan yang lainnya.
        Element ini akan di sembunyikan jika tak ditemukan url/link apa pun yang ada dalam directory widget.
        ...
        ...
    </b:if>

     Dibawah ini adalah pesan error yang akan muncul ketika permintaan tidak di temukan
    
    <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <div id='error-page'>
           <h1>Desain error 404 yang diterapkan.</h1>
        </div>
    </b:if>
</body>

Pertama cari tag kode <body> dan penutup </body> di template anda, lalu sisipkan kode tag conditional berikut di antaranya, lihat cara seperti di bawah ini

Pastekan kode di bawah ini di bawah kode tag <body>

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

Kemudian cari kode tag </body> dan patekan kode berikut di atasnya

</b:if>

lalu letakkan kode berikut ini di atas kode tag </body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <div id='DB-error-page'>
          <h1>404 Halaman/Posting tidak ditemukan!</h1><br/>
          <p>Mungkin Halaman/Posting yang anda tuju telah di hapus dalam blog ini, silahkan gunakan kotak penelusuran di bwah ini</p><br/>
          <div class='kotak-pencarian-404'>     
          <div id='searchbox'>
          <form action='/search' id='searchthis' method='get'>
          <div class='content'>
          <input class='textfield' name='q' size='24' type='text' value='Cari disini...'/>
          <input class='button-cari' type='submit' value='Cari'/>
          </div>
          </form>
          </div>
          </div><br/>
          <a href='/'>Kembali ke Homepage</a>
        </div>
    </b:if>

Maka jika benar, semua akan tampak demikian:

<body>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
        ...
        ...
        Baris/bidang element blog seperti posting, widget, sidebar dan yang lainnya.
        Element ini akan di sembunyikan jika tak ditemukan url/link apa pun yang ada dalam directory widget.
        ...
        ...
    </b:if>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <div id='error-db'>
          <div id='error-db-suit'>
          <div class='box-404-db'>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>
</div>
    </b:if>
</body>

Selanjutnya, ubah tag tittle menjadi seperti berikut

<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>Laman Tidak Ditemukan - <data:blog.title/></title>
    <b:else/>
        <title><data:blog.pageName/> - <data:blog.title/></title>
    </b:if>
</b:if>

Setelah semua yang di atas selesai, kini tambahkan css berikut ke template anda dan simpan.

/* error page */
#error-db {background-color:#e9e9e9;position:fixed !important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999;}
#error-db-suit {margin:11% auto;}
#error-db-suit .box-404-db {width:200px;height:200px;background:#1966C1;color:#fff;font-size:80px;line-height:200px;border-radius:10px;margin:0 auto 50px;position:relative;}
#error-db-suit .box-404-db::after {content:&quot; &quot;;width:0;height:0;bottom:-8px;border-color:#1966C1 transparent transparent;border-style:solid;border-width:9px 9px 0;position:absolute;left:47%;}
#error-db-suit h1 {text-transform:uppercase;}
#error-db-suit p {line-height:0.7em;font-size:15px;}

Silahkan anda ganti tulisan diantara tag <h1> dan <p> dengan tulisan yang anda ingin.

Semoga berguna dan berhasil.....

Artikel Terkait

  • Post info di bawah judul artikel
    Ketika tidak ada komentar yang dibuat untuk posting Anda, ada link yang mengatakan 'Jadilah yang pertama untuk berkomentar!' dan ketika hanya ada satu komentar maka akan muncul '1 komentar sejauh ini'. Jika Anda ingin membuat blog Anda lebih bergaya dengan mengganti teks-teks dengan beberapa ikon lucu kecil bersama dengan default Nama Penulis,…
  • Template berbeda dengan tag Conditional
    Pernah berkunjung ke blog kang rohman ? jika pernah, sobat akan melihat dua perbedaan yang begitu jelas antara warna background header dan posting per label. ketika sobat membaca posting yang berlabel blogger maka sobat akan melihat warna header dengan tampilan orange dan background posting dengan logo blogger, dan ketika sobat membaca posting…
  • Membuat iklan muncul sesuai dengan kategori posting
    Trik ini masih menggunakan tag Conditional yang telah saya tulis sebelum untuk "Membuat tampilan template berbeda dengan tag Conditional" dalam setiap kategori, perbedaannya hanya syntax atau exsekusi yang di tujukan adalah sebuah element. dengan mengatur munculnya iklan sesuai kategori akan membuat pengunjung lebih mudah mlihat iklan anda te…
  • Memahami Apa Fungsi Blogger Conditional Tag
    Blogger Conditional Tag merupakan suatu tag yang terdapat pada template blogger. Dinamakan Conditional Tag karena memiliki fungsi untuk mengkondisikan suatu elemen / widget tampil di halaman tertentu, sehingga dengan adanya Blogger Conditional Tag akan membuat sebuah template blogspot bisa menjadi lebih flexibel dan dapat mengatur sebuah eleme…
  • Berbagai trik membuat single page
    Single page/halaman penuh adalah satu halaman yang tidak dihiasi oleh widget atau pun element sidebar. ada tujuan dan kebutuhan tertentu sehingga author atau pemilik blog membuah sebuah single page di blognya, misalnya untuk menempatkan forum, membuat halaman daftar isi, aboute blog juga alasan lainnya. untuk demo, silahkan klik link aboute at…
  • Cara memasang kotak pencarian pada menu navigasi
    Terkadang kita tertarik pada sebuah tampilan menu navigasi drop down yang cantik, namun kemudian muncul kekecewaan bagi para sobat yang ingin dalam menu navigasi yang cantik tersebut seharusnya di sertai dengan kotak pencarian agar lebih cantik sehingga semuanya menjadi praktis dalam satu paket dan tidak perlu untuk menambah pekerjaan lagi unt…

20 komentar

  1. Admiral Pratama17 Agustus 2013 pukul 09.38

    thanks tutorialnya bro

    BalasHapus
  2. Anonim16 September 2013 pukul 13.37

    Mantap Gan Tutorialnya

    KunBalnya Ya gan
    http://www.oreshack.net

    BalasHapus
  3. Unknown22 September 2013 pukul 15.15

    Makasih gam ,

    BalasHapus
  4. Shiro25 Oktober 2013 pukul 20.43

    Wah mantap Def :)

    Kunjungi balik yah :) www.fajriandaviar.blogspot.com

    BalasHapus
  5. Anonim9 November 2013 pukul 15.12

    sip saya coba dulu mas :)

    BalasHapus
  6. PHOEN3 Februari 2014 pukul 23.20

    Berhasil gan, trims banget tutorialnya..
    Ditunggu juga kunbalnya hehehe :D
    http://ourteamnara.blogspot.com/

    BalasHapus
  7. admin23 Maret 2014 pukul 08.38

    sudah saya kirim lagi mas daffin.

    BalasHapus
  8. Unknown16 April 2014 pukul 22.37

    terima kasih tipsnya min :) aijp bener :-d

    BalasHapus
  9. Huda30 Juli 2014 pukul 17.11

    thx gan, ditunggu kunbalnya di blog newbie yg dibawah ini :-d
    http://clickandskip.blogspot.com

    BalasHapus
    Balasan
    1. Huda30 Juli 2014 pukul 17.15

      oh ya, buat tambah gambar gimana ya? punya saya g ada gambar 404 error nya :'(

      Hapus
    2. Dafin defandaky30 Juli 2014 pukul 17.33

      di tunggu aja sob :).

      untuk menmbah gambar bisa di tambahkan seperti ini

      <img alt='error' src='link gambar'/>


      tambahkan di dalam markup html error page jangan lupa ganti src='link gambar' dengan link upload gambar anda sob semoga sukses

      Hapus
    3. Huda30 Juli 2014 pukul 18.26

      udah di edit sedemikian rupa :p

      Hapus
    4. Dafin defandaky30 Juli 2014 pukul 22.48

      buat seperti ini 

      <div id='error-page'>
<div id='error-inner'>
<div class='box-404'>404</div>
<img src='link-gambar' alt='error'/>
<h1>Halaman tidak ditemukan</h1>
<p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
<p>Kembali ke <a href='http://clickandskip.blogspot.com/'>Click and Skip</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==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;' type='text' value='Cari di sini ...'/>
<button id='search-button' type='submit'></button>
</form>
</div>
</div>
</div>

      Hapus

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...