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

1,401 1 2
PVS

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
17,142
Được Like
12,745
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​
 
Bài viết liên quan
Xin hỏi làm sao đưa tất cả tin ghim ra ngoài trang chủ XF2 bởi muabandalat,
làm như thế này như thế nào ạ bởi phamnguyen,
Hỏi cách thêm footer vào theme bởi bloghocpiano,
Make the media slider horizontal scroll arrows more visible - Làm cho các mũi tên cuộn ngang của media slider hiển thị rõ ràng hơn cho XenForo 2.2 bởi PVS,
Adding Social Media Icons to the Headar Section - Thêm các biểu tượng Social vào Header XenForo 2 bởi PVS,
Bị lỗi không login & đăng kí được bởi JinkyS,
Bài viết mới
Định dạng ngày custom_fields d-m-Y bởi muabandalat,
Lựa Chọn Nhóm Thành Viên Trong Quá Trình Đăng Ký bởi muabandalat,
Trường "url" bị thiếu (nằm trong "author") bởi muabandalat,
Xin hỏi làm sao đưa tất cả tin ghim ra ngoài trang chủ XF2 bởi muabandalat,
Addon Donations by Siropu 1.5.1 bởi redbull,
cấu trúc Diễn đàn -Trường "comment" bị thiếu googleconsole bởi muabandalat,
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
bloghocpiano Other 2x Hỏi cách thêm footer vào theme Template Modifications 10
O Help Giúp em cách sửa giao diện trong forum giống voz và otosaigon Template Modifications 16
H Hướng dẫn Cách làm thống kê tin dạng tabs Template Modifications 6
PVS Other Cách làm Footer giống VJL.VN (VXF.VN) đầy đủ Responsive Template Modifications 3
tuannt Cách làm categories trong xenforo Template Modifications 1

Chủ đề tương tự


Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Dịch vụ XenForo của VNXF

anhanhxf     0906081284
Inbox PVS

Xử lý sự cố (Troubleshooting)

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom