Featured Posts Widget chuyển động với Css và jQuery.

Hôm nay mình sẽ giới thiệu với các bạn tiện ích FeaturedPosts chuyển động xoay vòng sử dụng với Css và jQuery .Chắc chắn rằng với thủ thuật này thì nhiều bạn sẽ rất thích nó đấy.

XEM DEMO

Bây giờ cùng thực hiện nào các bạn!

Các bước thực hiện như sau :

Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML

Bước 2:Bấm CTR+F tìm đoạn mã sau :

<b:section class='main' id='main' showaddelement='no'>

Bạn thay no thành yes sẽ thành :

<b:section class='main' id='main' showaddelement='yes'>

Bước 3: Tạo 1 tiện ích HTML mới đặt trước Bài đăng trên Blog như hình sau :

Vào chỉnh sửa  Tiện ích HTML/JavaScript  vừa tạo dán đoạn code sau đây vào  :

<style scoped="" type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8WfaR7xKYTCWY6mjO87K1QWI6fcbNBk-bGEMZpOu0di6Wihl0PoNARtprNvU2EEnVj0YcciyCdk2-ZFEmhmZN1Z9J3HphzfsSlh_MEWvkO0o2my97LJ5C1ivI8LZGql-cYumoPPWZeQ8/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Georgia,Times,"Times New Roman";left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin:5px 0 0}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B4Ymog6fM1ZzMjh4QTRrV0tuQXM" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://chinhtrucblog.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

Thay thế http://chinhtrucblog.blogspot.com thành địa chỉ blog của bạn

Nếu Blog bạn đã có Jquery rồi thì xóa đoạn code này đi để tránh xung đột

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

Bước 4: Cũng trong Tiện ích HTML/JavaScript  vừa tạo bạn làm theo hình sau để xác định ID HTML của tiện ích sẽ có dạng như sau HTMLxx.Trong bài viết này thì ID của mình là HTML1.

Xác định ID của bạn sau đó vào  Mẫu > Chỉnh sửa HTML(mỏ rộng tiện ích) > Tìm kiếm HTML1 (ID Của bạn HTMLxx)

-Thêm <b:if cond='data:blog.url == data:blog.homepageUrl'>  vào sau 

<b:widget id='HTML1' locked='false' title='' type='HTML'>

<b:includable id='main'> 
-Và </b:if> vào sau <b:include name='quickedit'/>

Sau khi thêm vào sẽ có dạng như sau :

<b:widget id='HTML1' 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>

- Trong đó những dòng tô đậm màu vàng là những code được thêm vào.  

- HTML1 là ID tiện ích mà bạn đã tìm

- Như vậy là thủ thuật đã xong .Lưu templete lại.
- Có gì thắc mắc các bạn cứ để lại comment bên dưới mình sẽ giải đáp.

Blog mkr-site

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