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
DEMOHướ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 == "error_page"'>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-EASGtrzmcI9DbQUGXc3qprzI6NIaXC8Ct4iLe9UNXBbVM8IEvtGdkrkiB5dxW9dlLXad8S7T4YUHsSAr8p8thDaP_ahITLk-Z__kTD3I86GZmUt97Uk386FXsieNy0jUZFErNYMLlJY/s1600/t%25E1%25BA%25A3i+xu%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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgibA1wevkPT-ItMW1r2T6cp7gmDvaFA1fhoCdzRwBlEhdHJOxLYy0upI3_ZGWcmAbvJQiZkvfDu4AoVrPI6mSCoPdczcu1lfRxRtiwokMg3UUIJeR6qRbuYEDWnBwcRVuZiovMz3jyoQM/s1600/t%25E1%25BA%25A3i+xu%25E1%25BB%2591ng.png' width='271'/> <img alt='' class='js-plaxify' data-xrange='10' data-yrange='10' height='230' id='parallax_octocat' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNjIHgCI7bNaLJd-I2qAZkct6YELHzE7fY1RjAZK7Q7e6V5BDSx7oBJIFJ076riZZATuErIeH9Ej8bH4Ijt4n6LztGxTyJqRuJxBl_5fvM07NziMjoQ_JVocV5Sy5ivbl2IrZAn9FYDzM/s1600/t%25E1%25BA%25A3i+xu%25E1%25BB%2591ng+%25281%2529.png' width='188'/> <img alt='' class='js-plaxify' data-xrange='10' data-yrange='10' height='156' id='parallax_speeder' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqAoEjMYdYJBlF-EHLcvJZg0IZBnicwYpdWkl5-0dTcAzX-i8KHuTJLZllkmTMn1FHkpMGiPsUHUH-cH0ZGES29mBuV0f3iMVyeOjtPzE2AkuBNWPlNnR38xoDmvt_jYPgPptpCJMiVfg/s1600/t%25E1%25BA%25A3i+xu%25E1%25BB%2591ng+%25282%2529.png' width='440'/> <img alt='' class='js-plaxify' data-xrange='10' data-yrange='10' height='49' id='parallax_octocatshadow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy9rG1kaE5pynQeqplACVFGFDfZ7Zhn4t9Lmc-IDfwjMpFIg51BIEL6pId44L15pGkHk9CyBWfKXg2dOo2FN1NldTqfNrm-oV8TAhEhExSph17vsbwNfBpVQtOf78rhA3igp8kE6QsrnM/s1600/t%25E1%25BA%25A3i+xu%25E1%25BB%2591ng+%25283%2529.png' width='166'/> <img alt='' class='js-plaxify' data-xrange='10' data-yrange='10' height='75' id='parallax_speedershadow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJqUOQaUN8eGfGX8t7xvB071GGoj2qi7EyWC6wcINZh7kerIgX_7rrPqCVoeUn_fbCfI4VH23qfA6a2G55moZXbLv2vtP1_JNPHvgLIFG7CiRmZqwnjvaK-wBsoKp2mHxp2rqi50Nyfgo/s1600/t%25E1%25BA%25A3i+xu%25E1%25BB%2591ng+%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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1cmV-TLIM0p5ULSBEoYS0LAyPLgg6S9eo9zpIrNs3xbS-W91QAS76LIsc1SczRJ8Js6y8BipkpwF8Hx-I-wV-NtQOZsVzqgs7h8LoOySXxztz9Ov1olJxwH96jmOqo7RN9tyCy30Ciaw/s1600/t%25E1%25BA%25A3i+xu%25E1%25BB%2591ng+%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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8fMKIVFoi3momMEETj4Zo5_PFAiSejnLQSJ0IyjyarOVC8revOwfCW1tjG-ko7cga0qALJim5T3vRcFqc2PF7wxsXBw_wnLSBlCYD6JdAWSwPCQ2If7A0U5MOmC58syGaeyaeZDH-tuM/s1600/t%25E1%25BA%25A3i+xu%25E1%25BB%2591ng+%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é.
Đăng nhận xét
demo loi :v
lẹ trời :V cảm ơn nha đã fix
vo blog thay blog bao co bai moi vo cmt luon :v
có báo có bài mới luôn á :V ghê dị
cảm ơn bạn diện
hay à nha <3 chúc a buổi tối vv
Hay đó em
cảm ơn em nha
test ngay i nha anh :p hiẹu ứng đã lắm
ok ông mai tui sửa cho nha
hay nha
Ngon đấy
cảm ơn kiên dz :p
dùng ngay đi nha ><
trông đẹp đấy
ông lấy về dùng đi
Ok cu bảo
ok cu sinh :V
Mobile thấy có 1 khúc
Công nhận là đẹp
chưa reponsive em à :V
kkkk cảm ơn nha >< lấy về dùng ngay đi chớ
Ko đẹp đâu em, nhìn tạm thôi :))
hàng của github đó anh :V em tháy cũng ok mà chưa có time res
Hiệu ứng đẹp đó e :)
Ở trang chủ khi lướt xuống dưới thì lỗi phần sidebar a ơi
lỗi gì vậy em chụp anh xem đc không
hihi anh lấy về dùng i 😆
cx ngon,bao giờ ông làm cái giao diện khung liên kết đẹp đi
hihi cảm ơn ông ~ tui cũng đang định edit lại mà chưa có time
www.ngoctinhit.tk
Ngọc Tính IT
đổi hộ cái liên kết :))
ủa đổi rồi mà ta
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
tên gắt nha :v
Uhm, khi nào a onl pc a sẽ lấy về dùng :)) cho nó bằng ngta haha
ripper
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
cái này độc quyền bên em nên anh khỏi lo ><
toy dân thường :V
dân thường như trình không thường kk
biết tí xíu thôi mà :p
đủ sài để đi kiếm cơm thôi
kiếm cháo :v
cho liên kết t lên cao xíu đi -.-
tương tác tốt đi t cho lên rank :v
Awesome post! Tuyệt cmn vời, quá đẹp
cảm ơn anh cường >< tưởng quên em rồi chớ
chất
cảm ơn nef :v