Tạo trang 404 hiệu ứng 3D giống Github - Quốc Bảo Blog | Thủ Thuật Blogspot | Thủ Thuật Facebook | PSD Bìa

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

Share:

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/s600/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/s600/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/s600/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/s600/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/s600/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/s600/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/s600/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/s600/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é.

72 comments:

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

    ReplyDelete
  2. 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
  3. 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
  4. Ở trang chủ khi lướt xuống dưới thì lỗi phần sidebar a ơi

    ReplyDelete
  5. 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
  6. www.ngoctinhit.tk
    Ngọc Tính IT
    đổi hộ cái liên kết :))

    ReplyDelete
  7. 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
  8. 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
  9. 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
  10. Lâu rồi Bảo ko có gì mới mẻ hả?

    ReplyDelete
  11. Sắp thi học kì r nên e ít qua tương tác nên anh thôbg cảm ạ

    ReplyDelete
  12. qua tt đi nha bảo,lâu rồi không thấy ông qua,bài nào ông ra là tôi đều cmt đó nha

    ReplyDelete
  13. Trần Hà IT có phải e k bảo?

    ReplyDelete
  14. Sau này thành công đừng quên a nghen e =)) a luôn ok đọc số tài khoản ngân hàng cho mà thăm hỏi nha :))

    ReplyDelete
  15. Lâu quá không vào Blog anh trai, em cũng mất liên kết roài... hì. Chắc do không hoạt động, em sẽ quay lại trong thời gian tới, cụ thể là tầm hết tuần sau anh trai nhé! Vào Blog anh dạo này khác hẳn đi rồi, nhìn theme chuyên nghiệp, bố cục rõ hơn, nhiều thứ rất hay. Cái Logo trên Menu Top cũng rất đẹp.. Bài viết này, cái hiệu ứng rất đẹp nha anh..

    ReplyDelete
    Replies
    1. hihi cảm ơn em nha :p Anh cứ tưởng em quên blog luôn rồi chứ. Liên kết của em chỉ là mất tạm thời thôi, khi nào em quay lại anh sẵn sàng đặt lại nha. Chỉ có Đức là có nhưng lời góp ý chân thành nhất kkkk Thanks em

      Delete