Code này thay cho trang 404 mang phong cách rao vặt Ae nào thích thì cài. cực đơn giản và đẹp Demo : http://www.1doi1.com/404 Vào link để xem sự sống động nhé Làm thôi Vào Appearance > Languages > Tiếng Việt tìm: controller_x_does_not_define_action_y requested_forum_not_found requested_thread_not_found route_x_not_found Thay toàn bộ bằng mã này Mã: <div id="content_wrapper"> <div id="internal-content" class="pageWrapper"> <div class="toptext"> <span>Bạn lạc đường? Đừng lo.</span><br> Hàng hoá đây rồi, mua sắm ngay thôi! </div> <div> <div class="bgWay"></div> <div class="content-and-img"> <div class="slab slab1"> <ul id="tip1" class="tip"> <li> <a class="" href="http://www.1doi1.com/forums/thoi-trang-nu.265.html" rel="tipsy" original-title="Thời trang nữ"> <i class="women-wears grayScale"></i> <span>Thời trang nữ</span> </a></li> <li> <a class="" href="http://www.1doi1.com/forums/thoi-trang-nam.264.html" rel="tipsy" original-title="Thời trang nam"> <i class="men-wears grayScale" rel="tipsy"></i> <span>Thời trang nam</span> </a></li> <li> <a class="" href="http://www.1doi1.com/categories/dien-thoai-may-tinh-bang.148.html" rel="tipsy" original-title="Điện thoại - Máy tính bảng"> <i class="mobiles grayScale"></i> <span>Điện thoại - Máy tính bảng</span> </a></li> <li> <a class="" href="http://www.1doi1.com/categories/dien-lanh-may-gia-dung.200.html" rel="tipsy" original-title="Điện máy"> <i class="electronic grayScale"></i> <span>Điện máy</span> </a></li> </ul> </div> <div id="monstereyes" class="error-character" style="float:left"> <a class="clicktohome" href="."></a> <div id="eye1" style="left: 450px; top: 17px; width: 22px; height: 22px; position: absolute; overflow: hidden; border-radius: 50%; z-index: 1; background: rgb(255, 255, 255);"><div id="pupil1" style="width: 9px; height: 9px; position: absolute; border-radius: 50%; left: 7.89422673709194px; top: 12.8487110349722px; background: rgb(0, 0, 0);"></div></div><div id="eye2" style="left: 506px; top: 17px; width: 22px; height: 22px; position: absolute; overflow: hidden; border-radius: 50%; z-index: 1; background: rgb(255, 255, 255);"><div id="pupil2" style="width: 9px; height: 9px; position: absolute; border-radius: 50%; left: 6.5px; top: 13px; background: rgb(0, 0, 0);"></div></div></div> <div class="slab slab2"> <ul id="tip1" class="tip"> <li> <a class="" href="http://www.1doi1.com/categories/oto-xe-may-xe-dap.135.html" rel="tipsy" original-title="Ô tô, xe máy , phương tiện đi lại"> <i class="auto grayScale"></i> <span>Ô tô, xe máy , phương tiện đi lại</span> </a></li> <li> <a class="" href="http://www.1doi1.com/categories/thue-va-cho-thue-nha.128.html" rel="tipsy" original-title="Thuê nhà"> <i class="housing grayScale"></i> <span>Thuê nhà</span> </a></li> <li> <a class="" href="http://www.1doi1.com/categories/may-tinh-va-laptop.162.html" rel="tipsy" original-title="Máy tính - Laptop"> <i class="pets grayScale"></i> <span>Máy tính - Laptop</span> </a></li> <li> <a class="" href="http://www.1doi1.com/categories/dien-tu-ky-thuat-so.211.html" rel="tipsy" original-title="Kỹ thuật số"> <i class="hobbies grayScale"></i> <span>Kỹ thuật số</span> </a></li> </ul> </div> <div class="slab slab3"> <ul id="tip1" class="tip"> <li> <a class="" href="http://www.1doi1.com/categories/mua-ban-nha-dat.116.html" rel="tipsy" original-title="Mua bán nhà đất"> <i class="secondhand-market grayScale"></i> <span>Mua bán nhà đất</span> </a></li> </ul></div> <div class="slab slab4"> <ul id="tip1" class="tip"> <li> <a class="" href="http://www.1doi1.com/forums/thu-nuoi-cay-ca-canh.197.html" rel="tipsy" original-title="Thú cưng"> <i class="thucung grayScale"></i> <span>Thú cưng</span> </a></li> </ul></div> <div class="slab slab5"> <ul id="tip1" class="tip"> <li> <a class="" href="http://www.1doi1.com/categories/cho-sim.172.html" rel="tipsy" original-title="Sim số - Thẻ cào"> <i class="sim-cards grayScale"></i> <span>Sim số - Thẻ cào</span> </a></li> <li> <a class="" href="http://www.1doi1.com/categories/mua-sam.189.html" rel="tipsy" original-title="Ăn chơi - Giải trí"> <i class="services grayScale"></i> <span>Ăn chơi - Giải trí</span> </a></li> </ul> </div> <div class="slab slab6"> <ul id="tip1" class="tip"> <li> <a class="" href="http://www.1doi1.com/categories/du-lich.244.html" rel="tipsy" original-title="Du lịch"> <i class="babies grayScale"></i> <span>Du lịch</span> </a></li> <li> <a class="" href="http://www.1doi1.com/categories/thoi-trang-my-pham.263.html" rel="tipsy" original-title="Chăm sóc sắc đẹp"> <i class="perfumes-beauty grayScale"></i> <span>Chăm sóc sắc đẹp</span> </a></li> <li> <a class="" href="http://www.1doi1.com/categories/viec-lam-va-dich-vu.321.html" rel="tipsy" original-title="Lao động - Việc làm - Tuyển sinh"> <i class="jobs grayScale"></i> <span>Lao động - Việc làm - Tuyển sinh</span> </a></li> </ul> </div> </div> <div class="clear"></div> </div> </div> </div> <script type="text/javascript"> var statusCode = parseInt("404",10); var DrawEye = function(eyecontainer, pupil, eyeposx, eyeposy, eyer){ $("#monstereyes").append("<div id='" + eyecontainer + "'><div id='" + pupil + "'></div></div>"); eyecontainer = "#" + eyecontainer; pupil = "#" + pupil; $(eyecontainer).css({left:eyeposx, top:eyeposy}); $(pupil).css({width:eyer*0.4090909090909091,height:eyer*0.4090909090909091}); $(eyecontainer).css({width:eyer,height:eyer}); $(pupil).css({position: 'absolute', background: '#000000', 'border-radius':'50%'}); $(eyecontainer).css({position:'absolute', background:'#FFFFFF', overflow:'hidden', 'border-radius': '50%','z-index':'1'}); // Initialise core variables var r = $(pupil).width()/2; var center = { x: $(eyecontainer).width()/2 - r, y: $(eyecontainer).height()/2 - r }; var distanceThreshold = $(eyecontainer).width()/2 - r; var mouseX = center.x, mouseY = center.y; // Listen for mouse movement $(window).mousemove(function(e){ var d = { x: e.pageX - r - eyeposx - center.x, y: e.pageY - r - eyeposy - center.y }; var distance = Math.sqrt(d.x*d.x + d.y*d.y); if (distance < distanceThreshold) { mouseX = e.pageX - eyeposx - r; mouseY = e.pageY - eyeposy - r; } else { mouseX = d.x / distance * distanceThreshold + center.x; mouseY = d.y / distance * distanceThreshold + center.y; } }); // Update pupil location var pupil = $(pupil); var xp = center.x, yp = center.y; var loop = setInterval(function(){ // change 1 to alter damping/momentum - higher is slower xp += (mouseX - xp) / 10; yp += (mouseY - yp) / 10; pupil.css({left:xp, top:yp}); }, 1); }; var eye = new DrawEye("eye1", "pupil1", 450, 273, 22); var eye = new DrawEye("eye2", "pupil2", 506, 273, 22); var tid = setInterval(changeUp, 1000); function changeUp() { var i = Math.floor((Math.random()*18)+1); $('.slab a').children().removeClass('color'); $('.slab a').children().eq(i).addClass('color'); }; $('.slab a i').on('hover',function(event){ if(event.type == 'mouseenter'){ clearInterval(tid); $('.slab a').children().removeClass('color'); }else{ tid = setInterval(changeUp, 2000); } }); </script> <script type="text/javascript"> $(function() { $('a[rel=tipsy]').tipsy({fade: true, gravity: 's'}); }); </script> <style type="text/css"> #tip{ } .tip li{ display:inline; } .tip a{ float:left; position:Relative; margin-left:10px; margin-right:10px; } .tip a span{ position:Absolute; top:-25px; left:-1%; white-space:nowrap; font-size:12px; font-family:arial,sans-serif; padding:6px 17px; border-radius:3px; } .tip li:nth-child(5) span{ left:-1%; } #tip1 a span{ color:white; background-color:#101010; text-shadow:0 1px 0 rgba(0,0,0,0.7); box-shadow:0 1px 1px rgba(0,0,0,1); visibility:hidden; opacity:0; -moz-transition:top 0.4s,opacity 0.4s ease; -webkit-transition:top 0.4s,opacity 0.4s ease; -o-transition:top 0.4s,opacity 0.4s ease; transition:top 0.4s,opacity 0.4s ease; } #tip1 a span:after{ border-top:7px solid #101010; } #tip1 a:hover span{ visibility:visible; top:-40px; opacity:1; } .tip a span:after{ content:""; width:0; height:0; position:absolute; bottom:-12px; left:0px; border:6px solid transparent; } </style> Tiếp đó chèn vào EXTRA.css code sau đây Mã: /* code trang bao loi 404 */ #content_wrapper{margin:0 auto 15px;overflow:hidden;width:998px;position:relative}.pageWrapper{margin:0 auto;position:relative;width:998px}#internal-content{color:#514f50;font-size:13px;margin:0 auto;width:998px;height: 600px;background:url("images/404/1doi1_404-bg.png") no-repeat scroll 0px 291px transparent} .bgWay:after{background:url("images/404/1doi1_404-background.jpg") no-repeat scroll 0 0 transparent;content:" ";display:block;height:481px;position:absolute;width:995px;z-index: -1} .toptext{font-size:24px;height:118px;line-height:31px;text-align:center;margin-top:30px} .toptext span{color:#b20000;font-size:38px !important} .toptext.letterSpace{letter-spacing:2px} .toptext.letterSpace span{letter-spacing:normal} .error-character:after{background:url("images/404/1doi1_404-icons.png") no-repeat scroll -260px 5px transparent;content:"";display:block;height:320px;width:278px} .error-character,.error505{float:left;margin: 37px -84px 5px -20px;} .error505{background:url("images/404/1doi1_505.png") no-repeat scroll -364px 5px transparent;display:block;height:338px;width:924px;float:left;margin-bottom:20px }.error505 #monstereyes{height:100px;width:100px} .slab:after{-webkit-border-radius:3px; -moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px; border-radius:3px;content:"";display:block;height:7px;width:400px} .slab1:after{width:380px} .slab2:after{width:415px} .slab.slab3:after{width:250px} .slab.slab4:after{width:190px} .slab.slab5:after{width:200px} .slab.slab6:after{width:310px} .slab1{width:400px} .slab.slab2{margin-left: -50px} .slab.slab3{margin-left:0;margin-top:104px;position:absolute} .slab.slab4{margin-left:0;margin-top:235px;position:absolute} .slab.slab5{margin-left:715px;margin-top: -153px;} .slab.slab6{float:right;margin-right:100px;margin-top: -253px;} .slab{float:left} .slab.slab1>a:first-child,.slab.slab2>a:first-child, .slab.slab4>a:first-child,.slab.slab5>a:first-child, .slab.slab6>a:first-child{margin-left:20px}.slab.slab3>a{margin-left:0} .slab>a{height:60px;margin-left:35px;display:inline-block} .slab>a:hover{text-decoration:none}.slab i{background:url("images/404/1doi1_404-icons.png") no-repeat scroll 0 0 transparent;height:59px;width:50px;-webkit-transition-duration: .8s;transition-duration: .8s;-webkit-transition-property: -webkit-transform;transition-property: transform;-webkit-transform:translateZ(0);-ms-transform:translateZ(0); -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-o-transform:translateZ(0); -ms-transform:translateZ(0);-webkit-transform: translateZ(0); -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0);transform:translateZ(0);display:inline-block} .slab i:hover,.color{filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'> <filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0,0 1 0 0 0,0 0 1 0 0,0 0 0 1 0\'/></filter> </svg>#grayscale")!important;-webkit-filter:grayscale(0%)!important;-webkit-transform:translateY(-7px)!important; -ms-transform:translateY(-7px)!important;-webkit-transform:translateY(-7px)!important;-moz-transform:translateY(-7px) !important;-o-transform:translateY(-7px)!important;-ms-transform:translateY(-7px)!important;-webkit-transform: translateY(-7px) !important; -moz-transform: translateY(-7px) !important; -o-transform: translateY(-7px) !important; -ms-transform: translateY(-7px) !important;transform:translateY(-7px) !important}i.women-wears{background-position:0 7px;width:40px} i.men-wears{background-position: -30px 7px;width:62px} i.perfumes-beauty{background-position: -83px 7px;width:67px} i.mobiles{background-position: -174px -135px;width:62px}i.babies{background-position: -70px -131px} i.housing{background-position: -114px -195px}i.sim-cards{background-position: -64px -195px} i.thucung{background-position: -134px -260px;} i.hobbies{background-position:1px -131px;width:70px} i.secondhand-market{background-position:0 -60px;width:250px;height:70px} i.electronic{background-position:3px -195px;width:66px}i.auto{background-position: -166px -194px;width:75px} i.jobs{background-position:0px -260px;width:80px}i.annoucement{background-position: -152px 8px;width:60px} i.discussion{background-position: -120px -131px;width:60px}i.services{background-position: -186px -256px;width:65px} i.pets{background-position:0px -315px;width:75px} .grayScale{filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'> <feColorMatrix type=\'matrix\' values=\'0.3333 .3333 .3333 0 0 .3333 .3333 .3333 0 0 .3333 .3333 .3333 0 0 0 0 0 1 0\'/> </filter> </svg>#grayscale");filter:gray;-webkit-filter:grayscale(100%);transition:all .6s ease;-webkit-transition:all .6s ease;-moz-transition:all .6s ease;-webkit-transition:all .6s ease;-webkit-backface-visibility:hidden}.clear:before,.clear:after{content:"";display:table;line-height:0} .clear{clear:both}.clicktohome{bottom:0;height:120px;position:absolute;width:280px} .tipsy{font-size:10px;position:absolute;padding:5px;z-index:100000} .tipsy-inner{background-color:#000;color:#FFF;max-width:200px;padding:5px 8px 4px 8px;text-align:center} .tipsy-inner{-webkit-border-radius:3px;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px; border-radius:3px; -moz-border-radius:3px;-webkit-border-radius:3px}.tipsy-arrow{position:absolute;width:0; height:0;line-height:0;border:5px dashed #000}.tipsy-arrow-n{border-bottom-color:#000}.tipsy-arrow-s{border-top-color:#000} .tipsy-arrow-e{border-left-color:#000}.tipsy-arrow-w{border-right-color:#000} .tipsy-n .tipsy-arrow{top:0px;left:50%;margin-left: -5px;border-bottom-style:solid;border-top:none; border-left-color:transparent;border-right-color:transparent} .tipsy-nw .tipsy-arrow{top:0;left:10px;border-bottom-style:solid;border-top:none; border-left-color:transparent;border-right-color:transparent} .tipsy-ne .tipsy-arrow{top:0;right:10px;border-bottom-style:solid;border-top:none; border-left-color:transparent;border-right-color:transparent} .tipsy-s .tipsy-arrow{bottom:0;left:50%;margin-left: -5px;border-top-style:solid;border-bottom:none; border-left-color:transparent;border-right-color:transparent} .tipsy-sw .tipsy-arrow{bottom:0;left:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent} .tipsy-se .tipsy-arrow{bottom:0;right:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent} .tipsy-e .tipsy-arrow{right:0;top:50%;margin-top: -5px;border-left-style:solid;border-right:none;border-top-color:transparent;border-bottom-color:transparent} .tipsy-w .tipsy-arrow{left:0;top:50%;margin-top: -5px;border-right-style:solid;border-left:none;border-top-color:transparent;border-bottom-color:transparent} /* code trang bao loi 404 */ Up file đính kèm lên ngang hàng với index Bây giờ khi truy cập vào trang không tồn tại thì sẽ thấy. Xong
Cái nav nó làm respon đấy, bạn xem Rip được bảo tớ với, tớ cũng đang cần cái đấy của nó, respon thích thật