Other Cách làm OUR PARTNERS đẹp và đầy đủ Responsive

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,639
Được Like
12,671
Cách làm OUR PARTNERS đẹp và đầy đủ Responsive

Bài viết này sẽ hướng dẫn các bạn làm một bảng liên kết với đối tác đẹp và đơn giản.

9rMjZh.png

Yêu cầu :
Các bạn sẽ tạo một Widget mới với nội dung như sau :
  1. Title: Our Partners
  2. [Advanced] HTML & Template (without wrapper)
  3. Code thì copy đoạn code sau vào và nhớ sửa nội dung nhé:
    Mã:
    <div id="fifavn-partners">
      <a class="title" href="http://fifavn.org/forum/forums/qu%C3%A1n-game-ti%E1%BB%87m-game.144/?prefix_id=50">GAME STATION PARTNERS</a><br>
      <div class="partners">
        <div class="partner">
          <!-- <div class="block1"><a href=""><i class="fa fa-gamepad fa-2x"></i></a></div> -->
          <a href="http//www.paradiseps4.com" class="container" target="_blank">
            <span class="name">PARADISE PS4</span><br>
            <span>5H Nguyễn Cao, Hai Bà Trưng, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/102a4thanhcong" class="container" target="_blank">
            <span class="name">PLAYSTATION 4</span><br>
            <span>102A4 TT.Thành Công, Thành Công, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/yolops4" class="container" target="_blank">
            <span class="name">YOLO PS4 GAMES</span><br>
            <span>163/14/14 Tô Hiến Thành, P.13, Q.10, TP.HCM</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/pages/Quan-PS-4/605160142892593" class="container" target="_blank">
            <span class="name">GAME 108 PS4</span><br>
            <span>108 ngõ chợ Khâm Thiên, Đống Đa, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/ps4box" class="container" target="_blank">
            <span class="name">PS4BOX</span><br>
            <span>150 Khâm Thiên, Đống Đa, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/battleps4" class="container" target="_blank">
            <span class="name">BATTLE PS4</span><br>
            <span>145 Triệu Việt Vương, Hai Bà Trưng, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="http://shisha3mien.vn/" class="container" target="_blank">
            <span class="name">PS4 IBOX</span><br>
            <span>27 Nguyễn Khắc Nhu, Ba Đình, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/HDGamingVinhHo" class="container" target="_blank">
            <span class="name">HD GAMING</span><br>
            <span>111 A2 Vĩnh Hồ, Đống Đa, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/PS4ElClasico" class="container" target="_blank">
            <span class="name">PS4 EL CLASSICO</span><br>
            <span>246 Giếng Đồn, Hạ Long, Quảng Ninh</span>
          </a>
        </div>
        <div class="partner">
          <a href="https://www.facebook.com/cafeVPes" class="container" target="_blank">
            <span class="name">VPES</span><br>
            <span>136 ngách 95/8 Chùa Bộc, Đống Đa, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/h2pesshop" class="container" target="_blank">
            <span class="name">H2 PES SHOP</span><br>
            <span>25 Phó Đức Chính, Ba Đình, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="http://psblue.vn/" class="container" target="_blank">
            <span class="name">PS4BLUE</span><br>
            <span>219 Đê La Thành, Đống Đa, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/ps4bmtlife" class="container" target="_blank">
            <span class="name">PS4 BMT LIFE</span><br>
            <span>36/27 D2, P.25, Q.Bình Thạnh, TP.HCM</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/pages/Challenger-Playstation/1578405022399517" class="container" target="_blank">
            <span class="name">CHALLENGER PLAYSTATION</span><br>
            <span>150 Nguyễn Xí, P.26, Q.Bình Thạnh, TP.HCM</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="http://www.tekken.com.vn/" class="container" target="_blank">
            <span class="name">TEKKEN - PS4</span><br>
            <span>296 Đường D2, P.25, Q.Bình Thạnh, TP.HCM</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/Ps68-319431954869766/" class="container" target="_blank">
            <span class="name">PS 68</span><br>
            <span>57 Ngõ 121 Lê Thanh Nghị (Ngõ 205 Giải Phóng), Q.Hai Bà Trưng, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/KATPS4" class="container" target="_blank">
            <span class="name">KAT PS4</span><br>
            <span>114 Triều Khúc, Q.Thanh Xuân, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/Nocops4.Official/" class="container" target="_blank">
            <span class="name">NOCO PS4</span><br>
            <span>237 Dương Quảng Hàm, P.6, Q. Gò Vấp, TP.HCM</span>
          </a>
        </div>
      </div>
    </div>
    <div id="fifavn-partners">
      <a class="title" href="http://fifavn.org/forum/forums/qu%C3%A1n-game-ti%E1%BB%87m-game.144/?prefix_id=50">GAME STATION PARTNERS</a><br>
      <div class="partners">
        <div class="partner">
          <!-- <div class="block1"><a href=""><i class="fa fa-gamepad fa-2x"></i></a></div> -->
          <a href="http//www.paradiseps4.com" class="container" target="_blank">
            <span class="name">PARADISE PS4</span><br>
            <span>5H Nguyễn Cao, Hai Bà Trưng, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/102a4thanhcong" class="container" target="_blank">
            <span class="name">PLAYSTATION 4</span><br>
            <span>102A4 TT.Thành Công, Thành Công, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/yolops4" class="container" target="_blank">
            <span class="name">YOLO PS4 GAMES</span><br>
            <span>163/14/14 Tô Hiến Thành, P.13, Q.10, TP.HCM</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/pages/Quan-PS-4/605160142892593" class="container" target="_blank">
            <span class="name">GAME 108 PS4</span><br>
            <span>108 ngõ chợ Khâm Thiên, Đống Đa, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/ps4box" class="container" target="_blank">
            <span class="name">PS4BOX</span><br>
            <span>150 Khâm Thiên, Đống Đa, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/battleps4" class="container" target="_blank">
            <span class="name">BATTLE PS4</span><br>
            <span>145 Triệu Việt Vương, Hai Bà Trưng, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="http://shisha3mien.vn/" class="container" target="_blank">
            <span class="name">PS4 IBOX</span><br>
            <span>27 Nguyễn Khắc Nhu, Ba Đình, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/HDGamingVinhHo" class="container" target="_blank">
            <span class="name">HD GAMING</span><br>
            <span>111 A2 Vĩnh Hồ, Đống Đa, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/PS4ElClasico" class="container" target="_blank">
            <span class="name">PS4 EL CLASSICO</span><br>
            <span>246 Giếng Đồn, Hạ Long, Quảng Ninh</span>
          </a>
        </div>
        <div class="partner">
          <a href="https://www.facebook.com/cafeVPes" class="container" target="_blank">
            <span class="name">VPES</span><br>
            <span>136 ngách 95/8 Chùa Bộc, Đống Đa, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/h2pesshop" class="container" target="_blank">
            <span class="name">H2 PES SHOP</span><br>
            <span>25 Phó Đức Chính, Ba Đình, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="http://psblue.vn/" class="container" target="_blank">
            <span class="name">PS4BLUE</span><br>
            <span>219 Đê La Thành, Đống Đa, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/ps4bmtlife" class="container" target="_blank">
            <span class="name">PS4 BMT LIFE</span><br>
            <span>36/27 D2, P.25, Q.Bình Thạnh, TP.HCM</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/pages/Challenger-Playstation/1578405022399517" class="container" target="_blank">
            <span class="name">CHALLENGER PLAYSTATION</span><br>
            <span>150 Nguyễn Xí, P.26, Q.Bình Thạnh, TP.HCM</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="http://www.tekken.com.vn/" class="container" target="_blank">
            <span class="name">TEKKEN - PS4</span><br>
            <span>296 Đường D2, P.25, Q.Bình Thạnh, TP.HCM</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/Ps68-319431954869766/" class="container" target="_blank">
            <span class="name">PS 68</span><br>
            <span>57 Ngõ 121 Lê Thanh Nghị (Ngõ 205 Giải Phóng), Q.Hai Bà Trưng, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/KATPS4" class="container" target="_blank">
            <span class="name">KAT PS4</span><br>
            <span>114 Triều Khúc, Q.Thanh Xuân, Hà Nội</span>
          </a>
        </div>
    
        <div class="partner">
          <a href="https://www.facebook.com/Nocops4.Official/" class="container" target="_blank">
            <span class="name">NOCO PS4</span><br>
            <span>237 Dương Quảng Hàm, P.6, Q. Gò Vấp, TP.HCM</span>
          </a>
        </div>
      </div>
    </div>
    <style>
      @media (max-width:610px) and (max-width:480px)
    {
        #fifavn-partners {
            display:none;
        }
    }
    
    #fifavn-partners .partner {
      display:inline-block;  
      width:32%;
      margin:0 0 5px 0;
      font-family: 'Roboto Condensed', sans-serif !important;
      background:#075b7f;
      color:#ddd;
      text-shadow: 0px 1px 0px rgba(0,0,0,0.5);
      -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
      box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
    }
    
    #fifavn-partners .container {
      display:inline-block;
      vertical-align:middle;
      padding:10px 0px 10px 10px;
      white-space:nowrap;
      text-overflow:ellipsis;
      overflow:hidden;
      width:92%;
    }
    #fifavn-partners .partner a {
      text-decoration:none;
      color:#ddd;
    }
    #fifavn-partners .partner:hover {
      text-decoration:none;
      background: rgb(34, 179, 190);
    }
    #fifavn-partners .name {
      font-size:20px;
      font-weight:700;
      color:#fff;
    }
    #fifavn-partners {  
    overflow: hidden;
    width: 100%;
    height: auto;
    margin: 0 0 0 10px;
    padding: 0;    
    }
    #fifavn-partners .partners {
    margin-top: 10px;
    }
    #fifavn-partners .title {
    font-family: Oswald, sans-serif;
    font-weight: 700;
    font-size: 1.5em;
    letter-spacing: 1px;
    }
    #fifavn-partners .title:hover {
    color: rgb(137, 213, 0)
    }  
    </style>
  4. Position: hook:ad_below_content
  5. Conditional: {$contentTemplate} == 'forum_list'
  6. Lưu lại là xong.
Chúc các bạn thành công.


Nguồn: xfteam.net​
 

Top Bottom