Cara membuat error page menggunakan slideshow super cantik di blog

Posted by Admin on Kamis, 11 Desember 2014 | 01.21

Cara membuat Error Page,  selamat sore sobat blogger semuanya, sebelum masuk ke tutorial cara membuat error page ada baiknya kita mengetahui terlebih dahulu apa itu maksud dari error page di sini,  Error Page atau Not Found 404  adalah sebuah pesan kesalahan atau error pada sebuah website atau blog, dalam hal ini bukan berarti url website atau blog tersebut yang tidak dapat ditemukan (server not found) melainkan kita tetap dapat berkomunikasi dengan web atau blog tersebut tetapi apa yang kita cari di situs yang kita kunjungi belum tersedia atau sudah dihapus oleh si pemilik, kira-kira begitulah menurut penafsiran saya.  Pesan error ini di setiap website atau blog sudah ada dan tersedia versi standar masing-masing, agar pengunjung yang melihat dapat terhibur setelah mencari artikel yang dibutuhkan tidak ditemukan, ada baiknya kita memperindah tampilan dari error page di website atau blog kita, Langkah selanjutnya adalah bagai mana cara membuatnya jadi tampil cantik?,  yuk ikuti langkah-langkahnya dibawah ini:

Error Page Versi Ampiloxia1


Pertama-tama masuk dulu ke akun Blogger.
lalu pilih Template>> Edit HTML Kemudian letakan script dibawah ini di atas Kode </head>

<script type="text/javascript" src="http://myprojecthos.googlecode.com/svn/trunk/modernizr.costum.js"> </script>
<script type="text/javascript" src="http://myprojecthos.googlecode.com/svn/trunk/prefixfree.js"> </script>

Lalu Letakan Kode ini tepat dibawah <body>

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

Kemudian Letakan Kode Berikut tepat di atas </body>

</b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<link rel="stylesheet" type="text/css" href="http://myprojecthos.googlecode.com/svn/trunk/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2MIxQ8QX1eqNJNz31jNKRT_lqzkucG4pxaJgK-TcTUPk7pYmoEbUzNdqN7T19Y3BHgwCJrrSLnjqhiBED2PwwblVLSLFS578gXNP33Kw7VO4uyFCo_3ME60iuK_TreyFvMCibDd1V2js/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7vwVxnEc1myS5gISmm6nzIY1sGGmrG44xSzYm6Yz2KYbQdB2mOLbif1_o2AK_A5Mxcvyc97e4GlMKT_4-HdAJP0WaQQgSfPxH5h-kJDEWMXD2CHa995aAOFVJqw_MtIzLS0VTchyphenhyphenC-lA/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjps3FhPrddT6dl39pYTLCPNqVjJN99QycW9XOB2kL3yG0M8ZNagLNoVZ_pqUKZMUN9Qt3L924b3rLAjs5fKLvSKZo6ICQ85VKE6pMTxibm3WGoLThp6YJ1DtpzZhOY_31eVjveEIBXbPs/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDnGflGeTQgx_21blsUFP1oynsb__wy0PW4QCjMe43Do-pCc5syNyJG39YKZOUMZZ-ZWYFZFZmORImg4XWzV5565eLbhAe484DAk5uXJYPe1tZRTf8T3afIjefHJX6eBi8965pmzNHlRM/s1600/linkedin.png'/></a></p>
   </div>  
  </a>

      </div>
 
  </div>
</div>

</b:if>

Terakhir Save Template dan lihat hasilnya.

Semoga berhasil.
Lazada IndonesiaLazada Indonesia

4 komentar:

Silahkan berkomentar sesuai tema. Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.

:) :( ^_^ :D ;) :-bd :yaya: :'( :\ :p B) :Q :Ozz 7:( \o/ **p *fck* x@ X@ ~x( =p*
Konversi Code Out Of Topic

Gmail
Email Subscription,
Request

Popular Posts

Back to Top