Hướng dẫn Cách chèn Flex Slider 2 vào XenForo 1.0

[PVS]

Cách chèn Flex Slider 2 vào XenForo 1.0

Bài viết này sẽ hướng dẫn các bạn chèn Flex Slider 2 - Một Slider ảnh nổi tiếng của Woothemes bên WordPress vào XenForo.

Demo: http://flexslider.woothemes.com/

Sau đây là cách làm:

1. Vào trang chủ flexslider.woothemes.com bấm vào nút Download (hoặc tải về dưới file đính kèm):
   
2. Khi download về các bạn giải nén ra và lấy các thứ sau, upload lên host và nhớ ghi lại đường dẫn:
   1. File flexslider.css
   2. File jquery.flexslider.js
   3. Folder fonts
3. Tiếp theo, chèn code này vào template page_container_js_head trước dòng <!--XenForo_Require:JS--> và nhớ sửa lại đường dẫn:
   

   <link rel="stylesheet" href="đường dẫn đến file flexslider.css" type="text/css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
   <script src="đường dẫn đến file jquery.flexslider.js" defer></script>

4. Chèn code sau vào template forum_list trên dòng <xen:hook name="forum_list_nodes"> và dưới dòng này </xen:include></xen:container>:
   

   <!-- Begin Flex Slider 2 -->
   <div class="flexslider">
     <ul class="slides">
       <li>
         <img src="//flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
       </li>
       <li>
         <img src="//flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
       </li>
       <li>
         <img src="//flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
       </li>
        <li>
         <img src="//flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
       </li>
     </ul>
   </div>
   <script>
   // Can also be used with $(document).ready()
   $(window).load(function() {
     $('.flexslider').flexslider({
       animation: "slide"
     });
   });
   </script>
   <style>
   @font-face {
     font-family: 'flexslider-icon';
     src: url('đường dẫn đến folder fonts/flexslider-icon.eot');
     src: url('đường dẫn đến folder fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('đường dẫn đến folder fonts/flexslider-icon.woff') format('woff'), url('đường dẫn đến folder fonts/flexslider-icon.ttf') format('truetype'), url('đường dẫn đến folder fonts/flexslider-icon.svg#flexslider-icon') format('svg');
     font-weight: normal;
     font-style: normal;
   }
   </style>
   <!-- End Flex Slider 2 -->

5. Sửa lại đường dẫn ảnh, hoặc nếu bạn muốn tiện lợi hơn có thể viết Style Property cho nó.

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

Nguồn: xfteam.net​

 

[baoquoc]

Ko biết bị sao mà cài xong chạy ok nó ko cho đổi style. Phải revert lại file head, forum list mới đổi đc