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

This is box title
/* 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>

This is box title
<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

This is box title
<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)

LEAVE A REPLY

Please enter your comment!
Please enter your name here