• KIẾN THỨC SEO
  • BLOG SERIER
  • SEO BLOGSPOT
  • TEMPLATE BLOGSPOT
  • ICON FACEBOOK
MENU

Hoc Tieng Trung Khamphablog.com

Menu
  • Home
  • #Web Tools
    • Giải Mã
    • Mã Hóa
    • Chuyển đổi code
    • Lấy mã màu
  • Liên Hệ
  • #Dịch Vụ
    • Rip Blogspot
    • Rip Wordpress
  • Site map
  • #Giới Thiệu
    • Admin
    • Blog
  • Liên Kết
  • Hỏi Đáp
Trang Chủ Blog Series Popular Posts Slider Bài Viết [Tips] - Slider bài viết phổ biến nằm ngang cho Blogspot

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

Đỗ Mạnh Hồng May 17, 2015 Blog Series Popular Posts Slider Bài Viết
Đỗ Mạnh Hồng
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.
Slider bài viết phổ biến chạy ngang cho blogspot

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/AVvXsEgoH4q44VzJOTxt60zcUbEqaIbdjCGjnGcM2HLElQKZlKh37LLaf9macHeL-yJKAuayzWhTcqGkwDLIzh7CDwTcRCKPipyD1nnwG5m_BO1neH_27NtPyhApFjzGpEQh6MD-p_FHjV2xX6DH/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/AVvXsEiCARn3i5g8rQ0WXppdYJwWVRxdN-uUUKpEeQQFXqmp2q1k-sb-bQmG_68DskJW5cfngBay16wiyTTArzr5vWslLFppbE5RYDdjOSrSIRkDhTnv7sZP-NVPBaEWYlqeYRPsTn_btQuT4Je2/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA7YVFGT-dSaYQhUKIjc2_QGm_Wc6yjSMrDEqcNyVm2wsZYdpjIwXOPoDFkefVK4kBACaJNABTNiPkd9xBEA72Zxt606HvLWU-bAi3ez93mM0GFDgzrV-PPTYdQ-FdcWtE1fW6MEQTHOss/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/AVvXsEieSz2UcS2cj-gwHiWhxDPs1hu9MZG-m2Clin40dlqRUP8BckMtKpm4lkP7-3luAYp54QS3wdLnFDL4H7ahZTNdTrUd0pooVkVbYah5bvpLLCEWCdGqGd-EqZI5qNIhUYyxRcBN29tk8euo/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. 

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

  • [Tips] - Vô hiệu hóa JS mặc định giúp blogspot load nhanhChào các bạn đôi khi các bạn kiểm tra tốc độ load của blogspot mình với PageSpeed Insights thì thường thấy những js (ja ...
  • 3 in 1 comments blogger, comments google, comments facebook for Blogspot3 in 1 comments cho blogspot là một mẫu comments chuyên nghiệp cho blogspot của bạn, hệ thống comments này được thiết k ...
  • [Tips] - Làm đẹp widget nhãn (label) blogpsotNhãn hay còn gọi là Label trong blogspot là một phần không thể thiếu trong blogpsot nhằm giúp blogspot tăng pagera ...
  • [Tips] - Tự thiết kế blogspot chuẩn W3C/HTML5W3C là từ viết tắt của World Wide Web Consortium, là nhiệm vụ hướng dẫn World Wide Web với đầy đủ các tiềm năng phát tr ...
  • [Tips] - Những thủ thuật blogspot cần phải có cho blogThủ thuật blogspot là gồm những tiện ích giúp làm đẹp cho blogspot và giúp blog trở nên chuyên nghiệp hơn, nhưng cũng t ...
Next
« Prev Post
Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Icon CommentsIcon Comments

:)
:(
=(
^_^
:D
=D
=)D
|o|
@@,
;)
:-bd
:-d
:p
:ng
Đăng Nhập để bình luận chém gió.
Subscribe to: Post Comments (Atom)

Blog Tự Học Seo Online

Blog ra đời dưới sự thành lập của Đỗ Mạnh Hồng với mục đích chia sẻ những kiến thức giúp bạn tự học seo blog online chạy trên nền tản blogspot và website, cùng với đó chúng tôi còn chia sẻ tới các bạn những templates blogspot chuẩn seo, những thủ thuật đơn giản giúp bạn thao tác dễ dàng hơn trong phần quản trị Blogger. Với tiêu chí muốn gởi đến các bạn "SEO TỪ KHÓA LÊN TOP - KHÓ MÀ DỄ". Hãy cũng chúng tôi trao đổi và mong muốn được hỗ trợ các bạn nhiều hơn nữa.


  • Popular

Popular

  • Seo bài viết là gì? Cách seo bán hàng chuẩn
  • Phương pháp xây dựng backlink 4 tầng hiệu quả
  • Cách seo blogspot tốt nhất trong năm 2015
  • [Tips] - Hướng dẫn tích hợp AncPlayer cho Blogspot
  • Cách để bạn bắt đầu với một blog miễn phí

SUBSCRIBE TO OUR NEWSLETTER

Copyright © 2015 Khamphablog.com All Right Reserved Tự học seo blog online cho người mới bắt đầu