Tạo trang 404 hiệu ứng 3D giống Github

Xin chào các bạn!! Dạo này mình hơi bận nên không có thời gian để viết bài chia sẻ thủ thuật, chỉ up vài tấm bìa của CTV share cho các bạn. Thế nên hôm nay, nhân ngày chủ nhật rảnh rỗi quý giá mình sẽ chia sẻ và hướng dẫn cho các bạn cách Tạo trang 404 hiệu ứng 3D giống Github.

Demo

DEMO

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

Với bài viết này thì các bạn chỉ việc copy và paste code là xong rồi. Vì mình đã "gom" CSS, HTML, JS lại chung cho các bạn rồi. Các bạn copy đoạn code bên dưới và paste vào phía bên dưới

<body>
hoặc
<body....
nhé.
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
      <div id='error-wrap'>
           <style media='screen' type='text/css'>
#content-wrapper { padding:0; margin:0; width: 100%;} #copyright-lower, #site-header, ._hs-content{display:none} #auth { position: absolute; top: 0; right: 0; z-index: 50; min-height: 32px; background-color: rgba(53,95,120,.4); padding: 7px 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.28); display: none; } #auth h1, #auth p, #auth label { display: none; } .auth-form-body { display: inline; } #auth input[type=text], #auth input[type=password] { float: left; width: 175px; margin-right: 9px; border: 0; background-color: #f5f5f5; } #auth input[type=text]:focus, #auth input[type=password]:focus { background-color: #fff; box-shadow: 0 0 5px rgba(255,255,255,.5); } #auth .btn { border: 0; } #auth .btn:focus { box-shadow: 0 0 5px rgba(255,255,255,.5); } label[for=search] { display: block; text-align: left; } #search label { font-weight: 200; padding: 5px 0; } #search input[type=text] { font-size: 18px; width: 705px; } #search .btn { padding: 10px; width: 90px; } #parallax_wrapper { position: relative; z-index: 0; -webkit-transition: all 0.25s ease-in; transition: all 0.25s ease-in; } #parallax_field { overflow: hidden; position: absolute; left: 0; top: 0; height: 370px; width: 100%; } #parallax_field #parallax_bg { position: absolute; top: -20px; left: -20px; width: 110%; height: 425px; z-index: 1; } #parallax_illustration { display: block; margin: 0 auto; width: 940px; height: 370px; position: relative; overflow: hidden; clear: both; } #parallax_illustration img { position: absolute; } #parallax_illustration #parallax_error_text { top: 72px; left: 72px; z-index: 10; } #parallax_illustration #parallax_octocat { top: 94px; left: 356px; z-index: 9; } #parallax_illustration #parallax_speeder { top: 150px; left: 432px; z-index: 8; } #parallax_illustration #parallax_octocatshadow { top: 297px; left: 371px; z-index: 7; } #parallax_illustration #parallax_speedershadow { top: 263px; left: 442px; z-index: 6; } #parallax_illustration #parallax_building_1 { top: 73px; left: 467px; z-index: 5; } #parallax_illustration #parallax_building_2 { top: 113px; left: 762px; z-index: 4; }
    </style>
<div id='parallax_wrapper'> <div id='parallax_field'> <img alt='' class='js-plaxify' data-invert='true' data-xrange='0' data-yrange='20' height='415' id='parallax_bg' src='https://1.bp.blogspot.com/-OlhV2pyvh1U/W8Mqer-35UI/AAAAAAAABn0/Ekl_ZAxHGEAXQAcvXwAYQmt4_A2Z1IxMgCLcBGAs/s1600/t%25E1%25BA%25A3i%2Bxu%25E1%25BB%2591ng.jpg' width='940'/> </div> <div id='parallax_illustration'> <div id='auth'> </div> <img alt='This is not the web page you are looking for' class='js-plaxify' data-xrange='20' data-yrange='10' height='249' id='parallax_error_text' src='https://3.bp.blogspot.com/-Kvl0g6tiims/W8Mqe2IgZPI/AAAAAAAABn4/1-tymMEh5QwWaKxy-1uaZAIGM7IDriu_ACLcBGAs/s1600/t%25E1%25BA%25A3i%2Bxu%25E1%25BB%2591ng.png' width='271'/> <img alt='' class='js-plaxify' data-xrange='10' data-yrange='10' height='230' id='parallax_octocat' src='https://1.bp.blogspot.com/-KLvgkz3aNIA/W8MqdtdAaoI/AAAAAAAABnc/YmlkOZFjm04NxgmptyyF2Hj5jsdoAA0GwCLcBGAs/s1600/t%25E1%25BA%25A3i%2Bxu%25E1%25BB%2591ng%2B%25281%2529.png' width='188'/> <img alt='' class='js-plaxify' data-xrange='10' data-yrange='10' height='156' id='parallax_speeder' src='https://3.bp.blogspot.com/-gb54Kl-SceE/W8MqdoQIygI/AAAAAAAABnk/be0PEAgJ5iwfT1tkuY9z30EoQZVRr1oIwCLcBGAs/s1600/t%25E1%25BA%25A3i%2Bxu%25E1%25BB%2591ng%2B%25282%2529.png' width='440'/> <img alt='' class='js-plaxify' data-xrange='10' data-yrange='10' height='49' id='parallax_octocatshadow' src='https://2.bp.blogspot.com/-MfVS8QcfRXw/W8MqdssJC0I/AAAAAAAABng/REw0Yi8MaWECCwJAiuXjOmTN_usgdstMQCLcBGAs/s1600/t%25E1%25BA%25A3i%2Bxu%25E1%25BB%2591ng%2B%25283%2529.png' width='166'/> <img alt='' class='js-plaxify' data-xrange='10' data-yrange='10' height='75' id='parallax_speedershadow' src='https://2.bp.blogspot.com/-jLuj4XdHDKY/W8MqeFVAgYI/AAAAAAAABno/GtuvSWhEPm8zRbN7AnZEsIIgX0zJ1d0vgCLcBGAs/s1600/t%25E1%25BA%25A3i%2Bxu%25E1%25BB%2591ng%2B%25284%2529.png' width='430'/> <img alt='' class='js-plaxify' data-invert='true' data-xrange='50' data-yrange='20' height='123' id='parallax_building_1' src='https://4.bp.blogspot.com/-SbDAzgLn07o/W8MqeMrIXgI/AAAAAAAABns/TiOaYwjr-0kWJ0gU8bObfNXhZmrudP9EQCLcBGAs/s1600/t%25E1%25BA%25A3i%2Bxu%25E1%25BB%2591ng%2B%25285%2529.png' width='304'/> <img alt='' class='js-plaxify' data-invert='true' data-xrange='75' data-yrange='30' height='50' id='parallax_building_2' src='https://1.bp.blogspot.com/-X-a2_xe5Pwk/W8MqeflIfVI/AAAAAAAABnw/wPeJd_DGz4U3N6KsCV5W7phOeiKEheI8wCLcBGAs/s1600/t%25E1%25BA%25A3i%2Bxu%25E1%25BB%2591ng%2B%25286%2529.png' width='116'/> </div> </div><script src='https://github.com/_error.js' type='text/javascript'/> 
<div style='text-align: center;'>
<center>
<a class='bsw-btn bsw_btn' expr:href='data:blog.homepageUrl' title='GO TO HOME'><span style='font-size: large;'>GO TO HOME</span></a></center>
</div>
 </div>
      </b:if>

Lời kết

Thế thôi nè!! Cảm ơn các bạn đã đón xem. Mong các bạn sẽ giúp đỡ mình phát triển blog hơn. Nhân tiện mình xin rao bán template của mình giá 100k bạn nào mua thì để lại Gmail bên dưới mình sẽ liên hệ các bạn sớm nhất nhé.

50 Comments:

Post a Comment

  1. Replies
    1. test ngay i nha anh :p hiẹu ứng đã lắm

      Delete
  2. Sửa liên kết top phần mềm thành www.ngoctinhblog.tk
    Ngọc Tính Blog
    tks, ttt

    ReplyDelete
  3. Replies
    1. kkkk cảm ơn nha >< lấy về dùng ngay đi chớ

      Delete
  4. Ko đẹp đâu em, nhìn tạm thôi :))

    ReplyDelete
    Replies
    1. hàng của github đó anh :V em tháy cũng ok mà chưa có time res

      Delete
  5. Replies
    1. Uhm, khi nào a onl pc a sẽ lấy về dùng :)) cho nó bằng ngta haha

      Delete
    2. cái này độc quyền bên em nên anh khỏi lo ><

      Delete
  6. Ở trang chủ khi lướt xuống dưới thì lỗi phần sidebar a ơi

    ReplyDelete
  7. cx ngon,bao giờ ông làm cái giao diện khung liên kết đẹp đi

    ReplyDelete
    Replies
    1. hihi cảm ơn ông ~ tui cũng đang định edit lại mà chưa có time

      Delete
  8. www.ngoctinhit.tk
    Ngọc Tính IT
    đổi hộ cái liên kết :))

    ReplyDelete
  9. sửa dùm tôi liên kết với
    https://chimtroiblog.blogspot.com/
    Chim Trời Blog
    tại k có tên đặt nên đặt đại :v

    ReplyDelete
  10. Replies
    1. lò bát quái cho mình xin 1 slot liên kết blog với
      link blog mình https://trickertranha2003.blogspot.com
      mk đặt bạn rồi hóng bạn đặt

      Delete
    2. dân thường như trình không thường kk

      Delete
    3. đủ sài để đi kiếm cơm thôi

      Delete
  11. Awesome post! Tuyệt cmn vời, quá đẹp

    ReplyDelete
    Replies
    1. cảm ơn anh cường >< tưởng quên em rồi chớ

      Delete