Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Tuesday, March 3, 2015

Tiện ích Recent Posts với hiệu ứng trượt dọc chuyên nghiệp sẽ giúp cho người đọc cảm thấy thú vị khi đến với blog của bạn. Họ sẽ không có lí do gì mà không thử click xem bài viết đó, mình sẽ giới thiệu sau đây tiện ích này.



Xem trước

Cách 1

Bước 1: Các bạn vào chỉnh sửa HTML và thêm đoạn vào đoạncode sau trên thẻ ]]></b:skin>.
#recent-list{overflow:hidden;margin-top:5px;padding:0 0;height:350px}
#recent-list ul{width:100%;overflow:hidden;list-style-type:none;padding:0 0;margin:0 0}
#recent-list li{padding:5px 5px;margin:0 0 5px;list-style-type:none;float:none;height:70px;overflow:hidden;background:#fff url() repeat-x;border:1px solid #ddd;white-space:nowrap;text-overflow:ellipsis}
#recent-list li a{text-decoration:none;color:#4B545B;font-size:11px;height:18px;overflow:hidden;margin:0 0;padding:0 0 2px}
#recent-list li img{float:left;margin-right:5px;background:#EFEFEF;border:0}
.recent-date{overflow:hidden;font-size:10px;color:#0284C2;padding:2px 0;margin:1px 0 0;height:15px;font-family:Arial}
.recent-comment{overflow:hidden;font-family:Arial;font-size:10px;color:#262B2F;padding:0 0;margin:0 0}
Bước 2: Thêm đoạn code bên dưới vào phía trên thẻ </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
Bước 3: Thêm một widget HTML/Javascrpit vào vị trí bạn muốn, sau đó thêm đoạn code sau vào:.
<script language='javascript'>
imgr = new Array();
imgr[0] = "URL_ảnh";
showRandomImg = true;
boxwidth = 290;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://nvpn.blogspot.com/";
limitspy=5
intervalspy=6000
</script>
<div id="recent-list">
<script src="https://www.googledrive.com/host/0B1EJGJ56bNPuanhTZFl3bmE2OFU" type="text/javascript"></script>
</div>
Ghi chú:
  • home_page = "http://nvpn.blogspot.com/"; Thay http://nvpn.blogspot.com/ thành URL Blog của bạn.
  • imgr[0] = "URL_ảnh"; Thêm Url ảnh mặc định đối với bài viết không có ảnh
  • <script src="https://www.googledrive.com/host/0B1EJGJ56bNPuanhTZFl3bmE2OFU" type="text/javascript"></script> Các bạn download file này về rồi up lên host dùng riêng nhé.
  • Nếu blog của bạn đã có file http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js thì hãy xóa file này đi nhé!
  • Những mục còn lại mình thấy là quen thuộc, các bạn có thể chỉnh sửa cho phù hợp với Blog của mình nhé!

Cách 2

Thay vì thêm nhiều đoạn code như trên thì bạn chỉ việc thêm một đoạn code duy nhất. Thêm một tiện ích HTML/Javascrpit vào vị trí bạn muốn, sau đó thêm đoạn code sau vào tiện ích HTML/Javascrpit đó.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
#recent-list{overflow:hidden;margin-top:5px;padding:0 0;height:350px}
#recent-list ul{width:100%;overflow:hidden;list-style-type:none;padding:0 0;margin:0 0}
#recent-list li{padding:5px 5px;margin:0 0 5px;list-style-type:none;float:none;height:70px;overflow:hidden;background:#fff url() repeat-x;border:1px solid #ddd;white-space:nowrap;text-overflow:ellipsis}
#recent-list li a{text-decoration:none;color:#4B545B;font-size:11px;height:18px;overflow:hidden;margin:0 0;padding:0 0 2px}
#recent-list li img{float:left;margin-right:5px;background:#EFEFEF;border:0}
.recent-date{overflow:hidden;font-size:10px;color:#0284C2;padding:2px 0;margin:1px 0 0;height:15px;font-family:Arial}
.recent-comment{overflow:hidden;font-family:Arial;font-size:10px;color:#262B2F;padding:0 0;margin:0 0}
</style>
<script language='javascript'>
imgr = new Array();
showRandomImg = true;
boxwidth = 290;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://nvpn.blogspot.com/";
limitspy=5
intervalspy=6000
</script>
<div id="recent-list">
<script src="https://www.googledrive.com/host/0B1EJGJ56bNPuanhTZFl3bmE2OFU" type="text/javascript"></script>
</div>
Và dù cách nào bạn hãy lưu trước khi xem kết quả nhé!

0 comments:

Post a Comment

Popular Posts