Tiện ích bài mới dạng SlideShow responsive-Recent posts slider responsive

Tiện ích bài mới dạng SlideShow-Recent posts slider 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.

Tiện ích này thời còn blog Yahoo nó rất được ưa chuộng.Nhưng khi chuyển sang thời của thiết bị di động thì nó bị lãng quyên vì ko được responsive.

Hiệu ứng linh, màu sắc tiêu đề có khả năng tùy biến khá phong phú. Tại bài này thì nó đã được responsive cho phù hợp với thời cuộc.
Tiện ích bài mjới dạng SlideShow-Recent posts slider

DEMO
Để 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 tại phần main.
Thêm Tiện ích bài mjới dạng SlideShow-Recent posts slider cho blogspot
Code
<style>
.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:100%; /*độ rộng của tiện ích*/
padding:0px;}
.glv{height:320px; /*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:40%; /*độ 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;display: -webkit-box; overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.gl-title a:hover {color:#f90}
.glv .on{display:block;}
.vimg{width:98%; /*độ 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:15px;
display: -webkit-box; overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2; -webkit-box-orient: vertical;
text-decoration: none;}
.vpv-ft a:hover{color:#f90}
.vpv-ft li{
list-style-type:none;
min-height:50px;
cursor:pointer;
border-bottom:1px solid #ddd;
position:relative;
text-align:left;}
.vpv-ft li.last{
border-bottom:0;
padding-bottom:5px;}
.vpv-ft li.first{
border-top:1px solid #ddd;
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 0 2px;
padding:0px;}
.vpv-ft a{display: -webkit-box; overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.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>
imgr = new Array();
imgr[0] = "https://2.bp.blogspot.com/-wz5kr6SZjDk/WC0NFQlQxSI/AAAAAAAACPs/Y-wJQCAxrO0XupyeBA25YKlXYulOwvAvgCLcB/s1600/no-thumb.png";
showRandomImg = false;
fntsize = 12;
acolor = "";
aBold = false;
text = "comments";
showPostDate = true;
summaryPost = 40; //số ký tự hiển thị của bài viết tóm tắt bên trái
summaryFontsize = 10;
summaryColor = "";
numposts =6; /* số bài viết hiển thị*/
label = "Advanced blogger"; /*nhãn bài viết*/
home_page = "https://blog.doisong24.com/"; /*thay thành địa chỉ 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="https://dl.dropboxusercontent.com/s/npgu3v66nofhxgv/baimoik5-1.js">
</script><script src="https://dl.dropboxusercontent.com/s/2rzae9rykzm88jg/baimoik5-2.js">
</script>
</div>
</div>
</div>
</div>
<script src="https://dl.dropboxusercontent.com/s/fwjcyujoomzkbck/baimoik5-3.js">
</script>
<script src="https://dl.dropboxusercontent.com/s/frfage9vkrpb0ht/baimoik5-4.js">
</script>
<script src="https://dl.dropboxusercontent.com/s/asgokeiqh394u0p/baimoik5-5.js">
</script>
<script src="https://dl.dropboxusercontent.com/s/rvdax15854dcidx/baimoik5-6.js">
</script>
<script>
(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.
Thay http://blog.doisong24.com/ thành URL blog của bạn.
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji