Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

[VNXF] Tạo widget Bạn đang cần gì? đẹp cho Xenforo

Chủ đề thuộc danh mục 'Hướng dẫn - Thủ thuật Xenforo' được đăng bởi PCO, 26/2/16.

Lượt xem: 1,762

  1. PCO Thành viên cấp 2

    Tạo widget Bạn đang cần gì? đẹp cho Xenforo

    Bài viết này sẽ hướng dẫn các bạn cách tạo widget Bạn đang cần gì? khá đẹp cho Xenforo.

    Demo:

    9P3Epn1.png
    Cách làm như sau:

    Đầu tiên các bạn tạo 1 widget mới như hình:

    rAi8EUP.png
    Phần HTML các bạn điền:

    Code:
    <div style="overflow: hidden; display: block;">
    Code:
    <div class="item" style="background: #39599f">
       <div class="customThumb_canbanhi">
       <a href="#" style="POSITION: ABSOLUTE; TOP: 32%; LEFT: 32%;"><i class="fa fa-gamepad fa-3"></i></a>
       <a style="POSITION: ABSOLUTE; bottom: 5%; left: 5%; right: 5%;text-align: center;color: #FFF; ">Trò chơi</a>
       <div class="caption">
           <ul>  
           <a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
           </ul>
       </div>
       </div>
    </div>
    
    <div class="item" style="background: #45b0e3">
       <div class="customThumb_canbanhi">
       <a href="#" style="POSITION: ABSOLUTE; TOP: 32%; LEFT: 32%;"><i class="fa fa-tags fa-3"></i></a>
       <a style="POSITION: ABSOLUTE; bottom: 5%; left: 5%; right: 5%;text-align: center;color: #FFF; "> Ứng dụng</a>
       <div class="caption">
           <ul>  
           <a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
           </ul>
       </div>
       </div>
    </div>
    
    <div class="item" style="background: #647687">
       <div class="customThumb_canbanhi">
       <a href="#" style="POSITION: ABSOLUTE; TOP: 32%; LEFT: 32%;"><i class="fa fa-newspaper-o fa-3"></i></a>
       <a style="POSITION: ABSOLUTE; bottom: 5%; left: 5%; right: 5%;text-align: center;color: #FFF; "> Tin tức</a>
       <div class="caption">
           <ul>  
           <a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
           </ul>
       </div>
       </div>
    </div>
    <div class="item" style="background: #ff6565">
       <div class="customThumb_canbanhi">
       <a href="#" style="POSITION: ABSOLUTE; TOP: 32%; LEFT: 32%;"><i class="fa fa-life-ring fa-3"></i></a>
       <a style="POSITION: ABSOLUTE; bottom: 5%; left: 5%; right: 5%;text-align: center;color: #FFF; ">Hỗ trợ kỹ thuật</a>
       <div class="caption">
           <ul>  
           <a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
           </ul>
       </div>
       </div>
    </div>
    </div>
    Sau đó vào EXTRA.CSS thêm đoạn này vào cuối:

    Code:
    /* Bạn đang cần gì? */
    Code:
    #widget-15 .item {
    width: 133px;
    height: 140px;
    overflow: hidden;
    position: relative;
    float: left;
    margin:3px;
    }
    #widget-15 .item .fa-3 {
    font-size: 4em;
    text-shadow: 0 0 0 transparent, 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    color: #000;
    }
    #widget-15 .item img
    {
    border: 0;
    position: absolute;
    }
    
    #widget-15 .item .caption
    {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    transition: 0.3s ease-in-out;
    }
    #widget-15 .item:hover .caption {
    opacity:1;
    }
    #widget-15 .item .caption ul
    {
    color: #fff;
    text-align: center;
    top: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom:0;
    padding: 10px;
    }
    
    #widget-15 .hover-grid .hover-grid-item {
       width: 181px;
       height: 181px;
       margin: 0 18px 18px 0;
       float: left;
       /*-webkit-border-radius: 4px;
       -moz-border-radius: 4px;
       border-radius: 4px;*/
       overflow:hidden;
       position:relative;
       cursor:default;
    }
    
    #widget-15 .hover-grid img {
       /*-webkit-border-radius: 4px;
       -moz-border-radius: 4px;
       border-radius: 4px;*/
       border:0;
       position:absolute;
       margin: 0;
       padding: 0;
    }
    
    #widget-15 .hover-grid-item .caption {
       background-color: #222;
       width:145px;
       height:145px;
       padding: 18px;
       position:absolute;
       left:0;
       color: #fff;
       display:none;
       line-height:1.1;
       /*-webkit-border-radius: 4px;
       -moz-border-radius: 4px;
       border-radius: 4px;*/
    }
    
    #widget-15 .hover-grid-item .caption p {
       font-size: 15px;
       font-weight: 400;
       color: #fff;
    }
    
    #widget-15 .caption ul a[href]:hover,
    #widget-15 .caption ul a:link,
    #widget-15 .caption ul a:visited
    {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    position: absolute;
    color: #fff;
    padding: 40px 10px 10px 10px;
    }
    /* End - Bạn đang cần gì? */
    Nhớ sửa #widget-15 thành id widget của bạn.

    Chúc các bạn thành công.


    Nguồn: VNXF.VN​

    Phạm Hữu Dư thích bài viết này

Ủng hộ diễn đàn