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:
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>
<b:if cond='data:blog.pageType != "error_page"'>
Kemudian Letakan Kode Berikut tepat di atas </body>
</b:if> <b:if cond='data:blog.pageType == "error_page"'> <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&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.
Mantap Tutornya Gan :-bd
BalasHapusmakasih gan... sudah menemukan blog ini :D
BalasHapusGw Coba Gan
BalasHapussilahkan gan... :-bd
Hapus