Thủ thuật tạo slide ảnh Accordion Slider cho Blogger
Lưu ý: Nếu bạn gặp khó khăn với cách làm của bài viết "Thủ thuật tạo slide ảnh Accordion Slider cho Blogger" dưới đây hoặc mọi vấn đề khác, hãy gửi câu hỏi cho chúng tôi - TẠI ĐÂY - Đội ngũ lập trình sẽ trả lời và hỗ trợ bạn nhiệt tình sau 3 phút, 24/24h. Ok, giờ chúng ta bắt đầu
1-
1- Đăng nhập vào Blogger / Blogspot
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;}X4- 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/AVvXsEh7DvFuURR48Q0Nh8RXQiu3cjjx7ZY9rSYGnQcTfW_WcTSGtkIyT1hLdq4cD449NXdNylbWqMOVUCug7kCmCpCzr-JAoPl2oFj-LA5Tz6ff1XkNOAoGop3i4dlA_78xb0RIkSriJGQXcPJj/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/AVvXsEg6_LHXFTCA8umYFqJv_25T-yYealYDfg9aQrclUmunGA_u5glXPf3BML0UPvmmtLsW3fwpyeGyY7gcgaOSPcbF7ZVkQe9pN7m7b5fJ4e6LLjg949Y-jyR4Q3iocGU2wv8QrBVGC9CwtcjM/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/AVvXsEj8UFyGtrTb47-cGkxLo4WItgORvHpyboQFCKKnDSyZTpVYEyCX_LpucSdwCTWL2iV_Ow8adK_MaokzQYOJnww8AcL7O_aR8i_bZlSDLCYvfLLE-DyEgkqV2yPe5pFKi33tu7khQdaXhMEu/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/AVvXsEhMo6D1JCqmWiDfbCaM4ckTw1SMv5cxUktZ_CD0AbatJc82ZQrCwEngxYMyVqHsNPvakiv42flMTIeWM7M0rtts3qSrSmuMSL0TwEgFfxnRw1txfwk6mcslaXaTbX9xfZDDdX3-2WWHtwXb/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:
Ban quản trị:
Bạn đang đọc bài viết "Thủ thuật tạo slide ảnh Accordion Slider cho Blogger". Nếu bạn đang gặp khó khăn với cách làm trên hoặc mọi vấn đề khác, hãy gửi câu hỏi cho chúng tôi - TẠI ĐÂY - Đội ngũ lập trình sẽ trả lời bạn sau 3 phút, 24/24h (Nếu bị bật ra quảng cáo, vui lòng nhấn Bỏ Qua Quảng Cáo)
![[Thủ thuật Blog] - Cách tối ưu hóa blogspot](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiErImcx5m2kopnWORXW8q38c2MoXHLAFmBxbeiJy2XdYvb-SvKOj2idwR1xBxtJbKicIQqTfVA3ZQYtF1zVS8nEC5o5nr5BcnUfLUuu3ei4rdHr-dOAQ9IVsOYNykXeICIUFVCVtzWoQI4/s72-c/C%C3%A1ch+t%E1%BB%91i+%C6%B0u+h%C3%B3a+blogspot.jpg)
