[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

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

Trứng Cút - Terocket

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

Live Demo

Để 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.

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

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

Bạn có thể thích những bài đăng này

Nhận xét

CÔNG TY TNHH EXPRESSNO1