Cara Membuat Error Page Ala Antoncabon

Cara Membuat Error Page Ala Antoncabon

Cara Membuat Error Page Ala Antoncabon

Cara Membuat Error Page - Sebetulnya tutorial ini sudah pernah saya share sebelumnya di blog Ampiloxia Blogs, disini saya cuma kembali membagikannya dan menambahkan satu lagi halaman Error 404 yang keren... karena mungkin ada sobat blogger yang belum bisa menemukan link blog saya tersebut di atas.
Seperti pada tulisan saya sebelumnya mengenai Error page yang dimaksud disini adalah sebuah pesan kesalahan atau error pada sebuah website atau blog 404, dan ini bukan berarti url website atau url blog tersebut tidak dapat ditemukan (Server Not Found) melainkan kita tetap dapat berkomunikasi denganb website tersebut, tetapi error terjadi karena sesuatu yang kita cari di situs yang kita kunjungi belum tersedia atau kemungkinan sudah di hapus oleh admin atau owner website tersebut.
Pesan error ini secara umum di setiap website atau blog sudah tersedia secara default atau versi standar masing-masing, nah supaya pengunjung sedikit terhibur setelah artikel atau sesuatu yang dicari tidak dapat ditemukan, ada baiknya kita memodifikasi tampilan dari error page di blog atau website kita supaya tampilannya dapat lebih menarik bahkan atraktif :).
Untuk membuat Error Page tampil menarik sobat dapat mengikuti langkah-langkahnya yang saya tuliskan di bawah ini.
Responsive Error Page 404
Cara Membuat Error Page

Langkah-langkah Memasang Error Page di blog :

Error Page Style-1 :

Langkah-1 : Login Blogger, Klik menu Template > Edit HTML
Langkah-2 : Simpan kode JavaScrit di bawah ini, tepat sebelum tag </head> :

<script type="text/javascript" src="https://cdn.rawgit.com//antoncabon/file/master/modernizr.costum.js"> </script>
<script type="text/javascript" src="https://cdn.rawgit.com//antoncabon/file/master/prefixfree.js"> </script>

Ingin bergabung di forum Blogger dan mendapatkan banyak informasi seputar dunia Blogging silahkan bergabung di GRATIS!!!

Langkah-3 : Copy kode HTML di bawah ini, setelah itu paste tepat sesudah tag <body> :

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

Langkah-4 : Copy kode HTML di bawah ini, setelah itu paste tepat belum tag </body> :

</b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com//antoncabon/css/master/main-error-page.css" />
<link rel="stylesheet" type="text/css" href="http://blogger.id.ai/error-page/slideshow/css/style2.css" />
<style>
*{box-sizing: border-box;  margin:0;  padding:0;}
.clearfix:before,.clearfix:after {content:" ";display: table; }
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
html{height:100%;overflow-y:scroll;overflow-x:hidden;}
body{width:100%;height:100%;line-height:1.5;font-family:'Lato', sans-serif;font-weight:300;font-size:16px;background:#007A3D;}
  ul{list-style-type: none;}
.demo-wrapper{}
.dashboard{}
.col1{width:99%;margin:1em auto;padding-top:20px;padding-left:1%;}
.big, .small{float:left;margin:0 auto 1%;color:white;font-size:48px;text-align:center;height: 156px;font-weight:300;overflow:hidden;
padding:1em 1em;cursor:pointer;transition:all 0.3s ease-out;opacity:0.8;}
.big:hover, .small:hover{background:none;}
.big{width: 49%;margin-right: 1%;}
.small{width: 24%;margin-right: 1%;}
.big p {transition:all 0.3s ease-out;}
.small.last{margin-right:0;}
.icon-font{font-weight: bold;font-family:''Arial Narrow',Arial,sans-serif;line-height: 72px;  font-size:72px;}
.big .icon-font{float:left;}
a {text-decoration:none;}
.opps-thumb {background:none;font-family:'Arial Narrow',Arial,sans-serif;padding:1.5%;cursor: default;}
.opps-thumb:hover {color:#2FB1BE;}
.opps-thumb p{font-size:32px;line-height:36px;}
.opps-thumb-span{display:block;}
.opps-thumb:hover p{}
.back-thumb p{font-size:12px;}
@media screen and (min-width: 64em){.col1{margin: 0 auto;}}
@media screen and (max-width: 800px){.opps-thumb p{line-height:24px;font-size:24px;}}
@media screen and (max-width: 599px){.big, .small{padding:0.4em 0.2em;height: 78px;font-size:32px;}
.opps-thumb p{font-size:18px;line-height:18px;}  
.opps-thumb form {display:none;}
.icon-font{font-weight: bold;font-family:'BebasNeueRegular','Arial Narrow',Arial,sans-serif;line-height:36px;font-size:36px;} }
@media screen and (max-width: 320px){.col1 {width: 280px;}}
</style>
<ul class="cb-slideshow">
            <li><span>Image 01</span><div></div></li>
            <li><span>Image 02</span><div></div></li>
            <li><span>Image 03</span><div></div></li>
            <li><span>Image 04</span><div></div></li>
            <li><span>Image 05</span><div></div></li>
            <li><span>Image 06</span><div></div></li>
        </ul> 
  <div class="demo-wrapper container">
  <div class="dashboard clearfix">
      <div class="col1 clearfix">
        <div class="big opps-thumb">
          <p><i class="icon-quote-left"></i> Page Not Found... 404 !!! <i class="icon-quote-right"></i></p>
    <iframe src="//giphy.com/embed/o753TNzsy9mta" width="480" height="201" frameBorder="0" ></iframe>
          </div>
  <a href="javascript:history.back()">
  <div class="small fb-thumb">
   <p><embed src="http://www.youtube.com/v/qGaOlfmX8rQ&amp;autoplay=1" type="application/x-shockwave-flash" wmode="transparent" height="1" width="1"/></p>
  </div>
  </a>
  <a href="/">
        <div class="small gplus-thumb">
  <p>Home Page</p>
  </div>
  </a>
  <div class="small four-thumb">
          <i class="icon-cog icon-spin"></i> 4
        </div>
        <div class="small shock-thumb">
          <i class="icon-cog icon-spin"></i> 0
        </div>
        <div class="small four-thumb">
          <i class="icon-cog icon-spin"></i> 4
        </div>
        <div class="small last mark-thumb">
          <i class="icon-thumbs-down"> !</i>
        </div>
   <a href="#">
   <div class="small fb-thumb">
    <p><a href='http://facebook.com/' target='_blank' title='Facebook'><img alt='Facebook' border='0' src='https://2.bp.blogspot.com/-vqvdljDjASo/VGJIaJn3BnI/AAAAAAAAAHo/Ac4CwObScR8/s1600/facebook.png'/></a></p>
   </div>
  </a>
   <a href="#">
   <div class="small  tw-thumb">
    <p><a href='http://twitter.com/' target='_blank' title='Twitter'><img alt='Twitter' border='0' src='https://3.bp.blogspot.com/--YivC0TEqkM/VGJIbwtNFJI/AAAAAAAAAIA/1kGFzxb1UO4/s1600/twitter.png'/></a></p>
   </div>
  </a>
   <a href="#">
   <div class="small gplus-thumb">
    <p><a href='http://plus.google.com/' target='_blank' title='Gplus'><img alt='GPlus' border='0' src='https://2.bp.blogspot.com/-Ry9zGgx946E/VGJIaE2dj9I/AAAAAAAAAHs/IadWPJc5lms/s1600/googleplus.png'/></a></p>
   </div>
  </a>
    <a href="#">
   <div class="small fb-thumb">
    <p><a href='http://feeds.feedburner.com/' target='_blank' title='Linkedin'><img alt='Linkedin' border='0' src='https://3.bp.blogspot.com/-jg3uJmmwuL0/VGJIbD9lgaI/AAAAAAAAAH4/5S1QbKouBCQ/s1600/linkedin.png'/></a></p>
   </div>  
  </a>
      </div>
  </div>
</div>
</b:if>

Langkah-5 : Simpan Template Sobat dan lihat hasilnya.



Error Page Style-2 :

Not Found 404
Error Page Ala Antoncabon Style 2

Langkah-1 : Copy kode HTML di bawah ini, setelah itu paste tepat sesudah tag <body> :

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

Langkah-2 : Copy kode HTML di bawah ini, setelah itu paste tepat belum tag </body> :

</b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div class='ancabon-keranjang'>
<div class='ancabon-isinya'>
<div class='ancabon-error-page'></div>
<h2 class='bingkai-1'>MOHON MAAF</h2>
<h2 class='bingkai-2'>LAMAN YANG ANDA CARI</h2>
<h2 class='bingkai-3'>DI BLOG INI</h2>
<h2 class='bingkai-4'>TIDAK DITEMUKAN</h2>
<h2 class='bingkai-5'><span>"NOT FOUND"</span>
  <span style="color: red;">404 !</span>
  </h2>
<a class='back-to-home' href='http://www.antoncabon.us/'>HOME</a>
</div><style>
#antoncabon-top {position:fixed;left:0px;z-index:9999px;background:#000000; margin: 0 auto;padding:10px 0px 10px 0px;width: 100%;height: 30px;font:normal normal 25px Calibri,Arial; font-variant: normal;clear:both;color:#fff;font-weight:normal;text-align:center;border-bottom: 1px solid #222;}
#antoncabon-footer {z-index:99999;position:fixed;bottom:0px;left:0px;z-index:9999px;background:#000000; margin: 0 auto;padding: 20px 0px 0px 0px;width: 100%;height: 30px;font:normal normal 12px Calibri,Arial; font-variant: normal;clear:both;color:#fff;font-weight:normal;text-align:center;border-top: 1px solid #222;}
.antoncabon-top p {margin: 0;padding: 0;color: #cccccc;font-weight:normal;text-decoration: none;}
#antoncabon-footer a,.ancabon-footer a:visited {color: #ff0000;font-weight:normal;text-decoration: none;}
#antoncabon-footer a:hover{color: #ffffff;text-decoration: none;}
@media screen and (max-width:320px){
.back-to-home{margin:0 auto;text-align:center;line-height:50px;width:50px;height:50px;font-size:12px;}
.ancabon-keranjang h2.bingkai-1,.ancabon-keranjang h2.bingkai-2,.ancabon-keranjang h2.bingkai-3,.ancabon-keranjang h2.bingkai-5 span{font-size:30px;}
.ancabon-keranjang h2.bingkai-4{font-size:40px;}
}
</style>
<div id='antoncabon-footer'>
<div class='ancabon-footer'>
<a href='/' title='Antoncabon'>Antoncabon</a> Copyright &#169; 2015 | Design by <a href='http://www.antoncabon.us/'>Antoncabon.us</a>
| Powered by <a href='http://www.blogger.com/'>Blogger.com </a><br/>
</div>
</div>
<div id='antoncabon-top'>
<div class='antoncabon-top'>
  <p>WWW.ANTONCABON.US</p>
  </div></div>
</div>
<link href='https://cdn.rawgit.com/antoncabon/css/master/error-page-style2.css' rel='stylesheet' type='text/css'/>
  </b:if>

Langkah-3 : Simpan Template Sobat dan lihat hasilnya.


Baca Juga Cara Membuat Kotak Subcribe Keren Di Blog

Demikianlah Tutorial mengenai Cara Memasang Error Page Ala Antoncabon Di Blog, semoga ada manfaatnya ya, dan saya sangat senang jika sobat dapat berkomentar atau memberi masukan mengenai toturial diatas.

"Hendaknya kesibukan kita lebih berfokus pada penyempurnaan penunaian kewajiban-kewajiban kita kepada Tuhan, sebab Dia, Tuhan yang sekaligus Pemberi Rejeki pasti akan membalas penunaian kewajiban tersebut dengan anugrah-Nya yang akan mencukupi kebutuhan kita." my fav words!

DONASI VIA FASAPAY



Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Suka dengan postingan ini? Silahkan share postingan ini dengan cara klik Tombol SHARE THIS di atas, Terimakasih.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Anton Cabon? Keep us running by whitelisting Antoncabon in your ad blocker.

This is how to whitelisting Antoncabon in your ad blocker.

Thank you!

×
×
×