Đăng bởi Huy Tập lúc 25/05/2013 0
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.
Hướng dẫn tạo slider bài viết mới đẹp và chuyên nghiệp cho blogger
Ả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:
  1. Đăng nhập vào blogger với tài khoản của bạn. 
  2. Nhấn Bố cục bảng điều khiển 
  3. 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)
Nhập mã code dưới đây trong hộp HMTL / Javascript

<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
Loading...
Tags:

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

Lưu ý: Khi để lại Nhận xét bạn nên click vào ô "Thông báo cho tôi" ở dưới để nhận phản hồi từ Admin

Tag liên kết

Loading...

Đó chưa phải tất cả ... Chúng tôi còn 100 mẫu blog đẹp khác. View all Mẫu Template Blogger

Hãy nhanh tay gọi điện ngay đến chúng tôi theo số 0988227905 hoặc đặt hàng thiết kế ngay hôm nay theo mẫu form bên dưới.

Chúng tôi sẽ hoàn thành trong thời gian sớm nhất cho quý khách

Hãy truy cập để trải nghiệm dịch vụ của chúng tôi
Đã có
lượt Khách Hàng quan tâm đến dịch vụ của chúng tôi

Sử dụng nội dung ở trang này và dịch vụ tại Share123.vn có nghĩa là bạn đồng ý với Thỏa thuận sử dụng và Chính sách phát triển của chúng tôi.

www.Share123.vn - Website chuyên thiết kế blogspot, zip blogger, thiết kế blog chuẩn seo, blogger responsive, Thủ thuật Blogspot, Free Template Blogspot, kho giao diện blog đẹp, premium template blogger, free template blogger, Với kinh nghiệm nhiều năm trong nghề thiết kế Temple, design skin web chúng tôi cam kết tạo ra những sản phẩm chất lượng, tối ưu đến tay người dùng, thiết kế theo yêu cầu của quý khách, cùng đội ngủ support chuyên nghiệp nhiệt tình, ...

Copyright 2013 © Share123.vn - Blogger Team. All right Reserved - Hotline: 0988.227.905 - 0904.227.905 - Email: nguyenhuytap@gmail.com - website: www.share123.vn

0988227905