Tạo Slide ảnh đẹp cho blogspot, Web V2 - Thủ thuật

Thủ thuật hôm nay mình giới thiệu tới các bạn là thủ thuật cách tạo slide show hình ảnh cho những bài viết nổi và cần được quan tâm. Slide ảnh với những hiệu ứng đơn giản nhưng nổi phù hợp cho việc tạo thêm ảnh cho slide. Tạo thêm bài viết nổi. Hướng người đọc Blog tới những bài mình muốn nhiều người đọc tới cũng là 1 phần rất quan trọng trong blog của bạn. Lưu ý, Slide này hoàn toàn được ứng dụng cho Website chuyên nghiệp

DEMO
Hướng dẫn thủ thuật trên Blogger. Đối với Website các bạn thêm như những code HTML, CSS, Javascript bình thường
- Cách làm thủ thuật:
1. Đăng nhập vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML) -> Check vào ô "Mở rộng mẫu tiện ích" (Expand Widget Templates)
2. Tìm đến thẻ ]]></b:skin> và dán code dưới đây ngay trên nó

/* slideshow huong dan thu thuat itviet360.com */
.sample{padding:20px 10px; margin:4px 0 25px 0; border:1px solid #e1e1e1}
#box2{
position:absolute;
}
#box2 span{
display:block;
float:left;
}
.buttons{text-align:center;padding:5px;}
.buttons span{color:#0080FF;padding:0 5px;cursor:pointer;font:10px Verdana}
.buttons span.active, .buttons span:hover{background:#0080FF;color:#fff}

.mask2{
position:relative;
width:240px;
height:180px;
overflow:hidden;
}

3. Tìm tới </head> và dán code dưới đây trên nó:

<!-- mootools -->
<script src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools-yui-compressed.js' type='text/javascript'></script>
<!-- Slideshow -->
<script type='text/javascript'>
//<![CDATA[
var noobSlide=new Class({initialize:function(a){this.items=a.items;this.mode=a.mode||'horizontal';this.modes={horizontal:['left','width'],vertical:['top','height']};this.size=a.size||240;this.box=a.box.setStyle(this.modes[this.mode][1],(this.size*this.items.length)+'px');this.button_event=a.button_event||'click';this.handle_event=a.handle_event||'click';this.onWalk=a.onWalk||null;this.currentIndex=null;this.previousIndex=null;this.nextIndex=null;this.interval=a.interval||5000;this.autoPlay=a.autoPlay||false;this._play=null;this.handles=a.handles||null;if(this.handles){this.addHandleButtons(this.handles)}this.buttons={previous:[],next:[],play:[],playback:[],stop:[]};if(a.addButtons){for(var b in a.addButtons){this.addActionButtons(b,$type(a.addButtons[b])=='array'?a.addButtons[b]:[a.addButtons[b]])}}this.fx=new Fx.Tween(this.box,$extend((a.fxOptions||{duration:500,wait:false}),{property:this.modes[this.mode][0]}));this.walk((a.startItem||0),true,true)},addHandleButtons:function(a){for(var i=0;i<a.length;i++){a[i].addEvent(this.handle_event,this.walk.bind(this,[i,true]))}},addActionButtons:function(a,b){for(var i=0;i<b.length;i++){switch(a){case'previous':b[i].addEvent(this.button_event,this.previous.bind(this,[true]));break;case'next':b[i].addEvent(this.button_event,this.next.bind(this,[true]));break;case'play':b[i].addEvent(this.button_event,this.play.bind(this,[this.interval,'next',false]));break;case'playback':b[i].addEvent(this.button_event,this.play.bind(this,[this.interval,'previous',false]));break;case'stop':b[i].addEvent(this.button_event,this.stop.bind(this));break}this.buttons[a].push(b[i])}},previous:function(a){this.walk((this.currentIndex>0?this.currentIndex-1:this.items.length-1),a)},next:function(a){this.walk((this.currentIndex<this.items.length-1?this.currentIndex+1:0),a)},play:function(a,b,c){this.stop();if(!c){this[b](false)}this._play=this[b].periodical(a,this,[false])},stop:function(){$clear(this._play)},walk:function(a,b,c){if(a!=this.currentIndex){this.currentIndex=a;this.previousIndex=this.currentIndex+(this.currentIndex>0?-1:this.items.length-1);this.nextIndex=this.currentIndex+(this.currentIndex<this.items.length-1?1:1-this.items.length);if(b){this.stop()}if(c){this.fx.cancel().set((this.size*-this.currentIndex)+'px')}else{this.fx.start(this.size*-this.currentIndex)}if(b&&this.autoPlay){this.play(this.interval,'next',true)}if(this.onWalk){this.onWalk((this.items[this.currentIndex]||null),(this.handles&&this.handles[this.currentIndex]?this.handles[this.currentIndex]:null))}}}});

//]]>
</script>
<script type='text/javascript'>
window.addEvent('domready',function(){

//SAMPLE 2 (transition: Bounce.easeOut)
var nS2 = new noobSlide({
box: $('box2'),
items: [0,1,2,3,4,5,6.7],
interval: 3000,
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut,
wait: false
},
addButtons: {
previous: $('prev1'),
next: $('next1')
}
});

});
</script>

Sau đó lưu mẫu (save Template)
4. Thêm 1 tiện ích HTML/Javascript bằng cách vào Bố cục (Layout) -> Thêm tiện ích (Add a widget) -> HTML/Javascript
Dán đoạn Code dưới đây vào nó

<h2>SlideShow</h2>
<div class="sample">
<div class="mask2">
<div id="box2">
<span><img alt="Miêu tả hình ảnh" src="Link hình ảnh"/></span>
<span><img alt="Miêu tả hình ảnh" src="Link hình ảnh"/></span>
<span><img alt="Miêu tả hình ảnh"  src="Link hình ảnh"/></span>
<span><img alt="Miêu tả hình ảnh" src="Link hình ảnh"/></span>
<span><img alt="Miêu tả hình ảnh" src="Link hình ảnh"/></span>
<span><img alt="Miêu tả hình ảnh" src="Link hình ảnh"/></span>
<span><img alt="Miêu tả hình ảnh" src="Link hình ảnh"/></span>
<span><img alt="Miêu tả hình ảnh" src="Link hình ảnh"/></span>
</div>
</div>
<p class="buttons">
<span id="prev1"><< Previous</span>
<span id="next1">Next >></span>
</p>
</div>

Lưu lại và xem kết quả.

---

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