Tạo Box Trình Bày Nội Dung Qua Nhiều Trang

Hướng dẫn này bắt nguồn từ Arlina Design, sẽ cung cấp cho các bạn cách Tạo Box Trình Bày Nội Dung Qua Nhiều Trang. Ở đây bạn chỉ cần thêm mã HTML vào trình chỉnh sửa bài đăng sẽ xuất hiện trên blog của bạn.
Hướng dẫn này là hoàn hảo cho các blogger để tạo ra một box bài viết đủ dài, đủ để trình bày nội dung của các bạn mà tiết kiệm được không gian trang của website.

Tạo Box Trình Bày Nội Dung Qua Nhiều Trang

Các Bước Tạo Box Hiệu Ứng Trình Bày Nội Dung Qua Nhiều Trang

Bước 1: Thêm đoạn code bên dưới vào trước ]]></b:skin
/* Multiple Page Slide */
a.movepg.nexter,a.movepg.prever{color:#fff}
.separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 40px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px}
Bước 2: Thêm đoạn script bên dưới vào trước </body>
<script type='text/javascript'>
//<![CDATA[
function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=4;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
//]]>
</script>
Chú ý: Để thêm một trang, hãy thay đổi maxIndex = 4 bằng một số nhất định.
Bước 3: Thêm đoạn code bên dưới vào nơi bạn cần hiển thiện box trình bày nội dung qua nhiều trang
<div class="next-wrap">
  <div id="photocons" class="instruction">
    <div class="slidecontentWrap">
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      <div class="slidecontent">
        <-- ISI KONTEN DI SINI -->
      </div>
      </div>
      </div>
      <a class="movepg prever">prev</a>
      <a class="movepg nexter">next</a>
</div>
Bước 4: Lưu lại và kiểm tra nhé


Lời Kết

Chúc Các Bạn Thành Công, Ủng Hộ Howktech Nhé.
Theo arlinadzgn (vietsub by howktech)
Demo

How To Download File :

Download Here

How To Download File :

Howktech

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!. Xem thêm về tôi

» Nhận Xét Của Bạn - Hãy Comment Lịch Sự Vì Bạn Có Hiểu Biết.

Loading...