Thủ thuật tạo slide ảnh Accordion Slider cho Blogger

Xu hướng sử dụng slider để trang trí blogger / website là rất lớn, đặc biệt với các blogchuyên về tin tức và tranh ảnh. Hôm nay sẽ giới thiệu cho các bạn một dạng thủ thuật blogger slider mới dạng này kết hợp và hỗ trợ các file ảnh, video, Lightbox,....

1-
1- Đăng nhập vào Blogger / Blogspot

2- Vào thiết kế (Mẫu)

3- Chọn Chỉnh sửa HTML

4- 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(http://4.bp.blogspot.com/-NZUeepUUS2M/Uar5cRVr-XI/AAAAAAAADTM/O44JPk4TpoI/s1600/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(http://4.bp.blogspot.com/-NZUeepUUS2M/Uar5cRVr-XI/AAAAAAAADTM/O44JPk4TpoI/s1600/loading.gif) center center no-repeat;}
.aviacordion .shadow{background: url(http://1.bp.blogspot.com/-mUoMCBbIyPE/Uar5snaYZjI/AAAAAAAADTU/HmrVEJbnPMM/s1600/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(http://3.bp.blogspot.com/-HvOiUawpVr0/Uar502cEM3I/AAAAAAAADTc/O2jcjKd2LM4/s1600/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(http://4.bp.blogspot.com/-NTIy-lCFA0Q/Uar58bRvesI/AAAAAAAADTk/PTOVhqsphPQ/s1600/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(http://2.bp.blogspot.com/-7fSiPgVYD4Q/Uar6FlEtCGI/AAAAAAAADTs/iGe2NY5gCvw/s1600/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(http://3.bp.blogspot.com/-HJ4e5WXRic4/Uar6NwOQvKI/AAAAAAAADT0/5YW40GrRHN0/s1600/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(http://4.bp.blogspot.com/-9jwMSukx1Po/Uar6Ts6NjHI/AAAAAAAADT8/DNCK7PBONvk/s1600/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;}

4- Tìm thẻ sau:

<div id='content-wrapper'>

Và dán đoạn code bên dưới vào trước thẻ vừa tìm được.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://thietkewebplus.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://thietkewebplus.googlecode.com/files/accordion.js' type='text/javascript'/>
<b:section id='slider' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML96' locked='true' title='Slider Photo' type='HTML'/>
</b:section>
</b:if>

• Bạn hãy tải file accordion.js về và Upload lên hot riêng của bạn để dùng lâu dài. Có thể dùng các host miễn phí chất lượng cao như google code hoặc dropbox. 
• Nếu trong blog của bạn đã có file JQuery.js rồi thì bạn hãy xóa phần màu xanh đi.

5- Bấm Lưu Mẫu  (save template) lại.

6- Quay lại Phần tử Trang (Bố cục) bạn sẽ thấy 1 Wiget mới với tên Slider Photo bạn bấm vàochỉnh sửa (Edit) 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='http://www.thietkeblogger.net/'><img src='http://www.thietkeblogger.net/' />
<div class="slideshow_caption">
<div class="inner_caption">
<h1>Ảnh hoạt hình kute chưa?(dễ thương lắm lắm luôn!) !!</h1>
<div class="featured_caption">Tuyển tập rất nhiều các bức ảnh hoạt hình cực đẹp.</div></div></div></a></li>
<li class='featured' ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv28XIg19JGSZwwAqRI2Q36PCCOXo_ip2_cZSmRYColqsbgzXAW3XwvsuqelJLp-zyTwwbassSmQ6geyWtT_XL9jY7Fk9f83CHDE_FIemrcWXt_lTwOg1hgqqJlR6lfkI97c0mbrPsimZP/s1600/anh-hoat-hinh-girl-cute-de-thuong-namkna-blogspot-com-40.jpg' />
<div class='slideshow_video embeded_video'>
<iframe src="http://www.youtube.com/watch?v=9bZkp7q19f0?autoplay=1;wmode=opaque" width="500" height="281" frameborder="0" webkitallowfullscreen allowfullscreen></iframe>
</div>
<div class="slideshow_caption">
<div class="inner_caption"><h1>Gangnam Style</h1>
<div class="featured_caption">Gangnam Style</div></div></div></li>
<li class='featured'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5KshNl3V57GGHAbjWEkAk8E55J6yyOpEbMn_8DtkKuV_piFK9d784_by7SyyW1XtE3yVtnpKWCMe2dFDQ_pwyxnJ5hSsoNB-G-pVLOxLxK0o6b_bqis3xNa3GbEs-WSn3dVvzddWQSL8e/s1600/hoat-hinh-kute-namkna-blogspot-com.jpg' />
<div class='slideshow_video embeded_video'>
<iframe src="http://www.youtube.com/watch?v=9bZkp7q19f0?autoplay=1;wmode=opaque" width="500" height="281" frameborder="0" webkitallowfullscreen allowfullscreen></iframe>
</div>
<div class="slideshow_caption">
<div class="inner_caption"><h1>Gangnam Style</h1></div></div></li>
<li class='featured'><a href='http://www.thietkewebplus.net'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidG5suo_2Ot0kWuUYXq0Vk5tbgSPGAF3EbEyPlKLn9-Bgjgg_Lc6xY_9TE7-8vjc0XQMtgjLU_0mGUx-YLzLpJp5lfkK6E7ijmbrRy-t8MRSvUlDCSY6dJe6P52n_cCAlo3eFJf2pLSf0y/s1600/anh-hoat-hinh-girl-cute-de-thuong-namkna-blogspot-com-14.jpg' /></a>
<div class="slideshow_caption">
<div class="inner_caption"><h1>Tuyển tập Quà tặng cuộc sống! </h1>
<div class="featured_caption">Các bộ phim thấm đẫm tình người, giàu lòng nhân ái vị tha,...! </div></div></div></li>
<li class='featured'><a href='http://vimeo.com/5407991'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzWO_KUX2FkZNdWKzg5iUFz6RNxttrz_5NDN3aYh1K7mLwQ-gqiOAUXN5hThP-U7txeyd9in0DNBOMjxbJLJjOcxXsuSKt6ygWu7QHv1ausnHcIREJnzjbRvsG4c0nbzMzmvXw0DHzoSrL/s1600/namkna-blogspot-com-hoat-hinh-3d.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ỉnh sửa lại các thông tin cho phù hợp

7- Bấm Lưu Mẫu  (save template) lại.

8- Quay lại Phần tử Trang (Bố cục) bạn sẽ thấy 1 Wiget mới với tên Slider Photo bạn bấm vàochỉnh sửa (Edit) và dán đoạn code bên dưới vào: