Lần trước mình đã hướng dẫn Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot khá đẹp và chuyên nghiệp, hôm nay mình hướng dẫn một dạng slider bài viết mới nhất (Slider Recent Posts ) hiển thị ngoài trang chủ cho blogger. Dạng slider này tương đối giống của yahoo.
Cách làm:
Bước 1: Đăng nhập Blogger => Mẫu => Chỉnh sửa HTML => Nhấn Ctrl+F (nội tuyến) tìm ]]></b:skin> và paste đoạn code sau vào trước ]]></b:skin>
Lưu ý: Khi các bạn áp dụng thủ thuật này thì nên down các file .txt về và up lên host của các bạn đề phòng die link.
Hãy like và G+1 nếu thấy bài viết có ích cho bạn. Chúc các bạn thành công
Tags:
 |
| Ảnh Demo |
Cách làm:
Bước 1: Đăng nhập Blogger => Mẫu => Chỉnh sửa HTML => Nhấn Ctrl+F (nội tuyến) tìm ]]></b:skin> và paste đoạn code sau vào trước ]]></b:skin>
.mod{
background:#EFF1F7; /*màu tiện ích*/
border:1px solid #eee; /*đường viền tiện ích*/
margin-bottom:10px;
margin-top:-10px;
width:648px; /*độ rộng tiện ích*/
padding:0px;}
.glv{height:330px; /*chiều cao 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:336px; /*d? r?ng c?u ph?n bên trái c?a ti?n ích*/
display:none;
position:absolute;
color:#000;
border-right:0px solid #5C5858;
}
.gl-title a {color:#2c6be5; /*màu text c?a tiêu d? bài vi?t bên trái*/
font-size:13px;
font-weight:bold;}
.gl-title a:hover {color:#ff0033;}
.glv .on{display:block;}
.vimg{width:325px; /*d? r?ng c?a ?nh bên trái*/
height:230px; /*chi?u cao c?a ?nh bên trái*/
border:1px solid #fff;padding:2px;}
.glv ul.vpv-ft li{
list-style-type:none;}
.vpv-ft{
width:300px; /*d? r?ng ph?n bên ph?i*/
position:absolute;
top:0px;
right:0px;
margin-top:5px;
text-align:left;}
.vpv-ft a{
color:#000099; /*màu tiêu d? bên ph?i*/
font-size:12px;
font-family:arial;
text-decoration: none;
}
.vpv-ft a:hover{color:#ff0033;}
.vpv-ft li{
list-style-type:none;
min-height:65px;
cursor:pointer;
border-bottom:0px solid #5C5858;
position:relative;
text-align:left;}
.vpv-ft li.last{
border-bottom:0;
padding-bottom:5px;}
.vpv-ft li.first{
border-top:0px solid #5C5858;
padding-bottom:5px;}
.vpv-ft li.on{
background:#AFC7C7;
}
.vpv-ft img{
float:left;
width:80px; /*d? r?ng c?a ?nh bên ph?i*/
height:60px; /*chi?u cao c?a ?nh bên ph?i*/
margin:3px 4px 0px 2px;
padding:0px;}
.vpv-ft a{font-family:verdana;}
.glv .vpv-ft .on .imgpointer{display:block;}
.glv .vpv-ft .imgpointer{
display:none;
height:14px;
width:6px;
position:absolute;
left:-10px;>
top:7px;}
Bước 2: - Đăng nhập vào blogger với tài khoản của bạn.
- Nhấn Bố cục bảng điều khiển
- Sau đó, bạn chọn thêm tiện ích >> HTML / Javascript (Tham khảo cách tạo 1 widget HTML/Javascript ở vị trí bất kỳ cho blogspot)
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = false;
fntsize = 12;
acolor = "";
aBold = false;
text = "comments";
showPostDate = true;
summaryPost = 80; //số ký tự hiển thị bên trái
summaryFontsize = 12;
summaryColor = "";
numposts =6;
label = "Template%20Blogspot"; /*nhãn bài viết*/
home_page = "http://www.share123.vn"; /*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 type="text/javascript" src="https://nguyenhuytap.googlecode.com/files/sider-bai-viet-moi-1-share123.vn.txt"></script>
</div>
<script type="text/javascript" src="https://nguyenhuytap.googlecode.com/files/slider-recentposts_2_share123.vn.txt"></script>
</div></div></div>
<script type="text/javascript" src="https://nguyenhuytap.googlecode.com/files/recentposts_3_share123.vn.txt"></script>
<script type="text/javascript" src="https://nguyenhuytap.googlecode.com/files/recentposts_4_share123.vn.txt"></script>
<script type="text/javascript" src="https://nguyenhuytap.googlecode.com/files/recentposts_5_share123.vn.txt"></script>
<script type="text/javascript" src="https://nguyenhuytap.googlecode.com/files/recentposts_6_share123.vn.txt"></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>
Lưu ý: Khi các bạn áp dụng thủ thuật này thì nên down các file .txt về và up lên host của các bạn đề phòng die link.
Hãy like và G+1 nếu thấy bài viết có ích cho bạn. Chúc các bạn thành công
Không có nhận xét nào: