Làm slide ảnh cho blog (Accordion Slider )

Nhu cầu dùng slider để trang trí blog của các bạn là rất lớn, đặc biệt với các blog chuyên về tin tức và tranh ảnh. Hôm nay namkna sẽ giới thiệu cho các bạn một dạng slider mới dạng này kết hợp và hỗ triwj các file ảnh, video, Lightbox,....

Demo for Post

- Ảnh minh họa:

☼ Cách tiến hành:

   1- Đăng nhập vào Blog

   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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEgbY9axRuhb1769PQfnaes2sJBqL3vwmrHpr8CSIu2iAAPjgAm3HvGSSx7eK9OUZ69aHKoLthP8KT_HTWqXWyzel4yI8lVVXb_O1XbGygnU65bFtC-Sxmi5XXYOThYk24IeyjaXx1i-01/h120/load-indicator-namkna-blogspot-com.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/AVvXsEhEgbY9axRuhb1769PQfnaes2sJBqL3vwmrHpr8CSIu2iAAPjgAm3HvGSSx7eK9OUZ69aHKoLthP8KT_HTWqXWyzel4yI8lVVXb_O1XbGygnU65bFtC-Sxmi5XXYOThYk24IeyjaXx1i-01/h120/load-indicator-namkna-blogspot-com.gif) center center no-repeat;}
.aviacordion .shadow{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVu2o-rAti_ljMNu_WCxqx1OphMyrM8hSa9hHOGKUI_0kan3HAmAQffmv_Gy9RyGrCmm6_0EkciB2Kg-cwuG-0AuhfOe2P1NPHc0wZayVFXNByyNVYT1QM7HjXqduHEdLTzvR4pNpfLc6b/h120/shadow-namkna-blogspot-com.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/AVvXsEhPwuo8ju_Hwou36aulyOdmCX34D_hUgDa1CFBm4FTbpc-NAGgUuibK-P2VQe0fAFHgZTvMQD4NoH5fZD4r1zC6rJ6JbFUaS_muazy7xwO8g9ICkyNgBVGjwxFv0YoALa9l549JzqQonu4K/h120/video-namkna-blogspot-com.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/AVvXsEjzo1oE6mDPS6W5L2BvVzgSWqdN8cpXNpVvRLmWHC3U31uJVgzyfGohoPPo5Q6_ErSkcTaiEY4Unf8rP1OqbGri1wlMCHzqgqoXukWEGZhz-5hg_G8q2reItkSHeR05EmVWx_zYTNbj3URj/h120/rounded_corners-namkna-blogspot-com.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/AVvXsEgPLd2BXJ0x_iIZy7qjVR9uU5v7sQe9Q22bXHNb3RbIIxWvaYB6adOrRbhDXwZ_Urwsvd8Nl7aR9MY3MHs1GIgDP-XjJpo_-0WBVCvH4v3pJYqlYNx3N5c87ZRlKuCLfnaEln2CK85_RR9f/h120/shadow-featured-namkna-blogspot-com.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/AVvXsEg0n9jXHsMYlWnWYXWx9VkDFzOeXKhVJkVut6aAYDc2WSl4asBcVDpFkPrvuVj25UzY3dz2357nc0-nEtL6veDG8paXZuq3a5ysmjC0SHMoCLTC36I-mAMpzBGaLxa_ycSAwLCaNQevzgaS/h120/rounded_corners_shadow-namkna-blogspot-com.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/AVvXsEiFrhOOCKEyRKucD-E8j_y1FndoME4sIfOqUeS51O0YQ_iRYshyz1huNwDsVYJnWTJcxuvzq55lTuZvy5gyHVMzX7CincHWJgxdlauVRRhQOAO9eyPAgSMJ9te8frI5xYTGElH0ElgnHWCX/h120/magnify-namkna-blogspot-com.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://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/70549761/File-phu/namkna-blogspot-com/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ào chỉ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://namkna.blogspot.com/2011/07/anh-hoat-hinh-kute-chuade-thuong-lam.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGkCDmYUkt1iisHGLHUD2E9UJA4awUmDfLDqf_313zvpiYO-DSXcqAGOu2AaX08QgUhmzHkobt2EmIdKG-X91sVBfHC-s_HzQlEihP7hxHDLWGI4dh4PyLKCx_7yILaOkIr7AMhsJG6Ayo/s1600/anh-hoat-hinh-girl-cute-de-thuong-namkna-blogspot-com-17.jpg' />
<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/AVvXsEgHjWYILf75tSqEGBiaqaV9nGs5ipPRCg1LCMt5ZCGJRN7G73rEK1uJwkdUZo_jub3iFFDrCK9VtQ4iylTPv1IFmTfehHIaFembgPJ-Sx9g83apJSwOFRYSo60WFzo_ATBV-kOnl0SGQtPD/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/embed/1_p1J7DV2tI?autoplay=1;wmode=opaque" width="500" height="281" frameborder="0" webkitallowfullscreen allowfullscreen></iframe>
</div>
<div class="slideshow_caption">
<div class="inner_caption"><h1>Đắng Môi - Phạm Trưởng</h1>
<div class="featured_caption">Video bài hát đắng môi của ca sĩ phạm trưởng.</div></div></div></li>

<li class='featured'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmk1AotgfZgJS7skwsCnp1G6tWUFVlvYfqGGOAIDitBNOh64CdL0XXcYdqHrqAqvSZ8hAudfyU0Ih4WAyKXJAJCPOSPVZYjsASqNNWvHiVn10VvYblYiR9sm1-_Zh70qoYPcfx2Rbs-reG/s1600/hoat-hinh-kute-namkna-blogspot-com.jpg' />
<div class='slideshow_video embeded_video'>
<iframe src="http://www.youtube.com/embed/E9cF3vZDQmE?autoplay=1;wmode=opaque" width="500" height="281" frameborder="0" webkitallowfullscreen allowfullscreen></iframe>
</div>
<div class="slideshow_caption">
<div class="inner_caption"><h1>Hoàng hôn khóc</h1></div></div></li>

<li class='featured'><a href='http://namkna.blogspot.com/2011/02/qua-tang-cuoc-song_7172.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI26ZY3MgeNIO1haXuvTgLj3swp-o3lfXFf3yTSgfeIwgWSIKd9SfE4EGFXPxxNspzopHMAiI0LMVQWG25AaLZ-9BupE2MpRxjw9AfSdvSRBLwGjGGDv6lb2RuyMir-MUFgG065SDP3bvI/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/AVvXsEiQxlkao5eiGEV_P5CudfQHPiM9kWRv6lwt9fFbPfjOrtIbw5sazdkI-4PGTytrdkRYASnKtKPAxvFn30QuOqnJNAwvLbmVgOrHLCP6S0N2h_f0w1o9-GearGnM7fcSKuUyL5aCeNuwmD91/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ào chỉnh sửa (Edit) và dán đoạn code bên dưới vào: 

 Chúc thành công!