Hướng dẫn cách tạo Slide ảnh dạng Accordion Slider cho Blogspot

Hướng dẫn cách tạo Slide ảnh dạng Accordion Slider cho Blogspot.Hướng dẫn cách tạo Accordion Slider cho Blogspot - Website. Sau đây Bít Tuốt Xin chia sẻ với các bạn cách tạo 1 Accordion Slider cho blog hay website của mình.

Xem Demo

Cách tạo Accordion Slider cho Blogspot - Website

Bước 1: Đăng nhập vào Blog ==> template (Mẫu) ==> Chọn Chỉnh sửa HTML ==> Dán đoạn code sau vào trước thẻ đóng ]]></b:skin>.

#slider h2{display:none}
.container {padding: 10px 0 15px;z-index: 100;display: block;margin: 0 auto;position: relative;width: 930px;}
.js_active .slideshow img{visibility:hidden;}
.slideshow_container{position: relative;margin-bottom:20px;}
.slideshow{background: #f8f8f8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsmAuVWWpRnrnG34G5F5VWxRXkL_EGrSoeTtPnMxJy7iU4NOdyeos1uMcbhIYH_agJWf03NEp637kkaWEtDo4YpPAlNhewXbVx22DtxXIfueQ1Lk-rbBBjfuo5Xg1rgvatMQXrs2QwgZg/s12/loading.gif) center center no-repeat;display:block;position: relative;padding:0;margin:0;overflow: hidden;z-index: 2;}
.slideshow .featured{display: none;width:100%;height:100%;position: absolute;top:0;
left:0;z-index: 1;margin:0;padding:0;}
.slideshow .featured_container1{display:block;z-index: 2;}
.slideshow iframe, .slideshow object, .slideshow embed, .slideshow video, .slideshow img, .slideshow a img{display:block;padding:0;margin:0 auto;position: relative;border: none;text-decoration: none;z-index: 1;height:100%;width:100%;}
.auto_height .slideshow .featured img{height:auto;}
.slideshow img, .slideshow a img{z-index:2;}
.slideshow > li > a{display:block;width:100%;height:100%;}
.slideshow .slideshow_video{position: absolute;top:0;left:0;right:0;bottom:0;z-index: 1;background: #000;}
.comboslide .slideshow_video{display:none;}
.videoSlideContainer img{cursor: pointer;}
.slideshow_caption{position: absolute;display: none;bottom: 0;z-index: 100;font-size: 11.5px;line-height:1.5em;background: #000;color: #fff;right:auto;}
.slideshow_caption strong,.slideshow_caption h1{display: block;padding: 0px;color:#fff;font-size: 12px;font-style: normal;font-weight: bold;letter-spacing: 1.5px;text-transform: uppercase;}
.slideshow_caption .inner_caption{display:block;background: #000;padding:14px 15px;}
.featured_caption{font-size:11px;padding-top:5px;}
.aviacordion .slideshow{background: #f8f8f8;}
.aviacordion .featured,.aviacordion .slideshow_caption{width:610px;}
.aviacordion .featured{display: none;height:100%;position: absolute;top:0;left:0;
z-index: 1;margin:0;padding:0;background: #f8f8f8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsmAuVWWpRnrnG34G5F5VWxRXkL_EGrSoeTtPnMxJy7iU4NOdyeos1uMcbhIYH_agJWf03NEp637kkaWEtDo4YpPAlNhewXbVx22DtxXIfueQ1Lk-rbBBjfuo5Xg1rgvatMQXrs2QwgZg/s12/loading.gif) center center no-repeat;}
.aviacordion .shadow{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjop-GCdvhrs74lJ1KZzvsDv8tkDBmQTyEZM-tPe6D1V0bq8rsIJcnNICbkgiuTkbl92YNHubiHaho5H2euoNAFy-PIj1SY3FdWdLUU-ZqPVyBs44A276Db-1I-OfM0Vr2grpR5CHbVZL8/s40/shadow.png) repeat-y scroll left top transparent;height:100%;width:15px;position: absolute;left:-15px;top:0;}
.aviacordion .featured img{position: absolute;top:0;left:0;height:auto;width:auto;}
.aviacordion .heading_clone{position: absolute;z-index:4;bottom:0;left:0;background: #000;}
.aviacordion .center_helper{height:100%;display:table;}
.aviacordion .heading_clone h1{text-transform: uppercase;padding:15px;background: #000;color:#fff;font-size: 12px;display: table-cell;vertical-align: middle;}
.pptimeleft{text-align:center;font-size: 11px;}
.ppfsenter{display:none !important;width:0px;}
.comboslide .slideshow_overlay{display: block;width:100%;height:100%;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFGh-2TO6NQkkhZCfL1NdG4lvXaVDkcQDsvA5FIFnxAOtsKyg9DAedUlUcXXG_UH3-xpNfPvoBCNYFqNbVOhD90kMgZiNzNh4HCtPAIv86kxPizD1qlUJedqKv-dXjwzTf6RvoQOJf1cM/s90/video.png) no-repeat scroll center center transparent;z-index: 3;position: absolute;opacity: 0.5;cursor: pointer;top:0;left:0;}
.videoSlideContainerEmbed video, .videoSlideContainer video{left:0 !important;top:0 !important;}
.rounded_corner{height:5px;width:5px;position: absolute;z-index: 200;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnoN55NFDsoLyO5_6hjS_eQaU2xuURCvo4wtee-mvgIzzfYO2sVa2pa5sYjmSwYLpsGuabkdnKNWMYeiLS15POIzxZEcYpNnyzVYTktOebdY4HkpbG2E5iMGondDxKgTXqZLcQzlNo8bQ/s20/rounded_corners.png) no-repeat scroll top left transparent;}
.rctl{top:0;left:0;}
.rctr{top:0;right:0;background-position: top right;}
.rcbl{bottom:0;left:0;background-position: bottom left;}
.rcbr{bottom:0;right:0;background-position: bottom right;}
.aviacordion .bottom_shadow, .slideshow_featured .bottom_shadow {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTxn5leHNmMdlrVhuAhtlpX4XCD5c90yU5M1hc7etqXmPIxdZst47vwFiTJ-he6j0sqcKQHpGkWsFEbPdAEt3kJwbATh6IEPr807_z_MX1c4Afw-qkiKad5C0t3g4LbrDXNNjX7VZMVZ0/s953/shadow-featured.png) no-repeat scroll left top transparent;bottom: -5px;height: 11px;left: -12px;position: absolute;width: 954px;z-index: 1;}
.aviacordion .rcbl, .aviacordion .rcbr, .slideshow_featured .rcbl, .slideshow_featured .rcbr{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNOIMTyAmf2C_-Rw13EYtqEaDyNMMzSnmFhdBiodc6h9nHufy4h49D61OFaclU63Hj6m2GG58Tf6L823unLXF064sszynII_m1hTmPhyphenhyphen-tChLMyStEHNlhQ9IDB0orGzwl5diaA0lm-0s/s20/rounded_corners_shadow.png);}
.medium_image .slideshow_caption{width:360px;}
.big_image .slideshow_caption{width:520px;}
.small_image .slideshow_caption{display: none !important;}
.aviacordion .lightbox_image .image_overlay_effect_inside,.slideshow_featured .lightbox_image .image_overlay_effect_inside {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkLjsuqRiOeMYJuQHQlU2YrsVkp83QBzb-Hj5UDCv7pyzE4QLA_40oqngCsI3jfxPI-MCcX1oEQL4O-HHs__4YJkyVz2OFF-wYmp3Jo13PFPe_LI89ofkYRFXkN9YJnfusCdyqoMKwH-w/s90/magnify.png) no-repeat scroll center center transparent;}
.lightbox_video,.lightbox_image,.image_overlay_effect,.image_overlay_effect_inside {bottom: 0;left: 0;position: absolute;right: 0;top: 0;z-index: 2;}

Chú ý: Các bạn down các ảnh từ link ảnh bôi mài xanh kia rồi up lên host riêng của mình để tránh trường hợp các file ảnh này bị xóa mất gây ra lỗi hiển thị.

Bước 2: Tìm thẻ sau: <div id='content-wrapper'> rồi dán đoạn code dưới đây lên trên thẻ tìn được
(Đây là cách tạo ra 1 widget dạng HTML/Javascript ,và cho phép nó chỉ hiển thị ở trang chủ.Các bạn không nhất thiết phải cho code dưới lên trên <div id='content-wrapper'> mà có thể cho vào vị trí tùy ý mà muốn hiển thị khác nhưng bạn phải có kiến thức chút về HTML, CSS )

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/seovnpro/accordion.js' type='text/javascript'/>
<b:section id='slider' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML96' locked='true' title='Accordion Slider' type='HTML'/>
</b:section>
</b:if>

Lưu ý:
- Nếu website hay blog bạn mà có dòng tương tự như này <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> thì các bạn ko cần phải thêm cái này <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> vào nữa.
- <script src='https://sites.google.com/site/seovnpro/accordion.js' type='text/javascript'/> Các bạn down về rối up lên host riêng nhé tránh trường hợp bị mất file này gây lỗi hiển thị
- HTML96 - slider: Cái này bạn đặt tên ko được trùng nhé
- Accordion Slider: Tên của widget sẽ tạo

Bước 3: Nhấn lưu lại

Bước 4:  Quay lại Phần tử Trang tìm tới phần Layout(Bố cục) bạn sẽ thấy 1 Wiget mới với tên Accordion Slider bạn bấm vào chỉnh sửa (Edit). Xóa cái tên Accordion Slider đi và dán đoạn code bên dưới vào:

<div class='container'>
<div class=' preloading autoslide_true autoslidedelay__5 slideshow_aviacordion aviacordion slideshow_container'>
<span class='rounded_corner rctl'></span>
<span class='rounded_corner rctr'></span>
<span class='rounded_corner rcbl'></span>
<span class='rounded_corner rcbr'></span>
<span class='bottom_shadow'></span>
<ul class='slideshow' style='height: 370px; width: 930px;'>
<li class='featured featured_container1' ><a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE7TQIpA7Hm7MM9jM4W-ILnmJzO2gPwzWfFf-lpjwydap91Y7n21lggaYaSRiAgCN-sYGPNK2XaHCW02TUaf5RXaolo7vqKys0LdYX_hbtWXGf2yX0AJoLACTP5DLCfw9YqS1BG4ga65k/s1024/1.jpg'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE7TQIpA7Hm7MM9jM4W-ILnmJzO2gPwzWfFf-lpjwydap91Y7n21lggaYaSRiAgCN-sYGPNK2XaHCW02TUaf5RXaolo7vqKys0LdYX_hbtWXGf2yX0AJoLACTP5DLCfw9YqS1BG4ga65k/s610/1.jpg' />
<div class="slideshow_caption">
<div class="inner_caption">
<h1>Yep you guessed right, this is the image caption title!!</h1>
<div class="featured_caption">This is the image caption text. you can choose to omit it if you want. In that case there will be no caption text overlay once you hover over this image.</div></div></div></a></li>

<li class='featured' ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSBR7iXWthLAlf3lG1r5gpXDth5_OdXEJltmXXcSDFM9da_O2BqpIhSWnO8J9IaYyiFNuc_PG5v3scaZ3qooanP_S3RWAFwT6uCBHTH7QAaVApg6eSFeRW4pb21DMlHXmz2yWF1lLom0o/s610/2.jpg' />
<div class='slideshow_video embeded_video'>
<iframe src="http://www.youtube.com/embed/A8sJUwQZ0lo?autoplay=1;wmode=opaque" width="500" height="281" frameborder="0" webkitallowfullscreen allowfullscreen></iframe></div>
<div class="slideshow_caption">
<div class="inner_caption"><h1>Defense of the Ancients</h1>
<div class="featured_caption">As you can see its quite simply to link to whatever content you want.</div></div></div></li>

<li class='featured'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRDzsxOVi211zx3r9NK1BsthkSkS2_w2h6l6qJwuj1sQGtSwNPP3hf1nVqcpmXUczyNSSg_YgeOUHQ3QZ05P3NCof7xA3oGAEMtoybXmOQsZ3QHGgAGP-4DQT-uI-EVCkCwL_mb-5Idjc/s610/3.jpg' />
<div class='slideshow_video embeded_video'>
<iframe src="http://www.youtube.com/embed/YfqIOOKdx6k?autoplay=1;wmode=opaque" width="500" height="281" frameborder="0" webkitallowfullscreen allowfullscreen></iframe></div>
<div class="slideshow_caption">
<div class="inner_caption"><h1>Directly Embed Video</h1></div></div></li>

<li class='featured'><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTvSXKfeTqjJO7r4pue7XotMDEuiNoqh6-e_P0p0EeQfGFo7x1roce4jXb8VlLb0HQdzCn2bcTkEFjTqbahxNs1byzMhkJRyxPB71Kef1G3EGzttRal9JP16PUhWxRsx1rrnlb0T_BKW8/s610/4.jpg' /></a>
<div class="slideshow_caption">
<div class="inner_caption"><h1>Link to a page. In this particular case its the Portfolio 4 Column page! </h1>
<div class="featured_caption">This time we have chosen to link to an external page, namely the portfolio page. Want to see it? Click the image! </div></div></div></li>

<li class='featured'><a href='http://vimeo.com/7809605'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhddUdFPEgb1UnPsYmuBWWiE_xYlZgVz0QXoISwdzOqAWtb_5iPBXRVHd_6fNGrVRZQZxQmfInPxp9AWGmNoZ0x8NIXlxyJ7hWkmJepryfcObbETQI3j13KNhdzD1X2auLU6GTniEWmLIw/s610/5.jpg' /></a>
<div class="slideshow_caption">
<div class="inner_caption"><h1>Its a Lightbox link, once again</h1>
<div class="featured_caption">This one is a lightbox link to a video site. As you can see you can link to almost everything you can imagine ;)</div></div></div></li>
</ul>
</div>
</div>

Chú ý: Các bạn thay link ảnh và nội dung theo ý muốn của bạn nhé.

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

Bài viết được viết bởi: bittuot.blogspot.com - Bít Tuốt Blogspot