Slideshow Recent Posts - Responsive

Bài viết mới thường được đặt trên trang chủ với nhiều dạng khác nhau và thường được các blogger hiển thiện dưới dạng lideshow với các hiệu ứng làm cho blog thêm linh động hơn. Cũng thủ thuật tương tự như vậy hôm nay mình sẽ cung cấp cho bạn một tiện ích Slideshow bài viết mới của tác giả của blog MKR. Tiện ích hiển thị một cách nổi bật và hiệu ứng trượt tự động một cách mềm mại kèm theo trích đoạn và tiêu đề của bài viết. Trong slideshow này tác giả của thủ thuật trên đã kết hợp nó với các nguồn cấp dữ liệu RSS trên blogger để có thể hiển thị các bài viết mới nhất.Hơn nữa còn có ưu điểm hiển thị tốt trên mọi kích cỡ màn hình máy tính và các thiết bị di động (responsive). Và để cài đặt tiện ích thú vị sau vào blog bạn hãy làm theo các bước hướng dẫn sau.

Demo

Hiển thị Thêm Tiện Ích phía trên bài viết

Nếu blog của bạn không hiển thị Thêm Tiện Ích nằm phía trên bài viết bạn hãy thực hiện các bước sau:
Bước 1: Vào template sau đó tìm đoạn code <b:section class='main' id='main' showaddelement='no'> sau đó thay no thành yes
Bước 2: Lưu lại template

Thêm tiện ích Slideshow Bài Viết Mới Nhất

Bước 1: Vào blogger» Bố cục » Thêm Tiện Ích (nằm phía trên bài viết, các bước trên đã giúp ta hiển thị phần này) » Thêm widget HTML/Javascript
Bước 2: Sử dụng đoạn code bên dưới

<style scoped="" type="text/css">
.ei-slider{position:relative;width:100%;max-width:1000px;height:250px;margin:0 auto 35px;padding:0;background-color:white}
.ei-slider-loading{width:100%;height:100%;z-index:997;position:absolute;top:0;left:0;background-color:white;text-indent:-9999px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpRVKrmkgqK_yN1sZMiFaM3GF5xDFrkfzgDoiZ3Un-p6BeoiZlf6_NE-wuK9RGODYIDo9qO8iI3yHXxuo4EqfOTUhqHqkuq5DtLxP_qWO_J4VZ_SYSojO9kXRDRQNb_KeJRIBFqqtqU3w/s1600/loading.gif);background-position:50% 50%;background-repeat:no-repeat}
.ei-slider-large{height:100%;position:relative;overflow:hidden;margin:0 0 10px;padding:0;border:5px solid #9E0505;border-radius:2px}
.ei-slider-large li{position:absolute;top:0;left:0;overflow:hidden;height:100%;width:100%;list-style:none}
.ei-slider-large li img{width:100%;border:0;padding:0}
.ei-title{position:absolute;right:8%;left:8%;bottom:20%;color:#fff;opacity:0.8}
.ei-title p{text-align:left}
.ei-title h2{font-family:Georgia,Times,"Times New Roman";text-align:right;margin-left:auto;font-size:18px;line-height:20px;color:#b5b5b5;max-width:80%;text-transform:capitalize;background:#000;padding:5px}
.ei-title h2 a{color:white}
.ei-title h2 a:hover{text-decoration:none;color:#9E0505}
.ei-title p{font-family:Verdana,Geneva,sans-serif;margin-left:auto;font-size:11px;line-height:15px;width:85%;clear:both;background:#000;padding:5px 10px;position:relative;left:-5%}
.ei-slider-thumbs{padding:0 0;height:13px;margin:0 auto;width:100%;position:relative}
.ei-slider-thumbs li{position:relative;float:left;height:100%;width:20%;list-style:none}
.ei-slider-thumbs li.ei-slider-element{top:0;left:0;position:absolute;height:100%;z-index:10;text-indent:-9000px;background:#9E0505}
.ei-slider-thumbs li a{display:block;text-indent:-9000px;background:#666;width:100%;height:100%;cursor:pointer;-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);box-shadow:0 1px 1px 0 rgba(0,0,0,0.3),0px 1px 0 1px rgba(0,0,0,0.5);-webkit-transition:background 0.2s ease;-moz-transition:background 0.2s ease;-o-transition:background 0.2s ease;-ms-transition:background 0.2s ease;transition:background 0.2s ease}
.ei-slider-thumbs li a:hover{background-color:#f0f0f0}
.ei-slider-thumbs li img{position:absolute;bottom:50px;opacity:0;z-index:999;width:100%;padding:0;background-color:white;border-radius:2px 2px 0 0;border:0;max-width:100%;height:60px;max-height:70px;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-o-transition:all 0.4s ease;-ms-transition:all 0.4s ease;transition:all 0.4s ease;-webkit-box-reflect:below 0 -webkit-gradient( linear,left top,left bottom,from(transparent),color-stop(50%,transparent),to(rgba(255,255,255,0.3)) );-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"}
.ei-slider-thumbs li:hover img{opacity:1;bottom:13px;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}
@media only screen and (max-width:479px){
  .ei-slider{height:200px}
  .ei-title{bottom:5%}
  .ei-title h2{font-size:14px;line-height:17px}
}
</style>
<div id="autoelastic"></div>
<script src="http://trollvlhcv.googlecode.com/svn/trunk/demo/autoelastic.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
AutoElasticSlideshow({
blogURL:"http://www.trollvl.com",
MaxPost:5,
idcontaint:"#autoelastic",
ImageSize:400,
Summary:100,
animation:'center',
speed:800,
easing:'',
titlesFactor:0.60,
titlespeed:800,
titleeasing:'',
thumbMaxWidth:150,
Interval:3000,
autoplay:true,
pBlank:'http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif',
tagName:false
});
});
//]]>
</script>

1. Thay thế http://www.trollvl.com thành link blog của bạn
2. Bạn nên download file autoelastic.min.js để đề phòng

Bước 3: Lưu lại

Cài đặt điều kiện hiển thị cho tiện ích

Khi bạn đã hoàn thành các bước trên thì tiện ích này luôn hoạt động tại tất cả các trang trên blog. Nhưng nếu muốn bạn có thể cài đặt cho chỉ hiển thị tại một trang hoặc các trang nhất định trên blog. Ví dụ mình muốn widget chỉ hiển thị tại trang chủ thì ta làm như sau
Bước 1: Xác định ID của widget ta vừa tạo bằng cách click vào biểu tượng cà-lê (chỉnh sửa) sau đó hiện ra cửa sổ mới, ví dụ như hình dưới ta nhận biết được ID là HTML6

Bước 2: Vào template và tìm kiếm với từ khóa HTML6 ta được đoạn code tương tự và đoạn code được bôi màu vàng ta thêm vào chính là điều kiện hiển thị của widget

<b:widget id='HTML6' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Bạn có thể xem thêm các điều kiện ẩn/hiện của widget trên blog tại đây

Bước 3: Lưu lại template

Chúc bạn luôn thành công và blog ngày một hoàn thiện hơn. Đừng quên comments để ủng hộ và góp ý cho TrollVL nha!

Nguồn MKR