Chắc mọi người đều không xa lạ với thủ thuật blogger hiệu ứng trình diễn ảnh chuyển động sử dụng jQuery. Hôm nay mình sẽ hướng dẫn áp dụng hiệu ứng này vào widget PopularPosts để trình diễn những bài đăng phổ biến dạng kiểu slider, widget PopularPosts này nằm ở phía trên của bài đăng.
 PopularPosts - Thủ thuật bài đăng phổ biến dạng ảnh chuyển động Blogger

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-Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#gallery{-moz-box-shadow:0 2px 7px #555;-webkit-box-shadow:0 2px 7px #555;box-shadow:0px 2px 7px #555;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;position:relative;margin:0 35px 20px;width:540px;height:126px;background:#F4F4F4}
#gallery .belt{position:absolute;top:0;left:0}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(http://2.bp.blogspot.com/-ywwbL43AFfs/Ua1HFLK-U8I/AAAAAAAADak/-qK6MJDPqJM/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
Và thêm đoạn mã dưới đây vào trước thẻ </head>
<script src='https://thietkewebplus.googlecode.com/files/jquery.min.js' type='text/javascript'></script>
<script src='http://thietkewebplus.googlecode.com/files/auto-slider-0406.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["http://3.bp.blogspot.com/-IqwVWrEnyhQ/Ua1HQXQNaZI/AAAAAAAADas/rwJJNE6mJxc/s1600/prev.png", -40, 36], rightnav: ["http://4.bp.blogspot.com/-CNsqgJHy4dc/T31erL36BbI/AAAAAAAAA8c/KJE9xbDuwA8/s1600/next-namkna-blogspot.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>
5- Tìm thẻ

<b:section class='main' id='main' showaddelement='yes'/>
hoặc
<b:section class='main' id='main' showaddelement='no'/>
và thêm vào sau nó đoạn mã dưới đây:
<b:widget id='PopularPosts2' locked='false' title='' type='PopularPosts'>
 <b:includable id='main'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' rel='bookmark' expr:title='data:post.title'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='http://4.bp.blogspot.com/--248VzEzcbU/Ua1HjB9eH2I/AAAAAAAADa0/y9cGi_B4xWk/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div>
 </b:includable>
</b:widget>
6- Chuyển qua tab Phần tử trang và chọn chỉnh sửa widget PopularPost2 vừa tạo và ở Bước 3. Phần Hiển thị chọn hình ảnh thu nhỏHiển thị tối đa 10 bài đăng.
PopularPosts - Thủ thuật bài đăng phổ biến dạng ảnh chuyển động Blogger
7- Bấm Lưu Mẫu   và xem thành quả.
Một lần nữa mình phải nhắc lại là để ảnh bài đăng xuất hiện trên widget PopularPosts thì phải có ít nhất 1 ảnh được upload thông qua công cụ Chèn hình ảnh của Blogger, hoặc lấy địa chỉ ảnh từ Picasa và địa chỉ ảnh phải có s1600, s800...
Đây là 1 trong số hiếm hoi những thủ thuật về Blogger mà mình chủ động "đầu tư" thêm vào CSS, thông thường phần này mình để các bạn tự thiết kế theo ý thích.

Nhận xét&Bình luận

Kết nối&Chia sẻ:

Designed by www.kenhshare.net | Copyright © 2010 Template Design by Mr.Thành Công