Jquery Image Slider - Slide ảnh với thanh trượt ngang cho Blogspot

Đối với Slider thì việc sử dụng làm điểm nhấn cho blog, website là điều cần thiết. 1 Slide đẹp và mượt mà luôn được người dùng hướng tới. Bài viết này itviet360 chia sẻ với bạn code và cách làm thêm 1 Jquery Image Slider - Slide ảnh với thanh trượt ngang cho Blogspot cũng như trên website khác

DEMO

- Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa mẫu (Edit HTML)
- Tìm tới </head>  và dán code dưới đây ngay trên nó

<link href='https://bloggertrixcode.googlecode.com/files/animate.css' rel='stylesheet' type='text/css'/>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

<script src='https://bloggertrixcode.googlecode.com/files/border-slider.js'/>

<script>/****/

jQuery(document).ready(function(){

jQuery('#bloggertrix_slider').animatedSlider({

'loader':true,

'width':900,

'height':300,

'slide_animation_data' :

[//slides

//slide1 BEGIN

[

{

'target_element':'.txt1',

'animation_frame':0,

'animation_type':'tada'

},{

'target_element':'.txt2',

'animation_frame':0.8,

'animation_type':'tada'

}

],//slide1 END



//slide2 BEGIN

[{

'target_element':'img',

'animation_frame':0,

'animation_type':'bounceInUp'

},{

'target_element':'p',

'animation_frame':0.7,

'animation_type':'bounceInUp'

}],//slide2 END

//slide3 BEGIN

[{

'target_element':'img',

'animation_frame':0,

'animation_type':'bounceInUp'

},{

'target_element':'p',

'animation_frame':0.6,

'animation_type':'bounceInUp'

}],//slide3 END



//slide4 BEGIN

[{

'target_element':'img',

'animation_frame':0,

'animation_type':'bounceInUp'

},{

'target_element':'p',

'animation_frame':0.5,

'animation_type':'bounceInUp'

}],//slide4 END

//slide5 BEGIN

[{

'target_element':'img',

'animation_frame':0,

'animation_type':'bounceInUp'

},{

'target_element':'p',

'animation_frame':0.4,

'animation_type':'bounceInUp'

}],//slide5 END



//slide BEGIN

[{

'target_element':'h1',

'animation_frame':0,

'animation_type':'bounceInUp'

},{

'target_element':'p',

'animation_frame':0.3,

'animation_type':'bounceInUp'

}

]//slide END

]});});

</script>

<link href='http://fonts.googleapis.com/css?family=Kavoon' rel='stylesheet' type='text/css'/>
- Tiếp theo tìm tới ]]></b:skin> và dán code dưới đây ngay trên nó

/* The CSS Code for the slider starts here bloggertrix.com

#bloggertrix_slider {margin:0 auto;}

#bloggertrix_slider .slider-contents {overflow:hidden;border:8px solid #DDDDDD;box-shadow:0 0 3px rgba(3,3,3,0.5);}

#bloggertrix_slider .slide-nav {float:left;padding: 0 8px;height: 26px;background: #3a3a3a;}

#bloggertrix_slider .slide-nav a {width: 14px;height: 14px;text-indent: -999px;float: left;list-style: none;display: block;background: #dddddd;margin: 5px 4px;cursor: pointer;}

#bloggertrix_slider .slide-nav a:hover {

background: #27BAFF !important;}

#bloggertrix_slider .progress-bar {width:0px;background-color:#AAAAAA;height:2px;top: -2px;overflow:visible !important;display:block !important;position: relative;}

#bloggertrix_slider .controls {height: 26px;margin: 4px auto 0;display: table;}

#bloggertrix_sliderr .pause-play-control {width: 46px;height: 26px;float: left;background: #3A3A3A;color: #fff;}

#bloggertrix_slider .pause-play-control a {width:9px;height: 19px;display:block;overflow:hidden;text-indent: -9999px;background:url('http://img837.imageshack.us/img837/7647/fqnu.png');cursor: pointer;margin:3px auto 0;}

#bloggertrix_slider .pause-play-control a.play-slide {background-position:-5px -3px;}

#bloggertrix_slider .pause-play-control a.pause-slide {background-position:-29px -3px;}

#bloggertrix_slider .slider-next,#bloggertrix_slider .slider-prev {

width: 46px;height: 46px;background: #3a3a3a;display: block;font-size: 41px;color: #FFF;font-weight: bold;text-align: center;position: absolute;cursor: pointer;text-indent: -999px;overflow: hidden;}

#bloggertrix_slider .slider-next:before,#bloggertrix_slider .slider-prev:before {background: #3a3a3a url('http://img837.imageshack.us/img837/7647/fqnu.png');width:32px;height:32px;position:relative;top:7px;left:7px;content:'';display:block;}

/*#bloggertrix_slider .slider-next {margin: -220px 0 0 681px;}

#bloggertrix_slider .slider-prev {margin: -220px 0 0 4px;}*/

#bloggertrix_slider .slider-next:before {background-position:-5px -31px;}

#bloggertrix_slider .slider-prev:before {background-position:-5px -70px;}

.slide1 img {position:relative;}

.img-logo {margin-left: 150px;}

.img-mobile {margin-top: 45px;}

.img-tablet {margin: -168px 0 0 139px;}

.img-laptop {margin: -186px 0 0 349px;}

.slide1 {background-color: #67b608}

.slide2 {background-color: #03bbd3}

.slide3 {background-color: #cf6b30}

.slide4 {background-color: #f2a87b}

.slide5 {background-color: #388efd}
- Lưu mẫu lại
- Vào bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
- Dán code dưới đây vào nó

<div id="bloggertrix_slider">

<div class="slide1">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHqmH1jt9m-NKep76KIF6DfmY2GxEi_BSU0FeCSb9xBy-zsiRM64t8cIz0jF-vPWDM-EPg0Jv8odqoZwcd-rMsZNq70Ex5cCb-BOE0M_QtDEPGomHPxnpLma76rwOItBkiAfagZNvNVEQ/s1600/bloggertrix1.jpg" />

</div>

<div class="slide2">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbJFkELUqL5F0E1UObaVj8xMb_KmOpvydUAl-ES2dHFO9f-vM-1l_QI1so4S_Te6eOYrx_nCjBNtZ185GbVBGJAajMiUfz7MTD9Roy5mpwp4lp9tuWntSA8AICEQL8mOJjwQIb6SAbXhQ/s1600/bloggertrix2.jpg" />

</div>

<div class="slide3">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2D26PAf59vGE-9BfXzg97uLbrztEnilmYCFnmjYbzDmBkrcJMd3NOPFpaUbfzmmilkrS2Twq8vI2R_I3MWfvPJ5_2V4O0kTtCw2B-blyqlTZAL4UZTGw20EHSNC3n7vIEhKZs9SwJbfg/s1600/bloggertrix3.jpg" />

</div>

<div class="slide4">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcK4VKm2SCz6GLno1i0-WcnYgTQPcQ42Mp02zlvC66CvxQ44fjg-slJcB3tTvYLm3PgXJo04EadK1GCT7UJlVGotLRgDUqP1T82sa5f4rgoWXkE819u5c1StGU4hSaHqJTLDLpavCr29c/s1600/bloggertrix4.jpg" />

</div>

<div class="slide5">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEuqyoazaxt9a5XRLggmQL0vrtb0T9zjMk5qBPGmAxbvRpWlCwVZefqvMptAMoFF4wp86AbUGE2KctD8TTwGoWwMHLKVfPeILf4g1UWAfbMjo6pZrOMCBOWqUVkEd0Shx641GiJnnOG9Y/s1600/bloggertrix5.jpg" />

</div>

</div>
- Lưu và xem kết quả :)

Xem nhiều thủ thuật hơn tại Lãng Tử Studio


Đừng quên Like và Share nếu thấy bài viết bổ ích