Chia sẻ trang 404 hiệu ứng giáng sinh cực đẹp

tháng 12 23, 2018

Ngày mai là giáng sinh rồi !!! Mắc nỗi là giáng sinh năm nay đúng ngay vào ngày thứ hai đầu tuần phải đi học T.T Cơ mà chúc các bạn giáng sinh vui vẻ. Để đón giáng sinh mình đã dành ra ít phút của ngày chủ nhật edit tí code để chia sẻ cho các bạn. Ý tưởng của trang Error 404 này mình lấy từ Google, khi tình cờ thấy ở trang chủ Google khi tìm kiếm. Không luyên thuyên nữa chúng ta vào bài ngay cho "ấm".

Hướng dẫn thực hiện

Chỉ một bước đơn giản, đơn giản cực kì đó chính là các bạn chỉ cần bỏ đoạn code bên dưới vào phía sau thẻ

<head

hoặc trước thẻ

</head>

là được.

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
      <div id='error-wrap'>        
<style>
        #header-wrapper,.top-bar,#footer-wrapper {display:none}
        #error-wrap{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: url(&quot;&quot;) center/340px #3ec4f0 no-repeat;}
        #error-wrap img{width:333px}
        #error-wrap p{font-size:40px}
  .error{margin:0;font-size:70px!important}
</style>
<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">body{background:#f5465a;padding-bottom:150px}</style><img style="position:fixed;z-index:9999;top:0;left:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiduwlCLU28uiVvjrmnDySD4uY2NJMRu2ON2afQEbdTUSjO_5cmhCPIuoGJh_LWXm_ofcjHdkBxVkBACh94lgYrudGLBra23CzfbtyHXM9MLjl4WYRs6sp3JPHAbctEootVyj-Mu0ERmCE/s150/top-left.png"/><img style="position:fixed;z-index:9999;top:0;right:0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJWEn-x2bhZIxCveyQYkC4mQIFayfRb8rWqP_ciTxgTXaJc8NNlUjR0NVxRD8IIxZw2OFlBlgMXEhW3ivtx24DMb4sH8Q0kmb5GcJbghKP5jhhW8WkvlG87IblalWGdcFcaClRIMP9ZQU/s150/top-right.png"/><div style="position:fixed;z-index:99999;bottom:0;left:0;width:100%;height:104px;background:url(https://smartbb.googlecode.com/svn/trunk/dgm-footer.png) repeat-x bottom left;"></div><img style="position:fixed;z-index:9999;bottom:30px;left:30px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8b75m_Z_f0cuU5Zk3yB1Oioams5oP_c2qMc5RycIveCEEye2dyiPBooLHzlhNYAATWRv8lNku6dxfA2_U4IbEeByNVboYb8edNR5vRTQ-8gZwSIle7NUNLFBepYloGAMF5WC8u3g0lvA/s180/bottom-left.png"/>');var no=100;var hidesnowtime=0;var snowdistance='pageheight';var ie4up=(document.all)?1:0;var ns6up=(document.getElementById&&!document.all)?1:0;function iecompattest(){return(document.compatMode&&document.compatMode!='BackCompat')?document.documentElement:document.body}var dx,xp,yp;var am,stx,sty;var i,doc_width=800,doc_height=600;if(ns6up){doc_width=self.innerWidth;doc_height=self.innerHeight}else if(ie4up){doc_width=iecompattest().clientWidth;doc_height=iecompattest().clientHeight}dx=new Array();xp=new Array();yp=new Array();am=new Array();stx=new Array();sty=new Array();for(i=0;i<no;++i){dx[i]=0;xp[i]=Math.random()*(doc_width-50);yp[i]=Math.random()*doc_height;am[i]=Math.random()*20;stx[i]=0.02+Math.random()/10; sty[i]=0.7+Math.random();if(ie4up||ns6up){document.write('<div id="dot'+i+'" style="POSITION:absolute;Z-INDEX:'+i+';VISIBILITY:visible;TOP:15px;LEFT:15px;"><span style="font-size:18px;color:#fff">*</span></div>')}}function snowIE_NS6(){doc_width=ns6up?window.innerWidth-10:iecompattest().clientWidth-10;doc_height=(window.innerHeight&&snowdistance=='windowheight')?window.innerHeight:(ie4up&&snowdistance=='windowheight')?iecompattest().clientHeight:(ie4up&&!window.opera&&snowdistance=='pageheight')?iecompattest().scrollHeight:iecompattest().offsetHeight;for(i=0;i<no;++i){yp[i]+=sty[i];if(yp[i]>doc_height-50){xp[i]=Math.random()*(doc_width-am[i]-30);yp[i]=0;stx[i]=0.02+Math.random()/10;sty[i]=0.7+Math.random()}dx[i]+=stx[i];document.getElementById('dot'+i).style.top=yp[i]+'px';document.getElementById('dot'+i).style.left=xp[i]+am[i]*Math.sin(dx[i])+'px'}snowtimer=setTimeout('snowIE_NS6()',10)}function hidesnow(){if(window.snowtimer){clearTimeout(snowtimer)}for(i=0;i<no;i++)document.getElementById('dot'+i).style.visibility='hidden'}if(ie4up||ns6up){snowIE_NS6();if(hidesnowtime>0)setTimeout('hidesnow()',hidesnowtime*1000)}
//]]>
</script>
           <img src='https://maps.gstatic.com/mapfiles/santatracker/v201812220606/images/village_2x.gif'/>
        <p class='error'>404</p>
          <p>Lỗi rồi con à à à à !! - Santa</p>
          <div class='clear'/>
        <a class='homepage' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Go To Home</a>
      </div>
      </b:if>

Demo

lời kết

Đơn giản chỉ có thế thôi. Hy vọng với thủ thuật này các bạn sẽ làm cho blog của mình ấm hơn nữa!! Và một lần nữa chúc các bạn giáng sinh vui vẻ bên gia đình và người thân.