Pages

Wednesday, November 7, 2012

Tự Động Thay Đổi Hình Nền Theo Thời Gian

Tự Động Thay Đổi Hình Nền Theo Thời Gian 

CLICK ĐỂ XEM  DEMO

 CÁCH LÀM

 1. Chèn đoạn css sau phía trước thẻ ]]></b:skin>

 #supersized {position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%;  width:100%; }
#supersized a { z-index:-30; position:absolute; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111;}
#supersized a.prevslide { z-index:-20; }
#supersized a.activeslide { z-index:-10; }
#supersized a.prevslide img, #supersized a.activeslide img{ display:inline; }

 2. Tiếp tục chèn đoạn code sau trước thẻ </head>

 <script src='http://voquocan.googlecode.com/files/bgslider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(function($){
$.supersized({slideshow:1,autoplay:1,start_slide:0,random: 0,transition:1,transition_speed:1000,new_window:1,pause_hover:0,keyboard_nav:1,performance:1,image_protect:1,min_width:0,min_height:0,vertical_center:1,horizontal_center:1,fit_portrait:1,fit_landscape:0,navigation:1,thumbnail_navigation:1,slide_counter:1,
slide_captions:1,
slide_interval:1000,
slides:[
{image : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEfN7pOhvMpig9dgQgGI888Zza-eTRyPjzGGl8xsxoT2bySAJiTNFgjhNmHkh8txQ9Gc1oEmlsJmCYNAq9RJyvEUL9OR_I3iVE4rXnNEQjNR10ZvzOa3fKBfii_oWJZvdPmQtCUh5gHKkx/s0/1.jpg'},
{image : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDIiMOz8rclCeiiQbVfHGYHDSNs6n2fVJdQJZkseTARXnXmXwL_2vqhkNw7JyXooevwtO_jqCab_umavG0OaQlpICUdlVl_nGFwypctW11yjSTrJJ13Fb6Itgs0E6tYfYNXMePyY0jE6o4/s0/2.jpg'},                           
{image : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDuNtQwnwOLLR01qonZ7VICFZqdMnHuMx2P6LyPh0GSBF26KuulWwLu0_h18XNReT3qSR5Zq7bdrRf232ghLQYVm_7aRt7UlGrgfRb0pUjI-B3hB_wEoK-Qh37xpD3qpg4L87HVpI8D-iT/s0/3.jpg'},   
{image : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDTUDZW9wBx6XyLTFsMNKr-QSeWst9gCBko9z2z5PNKIprXGXWdSrBx-1qby9ADpSklBMpIXTpAEB7VcWq3EUtRUeMpFA2JW1o1e6ylZqaRR4wGLQwId50MfCDlLJu5TzB5KfMrCrweWod/s0/4.jpg'},
{image : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWjoKN5FrPv_aWyFHuAPgAHYbvRpqQjlWOwknU6dp0DreLzKO_7_20OVrB1LGSk__hZibYdzCOZmD-duhNRArUTj8owd5CuJl4_CUzYfv-oKd8J9vY8EFDY12MjEypUJZZRFK-mdZu877p/s0/5.jpg'}
]
});
});
//]]>
</script>

 Save template lại là xong.

 CHÚ Ý

» Trong đoạn code ở bước 2 những link màu đỏ là link hình nền, bạn có thể thay đổi, thêm hoặc bớt số hình nền.
» Số 1000 là thời gian hiển thị của 1 bức ảnh trước khi chuyển qua một bức ảnh khác. (1000 = 1giây)


Trong thủ thuật này sử dụng khá nhiều ảnh nền nên đương nhiên là nó sẽ ảnh hưởng phần nào đến tốc độ load blog. Nhưng bù lại thì nó đem đến cho blog bạn một hiệu ứng khá bắt mắt nếu biết lựa chọn hình nền hợp lý. Bạn nên có những lựa chọn phù hợp cho blog của mình.

1 comment: