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

Tiện ích bài mjớ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.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 ☺

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

Kiểu 1

Xem demo

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.

Thêm Tiện ích bài mjới dạng SlideShow-Recent posts slider cho blogspot

Code

<style type="text/css">
.mod{
background:transparent; /*màu nền của tiện ích*/
border:3px solid #005595; /*đường viền của tiện ích*/
margin-bottom:0px;
width:650px; /*độ 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:250px; /*độ 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:#f90}
.glv .on{display:block;}
.vimg{width:239px; /*độ 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:#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{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;}
@media screen and (max-width:800px){.mod {width:98%;float:none;}
.vpv,.vpv-ft{width:48%;float:none;}
.gl-title,.vimg{max-width:100%;width:100%}
.gl-title{padding:10px 0}
}
@media screen and (max-width:459px){
.gl-title a,.vpv-ft a{font-size:10px}
}
@media screen and (max-width:359px){
.gl-title a,.vpv-ft a{font-size:8px;line-height:10px}
}
</style>
<script language="JavaScript">
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 = 80; //số ký tự hiển thị của bài viết tóm tắt bên trái
summaryFontsize = 12;
summaryColor = "";
numposts =6; /* số bài viết hiển thị*/
label = "Advanced blogger"; /*nhãn bài viết*/
home_page = "http://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" type="text/javascript">
</script><script src="https://dl.dropboxusercontent.com/s/2rzae9rykzm88jg/baimoik5-2.js" type="text/javascript">
</script>
</div>
</div>
</div>
</div>
<script src="https://dl.dropboxusercontent.com/s/fwjcyujoomzkbck/baimoik5-3.js" type="text/javascript">
</script>
<script src="https://dl.dropboxusercontent.com/s/frfage9vkrpb0ht/baimoik5-4.js" type="text/javascript">
</script>
<script src="https://dl.dropboxusercontent.com/s/asgokeiqh394u0p/baimoik5-5.js" type="text/javascript">
</script>
<script src="https://dl.dropboxusercontent.com/s/rvdax15854dcidx/baimoik5-6.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.

Thay http://blog.doisong24.com/ thành URL blog của bạn.

Kiểu 2

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

DEMO

Cách cài đặt cũng như ở kiểu 1 bạn cần thêm 1 tiện ích javascript/HTML ở phần main.

Code:

/* Bài mới */
<style type="text/css">
.mod{
background:#fff; /*màu nền của tiện ích*/
border:3px solid #f90; /*đường viền của tiện ích*/
margin-bottom:0px;
width:648px; /*độ rộng của tiện ích*/
padding:1px;}
.glv{height:350px; /*chiều cao của tiện ích*/
overflow:hidden;}
.bd{position:relative;padding:4px}
.gl2-ct .ct{margin-left:0px;position:relative;}
.vpv{padding:0 5px;width:295px; /*độ rộng của phần bên trái của tiện ích*/
display:none;
position:absolute;
color:transparent;
border-right:1px solid #eee;
}
.gl-title{width:295px;height:40px;background:rgba(0,0,0,0.70);padding:10px 0;text-align:center;
}
.gl-title a {
font-family: Tahoma,Helvetica,FreeSans,sans-serif;
color:#fff; /*màu text của tiêu đề bài viết bên trái*/
font-size:14px;
font-weight:bold;
}
.gl-title a:hover {color:#f90}
.glv .on{display:block;}
.vimg{width:290px; /*độ rộng của ảnh bên trái*/
height:275px; /*chiều cao của ảnh bên trái*/
border:0px solid #005595;padding:2px;
}
.glv ul.vpv-ft li{
list-style-type:none;}
.vpv-ft{
width:50%; /*độ 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:14px;
font-family:Times New Roman;
text-decoration: none;}
.vpv-ft a:hover{color:#f90}
.vpv-ft li{
list-style-type:none;
min-height:55px;
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{font-family:Tahoma,Helvetica,FreeSans,sans-serif}
.glv .vpv-ft .on .imgpointer{display:block;}
.glv .vpv-ft .imgpointer{
display:none;
height:18px;
width:10px;
position:absolute;
left:-14px;
top:7px;
}
@media screen and (max-width:800px){.mod {width:98%;float:none;}
.vpv,.vpv-ft{width:48%;float:none;}
.gl-title,.vimg{max-width:100%;width:100%}
.gl-title{padding:10px 0}
}
@media screen and (max-width:459px){
.gl-title a,.vpv-ft a{font-size:10px}
}
@media screen and (max-width:359px){
.gl-title a,.vpv-ft a{font-size:8px;line-height:10px}
}
</style>
<script language="JavaScript">
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 = ; //số ký tự hiển thị của bài viết tóm tắt bên trái
summaryFontsize = 12;
summaryColor = "";
numposts =6; /* số bài viết hiển thị*/
label = "Advanced blogger"; /*nhãn bài viết*/
home_page = "http://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" type="text/javascript">
</script><script src="https://dl.dropboxusercontent.com/s/2rzae9rykzm88jg/baimoik5-2.js" type="text/javascript">
</script>
</div>
</div>
</div>
</div>
<script src="https://dl.dropboxusercontent.com/s/fwjcyujoomzkbck/baimoik5-3.js" type="text/javascript">
</script>
<script src="https://dl.dropboxusercontent.com/s/frfage9vkrpb0ht/baimoik5-4.js" type="text/javascript">
</script>
<script src="https://dl.dropboxusercontent.com/s/asgokeiqh394u0p/baimoik5-5.js" type="text/javascript">
</script>
<script src="https://dl.dropboxusercontent.com/s/rvdax15854dcidx/baimoik5-6.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>

Thay http://blog.doisong24.com/ thành URL blog của bạn.
Nhận xét

Không có nhận xét nào :