Random Post

  • Cười híp mắt với ảnh vui hậu trường
    Cười híp mắt với ảnh vui hậu trường
    19/05/2013 - 0 Comments

    Cười híp mắt với ảnh vui hậu trường | Nhung hinh anh vui hau truong se khien ban cuoi hip mat.Cô ấy tự nhiên buồn chứ tôi có làm gì đâu nào?Đọc thêm…

  • Truyện cười dân gian - Mất bò gầy được bò béo
    Truyện cười dân gian - Mất bò gầy được bò béo
    20/04/2014 - 0 Comments

    Truyện cười dân gian - "Mất bò gầy được bò béo". Thugian180 tổng hợp một số câu truyện cười dân gian vui nhộn cho các bạn xả stress. Những…

  • Những công nghệ đáng kinh ngạc con người học tập từ tự nhiên
    Những công nghệ đáng kinh ngạc con người học tập từ tự nhiên
    01/12/2013 - 0 Comments

    Công nghệ phỏng sinh học hiện nay đang ngày càng phát triển với những phát minh đáng kinh ngạc.Có một ngành khoa học được gọi là mô phỏng sinh học,…

  • Ảnh - Ảnh bìa Facebook Chủ đề: Siêu xe
    Ảnh - Ảnh bìa Facebook Chủ đề: Siêu xe
    09/04/2013 - 0 Comments

    Bộ ảnh bìa Ôtô, xế hộp khủng cho Facebook OTO FACEBOOK COVERNguồn: Cafe Love

  • Hướng dẫn cách sử dụng text box trong word 2010
    Hướng dẫn cách sử dụng text box trong word 2010
    29/08/2013 - 0 Comments

    Bạn muốn làm những hiệu ứng chữ đẹp hơn trong Word 2010? Bài viết văn bản của bạn cần chèn những chữ nghiêng theo phong cách, theo yêu cầu của người…

  • Thơ tục tĩu hay vui cười 18+: Bác sỹ "khám bệnh"
    Thơ tục tĩu hay vui cười 18+: Bác sỹ "khám bệnh"
    06/03/2013 - 0 Comments

    Lang thang lượm lặt in tờ nét tình cờ lại múc được bài thơ rất vui nhưng có vẻ hơi mang mùi người lớn, 1 số ý kiến cho là tục tĩu...nhưng thôi mình…

  • Download trọn bộ truyện tranh Dr.Slump - Bản đẹp - Siêu hài
    Download trọn bộ truyện tranh Dr.Slump - Bản đẹp - Siêu hài
    15/03/2014 - 0 Comments

    Các Fan của bộ truyện 7 Viên ngọc rồng (Dragon Ball) chắc chắn sẽ không khó để nhận ra những nét vẽ quen thuộc trong Dr Slump - Bộ truyện tranh hài…

Thứ Năm, 7 tháng 3, 2013

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 !

Không có nhận xét nào:

Đăng nhận xét