Thư viện

Trải nghiệm

Thứ Hai, tháng 11 17, 2014

[Tips] - Recent Post / Bài viết mới nhất dạng Slide tự trượt cho Blogspot Blogger V1

Hướng dẫn thủ thuật blog Recent Post / Bài viết mới nhất dạng Slide tự trượt cho Blogspot Blogger V1.Cách tạo thủ thuật bài viết mới nhất cho blogspot!

Chia sẻ:
[Tips] - Recent Post / Bài viết mới nhất dạng Slide tự trượt cho Blogspot Blogger V1
[Tips] - Recent Post / Bài viết mới nhất dạng Slide tự trượt cho Blogspot Blogger V1 - Tạo sự chuyên nghiệp cho website của bạn!

Hôm Terocket sẽ hướng dẫn các bạn nhà tiếp tục một thủ thuật blog cực kỳ nâng cao, có tên là Recent Post / Bài viết mới nhất dạng Slide tự trượt cho Blogspot Blogger. Trước đây, Terocket đã giới thiệu rất nhiều thủ thuật liên quan đến bài viết mới nhất / Recent Post dành cho Blogger Blogspot rồi, các bạn muốn theo dõi, hãy kéo xuống dưới cùng nhau.

Live Demo

Quay trở lại với thủ thuật blog Recent Post / Bài viết mới nhất dạng Slide tự trượt cho Blogspot Blogger này, với thủ thuật này, bạn sẽ thấy một tiện ích xuất hiện trên blog của mình cực kỳ hiện đại, dạng mờ mờ metro phẳng rất chuyên nghiệp, đặc biệt nó còn tự động trượt xuống, nhìn rất sướng mắt nữa đấy. Trông thật bí ẩn! Và không nói nhiều nữa, chúng ta sẽ đi vào thực hiện thủ thuật này ngay lập tức.

Để thực hiện widget này, các bạn chỉ cần tạo 1 Widget HTML/Javascript và chèn đoạn mã code dưới đây vào và lưu lại là xong.

Trước tiên bạn vào Blog Title → Layout → Add Widget → HTML/JavaScript và copy đoạn mã code dưới đây vào, sau đó Lưu lại nhé!

<div style="width: 350px;"><center>
<div id="headerbox">Featured Posts</div>
<div id="featuredpostside"></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/0B-0uHUanipfMdVVqb0R2OEFxdkU" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://www.terocket.com",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'/>
<style scoped="" type="text/css">
/*
Made by Terocket.com with lot of hardwork please keep the comment intact
*/
ul.abt-sidebar-slider * {
    -moz-box-sizing: border-box;
}
ul.abt-sidebar-slider {
    font: 11px Verdana,Geneva,sans-serif;
}
ul.abt-sidebar-slider, ul.abt-sidebar-slider li {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
}
ul.abt-sidebar-slider {
    height: 500px;
    width: 100%;
}
ul.abt-sidebar-slider li {
    display: none;
    float: left;
    height: 24.5%;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 100%;
}
ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) {
    display: block;
}
ul.abt-sidebar-slider li:nth-child(2) {
    left: 0;
    top: 50%;
}
ul.abt-sidebar-slider img {
    border: 0 none;
    height: 100%;
    width: 100%;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li {
    transition: all 0.4s ease-in-out 0s;
}
ul.abt-sidebar-slider li:nth-child(4) {
    left: 0;
    top: 75%;
    width: 100%;
}
ul.abt-sidebar-slider li:nth-child(3) {
    left: 0;
    top: 25%;
}
ul.abt-sidebar-slider .overlayx {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img {
    border: 4px solid #2E8DCE;
    border-radius: 3px 3px 3px 3px;
}
ul.abt-sidebar-slider .overlayx:hover {
    opacity: 0.1;
}
ul.abt-sidebar-slider h4 {
    color: white;
    font-family: Oswald;
    font-size: 25px;
    font-weight: 100;
    line-height: 1.5em;
    margin: 0;
    padding: 0 10px;
    position: absolute;
    top: 25px;
    width: 100%;
    z-index: 2;
}
ul.abt-sidebar-slider .label_text {
    bottom: 10px;
    color: white;
    font-size: 90%;
    left: 10px;
    position: absolute;
    z-index: 2;
}
ul.abt-sidebar-slider li:nth-child(2) .autname, ul.abt-sidebar-slider li:nth-child(3) .autname {
    display: none;
}
.buttons {
    margin: 5px 0 0;
}
.buttons a {
    display: inline-block;
    height: 25px;
    position: relative;
    text-indent: -9999px;
    width: 15px;
}
.buttons a:before {
    border-color: transparent #535353 transparent transparent;
    border-style: solid;
    border-width: 8px 7px;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -10px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 0;
}
.buttons a.nextx:before {
    border-color: transparent transparent transparent #535353;
    margin-left: -3px;
}
.date {
    background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84);
    bottom: 93px;
    padding: 8px;
    position: relative;
    right: 6px;
}
#headerbox {
    background: #8FB93D;
    font-family: Oswald;
    padding: 4px;
}
</style>
</center></div>

Chú ý: Hãy thay http://www.terocket.com thành địa chỉ website bạn nha!

Vậy là đã xong một thủ thuật cực kỳ thú vị rồi nhé, nếu bạn nào đã làm được rồi, hãy share đến bạn bè nha, còn chưa làm được, hãy gửi một bình luận trong thủ thuật blog [Tips] - Recent Post / Bài viết mới nhất dạng Slide tự trượt cho Blogspot Blogger này nhé. Terocket sẽ giải đáp mọi thắc mắc và hỗ trợ các bạn nhiệt tình.

Một số gợi ý liên quan đến thủ thuật Recent Post / Bài viết mới nhất cho Blogger Blogspot

  1. Sitemap 2 cột có phân trang cho blogspot
  2. Bài viết mới nhiều màu sắc cho blogspot
  3. Sitemap chọn nhãn tự động cho blogger
  4. Danh sách Bài viết mới xổ dọc khi click chuột cho blogspot
  5. [V4] Featured Posts metro slider cho blogspot
  6. [ves3] Simple Slider ảnh bài mới trượt cho blogspot
  7. [Ves2] Slider bài mới trượt ngang thumbnail cho blogger
  8. Slider bài mới nhất trượt ngang với thumbnail cho blogger [Ves1]
  9. Magazine recent post trang trí homepage cho blogspot V3
  10. Recent posts dạng báo trí cho trang chủ của blogger
  11. Recent post cho trang chủ blogger style 2
  12. Slider bài viết mới nhất trượt ngang cho blogger
  13. Bài viết mới nhất cuộn lên với Jquery cho Blogspot
  14. Recent post width thumbnail 3 cột cho blogspot.
  15. Bài viết mới trượt ngang từ JQuery cho blogspot style 3
  16. Bài viết mới 2 cột với thumbnail có mô tả cho nhãn blogger
  17. Recent posts với hiệu ứng trượt bằng jQuery
  18. Recent post 1 cột với thumbnail có mô tả khi dê chuột cho blogger
  19. List bài mới nhất có mô tả tooltip cho blogspot
  20. Recommentded post kết hợp Tweet và Facebook cho blogger
  21. Liệt kê tiêu đề bài viết gần đây theo nhãn - Recent Posts for laber
  22. Bài viết mới cuộn ngang với nút điều khiển cho blogspot
  23. Bài mới nhất có ảnh thumbnail cuộn lên từ Jquery cho blogspot
  24. Magazine "Recent post" theo label ở Homepage (ves1)
  25. Thêm hiệu ứng tooltips cho rencent post và popuplar post cho blogger
  26. Tab recent posts giống trang quantrimang
  27. Style mới cho tiện ích VNE Recent Posts
  28. Rút gọn tiêu đề Recent posts cho blogger ves2
  29. Tiện ích Recent Posts cho blogger ves 1
  30. Tiện ích Magazine Recent Posts cho Blogger
  31. Bài viết mới nhất có ảnh thumbnail cho blogspot
  32. Bài viết mới và comment mới nhất cho blogspot
  33. Bài đăng mới có hình phí trước và hiệu ứng chạy ngang
  34. Tiêu đề bài đăng mới với hiệu ứng chạy ngang
  35. Trình diễn bài viết mới dạng slide đẹp mắt bằng JQuery dành cho Blogspot

Một số gợi ý liên quan đến thủ thuật Slide mới nhất cho Blogger Blogspot

  1. CSS3 slider trình diễn đẹp cho blogger v4
  2. Css3 Fade Slide Show cho Blogger v3
  3. Thêm Slick featured posts Slider từ Jquery cho blogger
  4. [V4] Featured Posts metro slider cho blogspot
  5. [ves3] Simple Slider ảnh bài mới trượt cho blogspot
  6. [Ves2] Slider bài mới trượt ngang thumbnail cho blogger
  7. Slider bài mới nhất trượt ngang với thumbnail cho blogger [Ves1]
  8. Popular Posts dạng Slides trượt dọc cho Blogger
  9. Slider ảnh từ CSS3 cho Blogger ves 2
  10. Slider trưng bày sản phẩm theo nhãn cho blogspot
  11. Slider ảnh sử dụng overlay effect cho blogger (no scipts)
  12. Tạo Gallery (slider) trình chiếu ảnh cho blogger
  13. Slider bài viết mới nhất trượt ngang cho blogger
  14. Tạo Flash slider ảnh cực đẹp cho blogspot /website
  15. Slide bài viết mới bằng JQuery cho Blogspot
  16. Tạo hiệu ứng gallery ảnh sử dụng Tomorrow again Script
  17. Kwick jQuey cho tiện ích Random posts
  18. Làm slide ảnh cho blog (Accordion Slider )
  19. Tạo khung trượt chứa hình ảnh trong blogger
  20. Trình diễn bài viết mới dạng slide đẹp mắt bằng JQuery dành cho Blogspot
  21. Tạo Slider bằng JQuery cho blogspot
Trứng Cút - Terocket

0 nhận xét:

Đăng nhận xét