[Tips] - Slider bài viết phổ biến nằm ngang cho Blogspot

Bài viết phổ biến hay còn gọi là Popular Posts là bài viết được xem nhiều nhất trên blogspot của bạn, thông thường thì bài viết phổ biến này nằm ở widget sidebar hoặc là footer. Hôm nay Khám Phá Blog hướng dẫn các bạn tạo một dạng bài viết phổ biến mới là dạng sider chạy ngang cho blog trông rất đẹp mắt.

Cách thêm slider bài viết phổ biến vào blogspot

1. Thêm Css

Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML tìm đến ]]></ b:skin> thêm đoạn code sau trên nó

#gallery {position: relative; margin: 0 35px 20px; width: 590 px, chiều cao: 126 px; 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiAnrym0Lc4s1-DsheRIirrk2cIKeozbMtk2oxKP5HEeLrHKN7iNesaqunAH5ShzMYack281Etz59kJXCbSBjsTIZ7d5nkCjLjl3-8ysT7FelfYpUBi8ojukUZB0KqUgjUTzKo-QvBNDGf/s1600/bg-slider.png) trung tâm phía dưới không lặp lại; 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 {lọc: alpha (opacity = 50); - MOZ-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5}

2. Thêm Script

Tiếp tục tìm đến thẻ </head> và thêm đoạn code sau trên thẻ </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/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: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZfeLDYPAoCJ15qroA3ICM3EXfVyf6Rp_atzJdrnxc5gNzDWNZwzzDn7kIgEj6rj0J8WLDti7-MTrOJpPOlnI2jbJFYR8Urz6byAenBmkcqMNQdV6PqY2V7h3pEbVvxkAR0_a5w6zl-YGw/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOV5HF3yk8m1IJQlmpRPinw_VeJQhzxCp7jW89ayGuN-Mj54SSsVyoZBOavj-qHqgQxfGahtHaqWghI7bvWoohDO-uCu5SjwWNAcyDfUTfDFOR9kQiZgORxHXFLlgIHRWrYhiF-jnEdYsR/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

3. Chọn vị trí đặt widget

Đến đây thì các bạn có thể chèn code vào chổ nào muốn hiển thị tùy ý, tuy nhiên bài viết này mình hướng dẫn các bạn chèn vào top ngay trên bài viết của blogspot.
Tìm đến đoạn code 

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

Hoặc

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

Ngay bên dưới nó các bạn thêm đoạn code sau

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4VnnQAo35O5Y-38e9qGmTfW5lZGztlK-vJKd9WHrzypXpCYhrkUCx9oJUUvIy486xtk7ojMTFtcC49Gt3yOoxRr3OKMr5vZ7QWE_l2cSwYrbLqnRa142F7dO-SmirBoiYg3I8iLRPly3j/s1600/no-image.PNG'/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div></div></b:if>
</b:includable>
</b:widget>

Sau khi thêm xong lưu mẫu lại và kiểm tra thành quả vừa làm được. Chúc các bạn thành công. 

Kho Template Blogspot Responsive 2016

http://share123blog.blogspot.com

Free download responsive premium blogger template

Bài Viết Cùng Chủ Đề