(Traidatmui.com) – Hôm nay mình xin chia sẻ đến các bạn một thủ thuật với hiệu ứng Sroller cho một nội dung nào đó. Thông thường đối với những nội dung dài thì để nó không chiếm nhiều không gian trên blog bạn, chúng ta có thể cho chúng nằm trong một khung và dùng hiệu ứng cuộn trang. Thủ thuật này cũng ứng dụng hiệu ứng này tuy nhiên nó có một điểm khác biệt nhỏ. Đối với cửa sổ cuộn thì bạn thường lăn chuột để xem nội dung kế tiếp, còn với thủ thuật này bạn không phải cuộn chuột, thay vào đó bạn chỉ việc rê chuột vào biểu tượng lên, xuống thì bạn có thể xem được những nội dung kế tiếp. Bạn xem demo bên dưới.1. Đầu tiên bạn đăng nhập vào tài khoản blogspot
2. Vào thiết kế và chọn thêm tiện ích
3. Chọn thêm 1 HTML/Javasript và thêm code bên dưới vào phần tử HTML vừa thêm
<script type="text/javascript">
iens6=document.all||document.getElementById
ns4=document.layers
var speed=5 //tốc độ scroll
if (iens6){
document.write('<div id="container" style="background:#000099; position:relative; width:350px; height:180px; color:#fff; border:1px solid #aaa; overflow:hidden;">')
document.write('<div id="content" style="padding:5px; position:absolute; width:98%; left:0; top:0">')
}
</script>
<ilayer name="nscontainer">
<layer name="nscontent">
Nội dung chứa trong khung scroll
</layer>
</ilayer>
<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')</script>
<span style="margin-left:140px;"><a href="#moveup()" onmouseover="moveup()" onmouseout="clearTimeout(moveupvar)"><img alt="Lên trên" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ0AXOxkvXdy9TepK6oa1QJMI5zdDbRShqiP2cpLOb22eW0dwBfWpFeksQlsYLHRRaFiXySs6VV27D75VHKm2CNINLg5skjUduamc9zmYvBrVNdlk8iqn7IZV6CD9innZrF_27h9rXOwa-/" border="0" /></a>
<a href="#movedown()" onmouseover="movedown()" onmouseout="clearTimeout(movedownvar)"><img alt="Xuống dưới" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKYIZqd4tYxqk3vOJT1OzXeFNk9-EZwjk4lU8xw3AYa018nUU3BqoJPrEwIoSFq-Y2kUwox9-JpN3W4lHEoBRrA1MgCmnICQMUlSLmS-ipR6EUmms1mTllsIBTEfCivNq_N7ndtdxxcLg8/" border="0" /></a></span>
<script src="http://traidatmui-tips.googlecode.com/files/scroller_content.js" type="text/javascript"/></script>
iens6=document.all||document.getElementById
ns4=document.layers
var speed=5 //tốc độ scroll
if (iens6){
document.write('<div id="container" style="background:#000099; position:relative; width:350px; height:180px; color:#fff; border:1px solid #aaa; overflow:hidden;">')
document.write('<div id="content" style="padding:5px; position:absolute; width:98%; left:0; top:0">')
}
</script>
<ilayer name="nscontainer">
<layer name="nscontent">
Nội dung chứa trong khung scroll
</layer>
</ilayer>
<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')</script>
<span style="margin-left:140px;"><a href="#moveup()" onmouseover="moveup()" onmouseout="clearTimeout(moveupvar)"><img alt="Lên trên" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ0AXOxkvXdy9TepK6oa1QJMI5zdDbRShqiP2cpLOb22eW0dwBfWpFeksQlsYLHRRaFiXySs6VV27D75VHKm2CNINLg5skjUduamc9zmYvBrVNdlk8iqn7IZV6CD9innZrF_27h9rXOwa-/" border="0" /></a>
<a href="#movedown()" onmouseover="movedown()" onmouseout="clearTimeout(movedownvar)"><img alt="Xuống dưới" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKYIZqd4tYxqk3vOJT1OzXeFNk9-EZwjk4lU8xw3AYa018nUU3BqoJPrEwIoSFq-Y2kUwox9-JpN3W4lHEoBRrA1MgCmnICQMUlSLmS-ipR6EUmms1mTllsIBTEfCivNq_N7ndtdxxcLg8/" border="0" /></a></span>
<script src="http://traidatmui-tips.googlecode.com/files/scroller_content.js" type="text/javascript"/></script>
Chỉnh sửa code:
- Code màu đỏ chính là độ rộng (width) và chiều cao (height) của khung nội dung
- Bạn dựa vào code màu xanh để chỉnh sửa màu chữ, màu nền, màu đường viền lại cho phù hợp với blog bạn.
- Dòng màu đỏ đậm là nơi chứa nội dung bạn muốn cho nó cuộn, bạn thay thành nội dung của bạn.
4. Save phần tử lại là xong
Bài đăng
0 nhận xét