Other Code 404 cực đẹp cho site rao vặt

Thảo luận trong 'Community Chat' bắt đầu bởi singh, 3/1/15.

1votes
5/5, 1 vote

  1. singh

    singh Member

    Bài viết:
    384
    Likes :
    79
    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é
    [​IMG]

    Làm thôi
    Vào
    Appearance > Languages > Tiếng Việt
    tìm:
    1. controller_x_does_not_define_action_y
    2. requested_forum_not_found
    3. requested_thread_not_found
    4. 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ác file đính kèm:

    Sơn Phạm and votuonq like this.
    Đang tải...
  2. born2love

    born2love New Member

    Bài viết:
    25
    Likes :
    4
    hay, đánh dấu nhé
     
  3. born2love

    born2love New Member

    Bài viết:
    25
    Likes :
    4
    1doi1.com rip skin muare.vn =)) đẹp thật ... share đi bạn
     
    singh thích bài này.
  4. singh

    singh Member

    Bài viết:
    384
    Likes :
    79
    Đang tìm cách rip cái menu navigation top mà k biết rip đây bạn
     
  5. votuonq

    votuonq Member

    Bài viết:
    277
    Likes :
    139
    đẹp đó thớt :">
     
  6. born2love

    born2love New Member

    Bài viết:
    25
    Likes :
    4
    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
     
comments powered by Disqus

Chia sẻ trang này

Đang tải...