Tiện Ích Recent Posts - Dạng 2

Lê An    8/05/2013    Recent Posts , Thủ thuật blog , Widget    Comments   

Đã lâu rồi mình không có viết bài về tiện ích Blog. Hôm nay mình xin viết và giới thiệu đến các bạn một Tiện ích về Blog. Một tiện ích hiển thị bài viết mới cho Blog hay Recent Posts. Các bạn hãy xem hướng dẫn nhé

Tiến hành cài đặt:

Bước 1: Đăng nhập vào Blog

Bước 2: Bạn đến phần Bố Cục 

Hình hướng dẫn

Bước 3: Bạn coppy toàn bộ code và dán vào:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<style type="text/css" media="screen">
#workwidget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}
#workwidget ul {
width: 295px;
overflow: hidden;
list-style-type: none;
padding: 0px 0px;
margin: 0px 0px;
}
#workwidget li {
width: 282px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsq5JSP5ewYU85G43dFkHIfmVxVW59OOjQTYLM82OgW4bf-q26N_7Op3skancaVymVWHAsyQy7zLDQy_IY42jhb-W0g4JYnAyKK98Sw5NwpNgNdI7s1e3gAPjrDlrPOIyE6kq1BPA_DGr2/s1600/24work-blogspot-com.jpg) repeat-x;
border: 1px solid #ddd;
}
#workwidget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}
#workwidget img {
float: left;
margin-top: 10px;
margin-right: 15px;
background: #EFEFEF;
border: 0;
}
#workwidget img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
padding: 4px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#workwidget img:hover {
-moz-transform: scale(1.2) rotate(-350deg);
-webkit-transform: scale(1.2) rotate(-350deg);
-o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg);
transform: scale(1.2) rotate(-350deg);
-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}
.spydate {
overflow: hidden;
font-size: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Tahoma,Arial,verdana, sans-serif;
}
.spycomment {
overflow: hidden;
font-family: Tahoma,Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}

</style><script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzxY5OB-CDPHYT_zmN2HQRH9Mk8Ik1pCuDmK_dOndEmI7MgcNTJZp076KaWGocjGgHGhnsSoGhoJFjdfweT2_UoH1BeqYHGqXM4IcCHeDpfi2qgH9pL5CaKHcoMRqJuslfd9TawYo-hfbu/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzxY5OB-CDPHYT_zmN2HQRH9Mk8Ik1pCuDmK_dOndEmI7MgcNTJZp076KaWGocjGgHGhnsSoGhoJFjdfweT2_UoH1BeqYHGqXM4IcCHeDpfi2qgH9pL5CaKHcoMRqJuslfd9TawYo-hfbu/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzxY5OB-CDPHYT_zmN2HQRH9Mk8Ik1pCuDmK_dOndEmI7MgcNTJZp076KaWGocjGgHGhnsSoGhoJFjdfweT2_UoH1BeqYHGqXM4IcCHeDpfi2qgH9pL5CaKHcoMRqJuslfd9TawYo-hfbu/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzxY5OB-CDPHYT_zmN2HQRH9Mk8Ik1pCuDmK_dOndEmI7MgcNTJZp076KaWGocjGgHGhnsSoGhoJFjdfweT2_UoH1BeqYHGqXM4IcCHeDpfi2qgH9pL5CaKHcoMRqJuslfd9TawYo-hfbu/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzxY5OB-CDPHYT_zmN2HQRH9Mk8Ik1pCuDmK_dOndEmI7MgcNTJZp076KaWGocjGgHGhnsSoGhoJFjdfweT2_UoH1BeqYHGqXM4IcCHeDpfi2qgH9pL5CaKHcoMRqJuslfd9TawYo-hfbu/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://tynisoft.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>
<div id="workwidget">
<script src='http://24work.webs.com/24work-blogspot/recent-posts/animated-recent-posts-ycode-2.js' type='text/javascript'></script>
</div>

Nếu Blog/ Web của bạn đã có thư viện jquery.min.js thì các bạn bỏ qua dòng đầu tiên.

Màu Đỏ: Các bạn có thể sửa tùy ý.

Bước 4: Save lại và xem kết quả