X

Cara Membuat Halaman Error 404 di Template AMP Blogspot

Modifikasi template AMP(Accelerated Mobile Page) HTML blogspot belumlah banyak tutorialnya, berikut sedikit berbagi solusi Cara Mudah Membuat Halaman Error 404 di Template AMP HTML Blogspot.

Berikut contoh tampilannya :
Cara Memasang Error Page 404 di Template AMP HTML Blogspot
  1. Loggin Blogger.com
  2. Klik Template - Edit HTML pada blog Anda
  3. Save dulu template Anda di notepad buat jaga-jaga bila salah memasukkan kode CSS-nya nanti.
  4. Masukkan kode dibawah ini tepat diatas kode </style>
    Biasanya pada template AMP Blogspot terbagi jadi 3 bagian CSS : CSS Homepage, CSS Halaman Posting dan CSS Halaman Statis.
Cari Css Homepage, biasanya pada bagian :
<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
<style amp-custom='amp-custom'>

Tambahkan kode Css berikut
.status-msg-body{text-align: center;margin:0;padding:10px;}
.error-404 {text-align: center; transition: all 0.8s ease 0s;color: #b0130d; font-size: 150px;line-height:155px; font-weight: bold;}
.error-404:hover {color: #333;}
.large-heading1 {color: #333;font-size: 70px;line-height:75px;}
.large-heading2 {color: #333;font-size: 48px;line-height:55px;}
.light-heading1 {color: #555;font-size: 20px;line-height:25px;}
.light-heading2 {color: #555;font-size: 15px;line-height:1.8em;}

Kemudian cari dan ganti :
            <b:includable id='status-message'>
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>

    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div class='clear'/>
  </b:if>
</b:includable>
Menjadi :
            <b:includable id='status-message'>
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
    <div class='large-heading1'>
      OOPS!
    </div>
    <div class='error-404'>
      404
    </div>
    <div class='large-heading2'>
      PAGE NOT FOUND
    </div>
    <br/>
    <div class='light-heading1'>
      Maybe the page has been deleted. We apologize for this inconvenience.
    </div>
    <br/>
    <div class='light-heading2'>
      Please return to the Home Page, CLICK
      <a href='/' title='Homepage'><b>HERE</b></a>
    </div>
      </b:if>
    </div>
  </div>
  <div class='clear'/>
  </b:if>
</b:includable>

Selanjutnya SAVE template.

Untuk melihat hasilnya Anda bisa buka salah satu posting, misal

Url posting
https://duipee.blogspot.co.id/2016/11/cara-membuat-halaman-error-404-template-amp-blogspot.html
HAPUS salah satu kata di address bar browser Anda, misalkan menjadi
https://duipee.blogspot.co.id/2016/11/cara-membuat-halaman-error-404-template-amp.html
selanjutnya Enter, Halaman Error 404 di Template AMP Blogspot telah tampil di browser Anda.

Related Posts