NOTE

This Template Created By Rhinokage Rio And Blanter Project 2015.

Membuat Halaman Error Ala Blog Dian Anarchyta

Error 404

KODE 1

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.ct-wrapper, .header-wrapper, #header, #post-wrapper, #outer-wrapper, #footer-wrapper, #sidebar-wrapper, #credit, #social_networks {display:none;}
.loading404 {background:url(&quot;http://3.bp.blogspot.com/-LdnrbVgFX00/U3OclWLMZkI/AAAAAAAABAc/28BthEiXk1w/s1600/404.jpg&quot;)no-repeat center center fixed  #393939;background-size:cover;z-index:1000}
.error-wrap.error-wrap-404{width:875px;margin:12% auto 0;color:#fff;text-align:center}
.error-wrap .metro.big{float:left;width:340px;height:340px;margin:0 10px 10px 0;font-family:&quot;Oswald&quot;}
.error-wrap.error-wrap-404 .metro.double{float:left;width:340px;height:165px;margin:0 10px 10px 0;font-family:&quot;Oswald&quot;}
.error-wrap.error-wrap-404 .home{color:#fff;font-size:70px;text-decoration:none;margin-top:40px;display:inline-block}
.error-wrap .metro.double .page-txt{font-family:&quot;Oswald&quot;;font-size:30px}
.error-wrap.error-wrap-404 .metro{float:left}
.error-wrap.error-wrap-404 .metro.big span{padding-top:130px}
.error-wrap.error-wrap-404 .terques{background:rgba(75,183,192,0.8)}
.error-wrap.error-wrap-404 .red{background:rgba(232,104,127,0.8)}
.error-wrap.error-wrap-404 .gray{background:rgba(89,88,88,0.5)}
.error-wrap{width:100%;margin:12% auto 0;color:#fff;text-align:center}
.error-wrap .metro{width:165px;height:165px;display:inline-block;margin:0 10px 10px 0}
.error-wrap .metro span{font-size:70px;padding-top:70px;display:inline-block}
.error-wrap  p{font-family:&quot;Oswald&quot;;padding-top:20px;font-size:16px}
.error-wrap  p a{color:#48cffe}
.error-wrap .green{background:rgba(142,191,72,0.8)}
.error-wrap .yellow{background:rgba(245,193,70,0.8)}
.error-wrap .purple{background:rgba(175,94,197,0.8)}
@media (min-width:768px) and (max-width:979px){.error-wrap.error-wrap-404{width:100%}.error-wrap.error-wrap-404 .metro.big{width:98%!important}.error-wrap.error-wrap-404 .metro{width:31.8%}.error-wrap.error-wrap-404 .metro.double{height:165px!important;width:98%!important}}
@media (max-width:767px){.error-wrap.error-wrap-404{width:100%}.error-wrap.error-wrap-404 .metro.big{width:98%!important}.error-wrap.error-wrap-404 .metro{width:31.2%}.error-wrap.error-wrap-404 .metro.double{height:165px!important;width:98%!important}}
@media (max-width:430px){.error-wrap.error-wrap-404{width:98%}.error-wrap.error-wrap-404 .metro{width:31.2%}.error-wrap.error-wrap-404 .metro.double{height:120px!important;width:98%!important}}
@media (max-width:385px){.error-wrap.error-wrap-404{width:100%}.error-wrap.error-wrap-404 .metro.big,.error-wrap.error-wrap-404 .metro.double,.error-wrap.error-wrap-404 .metro{width:98%}.error-wrap.error-wrap-404 .metro.double{height:165px!important}}
@media (max-width:320px){.error-wrap.error-wrap-404{width:100%}.error-wrap.error-wrap-404 .metro.big,.error-wrap.error-wrap-404 .metro.double,.error-wrap.error-wrap-404 .metro{width:98%}}
</style>
</b:if>

KODE 2

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div class='loading404'>
<div class='error-wrap error-wrap-404'>
<div class='metro big terques'>
<span> OOPS! </span>
</div>
<div class='metro green'>
<span> 4 </span>
</div>
<div class='metro yellow'>
<span> 0 </span>
</div>
<div class='metro purple'>
<span> 4 </span>
</div>
<div class='metro double red'>
<span class='page-txt'> Page Not Found </span>
</div>
<div class='metro gray'>
<a class='home' href='/'><i class='icon-home'/>
</a>
</div>
</div>
  </div>
  </b:if>


3 komentar

Add New Comments

Tutorialnya sudah bagus sob, tapi artikelnya di perbagusin lagi, masa acak-acakan gitu, kan kalau rapih enak :D mantab deh sob.

Delete Reply
avatar

Thank you very much, your article is Very Important for Me ;)

nice article ,i will bookmark this article!

Delete Reply
avatar

BCDLA Perpustakaan Untuk Mu. > Enter Your Comments Here...
ConversionConversion EmoticonEmoticon

Previous
Next Post »

© 2015 BCDLA ~ Pengetahuan Untuk Mu. Powered by Blogger.
Hak Cipta Dilindungi