[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!

1. 
   

Trứng Cút - Terocket

Share on Google Plus

About Unknown

Có nhiều người nói, 1 số thì bảo mình biến thái , 1 số lại nói mình lập di ,còn 1 số người lại bảo mình hơi kỳ quái vì lý do mình thích ngắm sưu tầm và nếu có cơ hội là chộp luôn . Nhưng mình thích vì điều đó sở thích mình là như zậy ở đâu có áo dài là lảng vảng đâu đó có mặt mình 1 linh hồn bí ẩn .. khà khà Mình rất vui khi mình được ngắm và chiêm ngưỡng Áo Dài Việt Nam 1 sở thích Bất diệt nơi Tâm hồn ... ^^