Bài Mới Dạng SlideShow .

Tiện ích này có điều hơi đặc biệt ở chỗ khi ta rê chuột vào bài nào ở phần bên phải của tiện ích thì bài đó được gọi ra ở phần trái tiện ích.Hiệu ứng linh,màu sắc tiêu đề có khả năng tùy biến khá phong phú,nhưng mỗi tội nhiều file js :D
Để tạo được tiện ích này có 3 bước
-Thêm CSS
-Thêm javascript
-Thêm HTML
Nhưng đơn giản hóa tôi gộp tất cả lại làm 1 cho khỏi phải can thiệp vào template.
Như vậy ta chỉ còn mỗi việc là thêm 1 tiện ích.
Vậy bắt đầu nhé:
Code
<style type="text/css">
.mod{
background:transparent; /*màu nền của tiện ích*/
border:2px solid #005595; /*đường viền của tiện ích*/
margin-bottom:0px;
width:630px; /*độ rộng của tiện ích*/
padding:0px;}
.glv{height:260px; /*chiều cao của tiện ích*/
overflow:hidden;}
.bd{position:relative;padding:4px 4px 4px 6px;}
.gl2-ct .ct{margin-left:0px;position:relative;}
.vpv{padding:0px;width:240px; /*độ rộng của phần bên trái của tiện ích*/
display:none;
position:absolute;
color:#005595;
border-right:1px solid #005595;
}
.gl-title a {color:#005595 /*màu text của tiêu đề bài viết bên trái*/
font-size: 20px;
font-weight: bold;}
.gl-title a:hover {color:#9932CC;}
.glv .on{display:block;}
.vimg{width:227px; /*độ rộng của ảnh bên trái*/
height:150px; /*chiều cao của ảnh bên trái*/
border:1px solid #005595;padding:2px;}
.glv ul.vpv-ft li{
list-style-type:none;}
.vpv-ft{
width:59%; /*độ rộng phần bên phải*/
position:absolute;
top:0px;
right:0px;
margin-top:5px;
text-align:left;}
.vpv-ft a{
color:#005595; /*màu tiêu đề bên phải*/
font-size:18px;
font-family:Times New Roman;
text-decoration: none;}
.vpv-ft a:hover{color:#0000FF;}
.vpv-ft li{
list-style-type:none;
min-height:40px;
cursor:pointer;
border-bottom:1px solid #005595;
position:relative;
text-align:left;}
.vpv-ft li.last{
border-bottom:0;
padding-bottom:5px;}
.vpv-ft li.first{
border-top:1px solid #005595;
padding-bottom:5px;}
.vpv-ft li.on{
background:transparent;
}
.vpv-ft img{
float:left;
width:50px; /*độ rộng của ảnh bên phải*/
height:40px; /*chiều cao của ảnh bên phải*/
margin:3px 4px 0px 2px;
padding:0px;}
.vpv-ft a{font-family:Time New Roman;}
.glv .vpv-ft .on .imgpointer{display:block;}
.glv .vpv-ft .imgpointer{
display:none;
height:14px;
width:6px;
position:absolute;
left:-10px;
top:7px;}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i1102.photobucket.com/albums/g455/maryathu_tran/20895446-images1925836_embe1_zpsef4011b7.jpg";

showRandomImg = false;

fntsize = 12;
acolor = "";
aBold = false;

text = "comments";
showPostDate = true;

summaryPost = 30; //Số ký tự phần trích dẫn bên trái
summaryFontsize = 12;
summaryColor = "";

numposts =5; /* Số bài hiển thị*/
label = "Advanced blogger"; //Nhãn bài viết nếu là toàn blog thì không quan tâm.
home_page = "http://kartriderdautocrazy01.blogspot.com/";//Thay URL Blog của bạn

</script>
<div id="gl2" class="mod glv"><div class="bd"><div id="gl2-vd"></div><div class="gl2-ct"><div id="gl2-ct1" class="ct on">
<script src="http://blogdautocrazy.googlecode.com/files/dtc-1-post.js" type="text/javascript">
</script><script src="http://blogdautocrazy.googlecode.com/files/dtc-2-post.js" type="text/javascript">
</script>
</div>
</div>
</div>
</div>
<script src="http://blogdautocrazy.googlecode.com/files/dtc-jq-03.js" type="text/javascript">
</script>
<script src="http://blogdautocrazy.googlecode.com/files/dtc-jq-min.js" type="text/javascript">
</script>
<script src="http://blogdautocrazy.googlecode.com/files/dtc-jq-02.js" type="text/javascript">
</script>
<script src="http://blogdautocrazy.googlecode.com/files/dtc-jq-01.js" type="text/javascript">
</script>
<script type="text/javascript">
(function() { new YAHOO.sea.fp.TodayVSet('gl2-ct1', true); })();
(function(){YAHOO.util.Event.addListener(window,'load',function(){window.setTimeout(function(){
},500);});})();
</script>

Bạn tùy chỉnh lại kích thước,màu sắc nền cùng tiêu đề theo ý thích của mình.
Tiện ích này có được là do xem nguồn trang blog MaryaANHTHƯ nên bản quyền thuộc về ANH THƯ.
Pm
Rê chuột vào khung để xem

ờng thời gian tảBình thư