Loading data........
Tin nhanh :
Xem Tivi Online

Tổng hợp các kênh giải trí (Đang cập nhật chức năng..)

New Update

Truyền hình SCTV

SCTV14

SCTV15

SCTV16

SCTV17

SCTV18 HD

Vietnam Channels

VTV1

VTV2

VTV3

VTV4

VTV6

VTV9

VTC Online

VTC1

VTC2

VTC3

VTC4

VTC5

VTC6

VTC Online

VTC7

VTC8

VTC9

VTC10

VTC11

VTC12

Truyền hình tp HCM

HTV1

HTV2

HTV3

HTV4

HTV7

HTV9

Radio Channels

VOV1

VOV2

VOV3

VOV4

VOV5

VOV GT-HN

Home » » Cách Add Auto Side cho Blogger

Cách Add Auto Side cho Blogger

auto_slide_show

Hôm nay mình sẽ hướng dẫn các bạn thêm hiệu ứng Auto Slideshow cho Blogger. Ngoài việc trang trí cho Blog nó còn giúp blog của bạn tăng được lượng độc giả đáng kể. Tiện ích này sẽ hiển thị các bài viết được nhiều người xem nhất trên blog của bạn.

Các bạn có thể xem Demo ngay tại blog của mình hoặc xem Demo tại đây:

demo_button

 

Nào cùng bắt tay vào thử nghiệm nhé Smile.

1. Đăng nhập vào Blogger –> Chọn chế độ Design Html và Click vào Expand Widget Template (Chế độ Design mở rộng)

image

Lưu ý: Nhớ Backup Template của bạn trước nhé. (vì nhỡ như làm sai thì có thể phục hổi lại đc – cẩn tắc vô áy náy nhé Open-mouthed smile)

 

2. Nhấn Ctr + F và tìm đoạn code bên dưới

]]></b:skin>

Sau đó thêm đoạn code này vào bên trên đoạn vừa tìm

#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(http://2.bp.blogspot.com/-_Srvna_zg0M/T393_LXqDLI/AAAAAAAABrQ/_t2GmPexCHo/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}

Thông số chữ bôi màu đỏ các bạn có thể tùy chỉnh độ rộng hoặc chiều cao cho phù hợp với Blog của bạn

Tiếp theo tìm đoạn code

</head>

Sau đó chèn đoạn code này vào bên trên đoạn vừa tìm được

<script src='http://sites.google.com/site/love4all1080/Home/auto-slider.js' type='text/javascript'/>
<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://2.bp.blogspot.com/-0Iss3Wjr36Q/T393U65TcKI/AAAAAAAABq4/K_uzwyuNzrE/s1600/prev.png", -40, 36], rightnav: ["http://1.bp.blogspot.com/-DtspeRHclnQ/T393WdyB8EI/AAAAAAAABrA/TKHickb2iI8/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

 

Tiếp theo tìm đoạn code:

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

Nếu blog của bạn không có thì tìm đoạn

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

Và đặt đoạn code này vào bên dưới đoạn bạn vừa tìm được

 

<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
  <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' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
        <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://2.bp.blogspot.com/-mRxY2oEkLJc/T393wpt0z_I/AAAAAAAABrI/4blMjDaSOUY/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div>

</b:if>
</b:includable>
</b:widget>

Để slide hiện cả ngoài trang chủ cũng như trang con, bạn có thể xóa dòng màu xanh nhé.

Và cuối cùng là Save Template của bạn lại và xem kết quả Smile

Good luck.

Like và chia sẻ với bạn bè :

0 nhận xét:

Speak up your mind

Tell us what you're thinking... !

 
Proudly powered by Blogger
Copyright © 2009-. The Color Of Life - All Rights Reserved