Slide logo mini - Tạo slide logo mini cho diễn đàn

[PVS]

Slide logo mini - Tạo slide logo mini cho Xenforo

Bài viết này sẽ hướng dẫn các bạn tạo slide cho các logo, thuận tiện cho việc quảng cáo thương hiệu hoặc giới thiệu các nhà tài trợ cho diễn đàn.

Bước 1. Upload các file trong thư mục upload lên host chứa xenforo
Bước 2. tạo 2 template: slidelogo và slidelogo.css

Vào AdminCP -> Appearance -> Templates -> create new template:

Template: slidelogo

<div style="margin: 5px 0px;">
<xen:require css="slidelogo.css" />
<script src="js/slidelogomini/jquery.flexisel.js"></script>
<ul id="flexiselDemo3">
  <li><img src="js/slidelogomini/logo3_white.png" /></li>
  <li><img src="js/slidelogomini/your_logo_here.png" /></li>
  <li><img src="js/slidelogomini/logo3_white.png" /></li>
  <li><img src="js/slidelogomini/your_logo_here.png" /></li>
  <li><img src="js/slidelogomini/logo3_white.png" /></li>
  <li><img src="js/slidelogomini/your_logo_here.png" /></li>
</ul>
<div class="clearout"></div>
<script type="text/javascript">
$(window).load(function() {
  $("#flexiselDemo1").flexisel();
  $("#flexiselDemo2").flexisel({
  enableResponsiveBreakpoints: true,
  responsiveBreakpoints: {
  portrait: {
  changePoint:480,
  visibleItems: 1
  },
  landscape: {
  changePoint:640,
  visibleItems: 2
  },
  tablet: {
  changePoint:768,
  visibleItems: 3
  }
  }
  });
  $("#flexiselDemo3").flexisel({
  visibleItems: 6,
  animationSpeed: 1000,
  autoPlay: true,
  autoPlaySpeed: 3000,
  pauseOnHover: true,
  enableResponsiveBreakpoints: true,
  responsiveBreakpoints: {
  portrait: {
  changePoint:480,
  visibleItems: 1
  },
  landscape: {
  changePoint:640,
  visibleItems: 2
  },
  tablet: {
  changePoint:768,
  visibleItems: 3
  }
  }
  });
  $("#flexiselDemo4").flexisel({
  clone:false
  });

});
</script>
</div>

Template: slidelogo.css

.clearout {
height:0px;
clear:both;
}
#flexiselDemo1, #flexiselDemo2, #flexiselDemo3 {
display:none;
}
.nbs-flexisel-container {
  position:relative;
  max-width:100%;
}
.nbs-flexisel-ul {
  position:relative;
  width:9999px;
  margin:0px;
  padding:0px;
  list-style-type:none;
  text-align:center;
}
.nbs-flexisel-inner {
  overflow:hidden;
  float:left;
  width:100%;
  background:#fcfcfc;
  background: #fcfcfc -moz-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* FF3.6+ */
  background: #fcfcfc -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#eee)); /* Chrome,Safari4+ */
  background: #fcfcfc -webkit-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Chrome10+,Safari5.1+ */
  background: #fcfcfc -o-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Opera11.10+ */
  background: #fcfcfc -ms-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* IE10+ */
  background: #fcfcfc linear-gradient(top, #fcfcfc 0%, #eee 100%); /* W3C */
  border:1px solid #ccc;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
}
.nbs-flexisel-item {
  float:left;
  margin:0px;
  padding:0px;
  cursor:pointer;
  position:relative;
  line-height:0px;
}
.nbs-flexisel-item img {
  width: 100%;
  cursor: pointer;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  max-width:100px;
  max-height:45px;
}
/*** Navigation ***/
.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
  width: 22px;
  height: 22px;
  position: absolute;
  cursor: pointer;
  z-index: 100;
  opacity: 0.5;
}
.nbs-flexisel-nav-left {
  left: 10px;
  background: url(js/slidelogomini/button-previous.png) no-repeat;
}
.nbs-flexisel-nav-right {
  right: 5px;
  background: url(js/slidelogomini/button-next.png) no-repeat;
}

Bước 3. Chèn template vào nơi bạn cần bằng 2 cách sau:
Cách 1. Tạo widget [Advanced] Template (without wrapper) với template là slidelogo
Cách 2. Dùng đoạn code sau để chèn:

<xen:include template="slidelogo" />

Bước 4. Thay hình ảnh logo và thêm link trong template slidelogo theo ý bạn.

Demo:

​

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

Nguồn: vxf.vn​

 

[THB]

Chạy nhỏ nhỏ như của bác @share4web hướng dẫn đc ko ta?