Cám ơn các bạn đã ghé qua blog của chienbourbon.blogspot.com. Nếu bạn nào cần phần mềm hay tài liệu thì cứ báo cho mình một tiếng, nếu có mình sẽ upload lên ngay cho các bạn (nhưng trong blog không đưa được link download trực tiếp nên các bạn đành phải vào mediafire để tải về nhé, tất cả link đều đưa lên trên mediafire hết) rồi đó các bạn ạ.

Thứ Sáu, 1 tháng 6, 2012

Bài viết mới dạng list có mô tả cho nhãn và blog

Posted by Admin 06:34, under | No comments


Fairstar
 | 19-04-2012 | nhận xét (6)
Recent post style list with thumbnail for laber and post - Bài viết mới dạng list có mô tả cho nhãn và blog
Với thủ thuật recent post này các bài viết hiển thị ở dạng tittle kèm theo hình ảnh thumbnail nhìn gọn và đẹp. Thủ thuật này được fandung thiết kế đã lâu hôm nay namkna sẽ hướng dẫn lại cho các bạn.

Các bạn hãy xem Demo để thấy rõ hơn.


Ảnh minh họa:
Recent post style list with thumbnail for laber and post - Bài viết mới dạng list có mô tả cho nhãn và blog
☼ Cách tiến hành:
   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Phần tử trang
   4-Chọn thêm tiện ích (Add Widget) - thêm 1 tiện ích HTML/Javarscrip và dán đoạn code bên dưới vào.
<style type="text/css">
.mota{
position: relative;
z-index: 0;
text-decoration:none;
}
.mota:hover{
background-color: transparent;
z-index: 50;
}
.mota span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}
.mota span img{
border-width: 0;
padding: 2px;
}
.mota:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:50px;
width:250px;
background:#ccc;
text-align: justify;
}
</style>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiXOgveSrI17aYzyG1Wuu4jAizaftvMVimaAZlz13EK4gmKPLdateVDMaMoxF9Sh4KO-p1gwlNEWgFsvoPQ_l4F6weYbo-13uEuUsNDy7TidhX0oQN66SNQuP7cqSdz9qyW0PacJM_R3kr/s1600/nothumbnail-namkna-blogspot-com.gif";
showRandomImg = true;
tablewidth = 245;
cellspacing = 1;
borderColor = "#30a1db";
bgTD = "#fff";
imgwidth = 60; // độ rộng của ảnh thumbnail
imgheight = 60; // chiều cao của ảnh thumbnail
fntsize = 12;
acolor = "#E67C15";
aBold = true;
icon = " » ";
text = "no";
showPostDate = false;
summaryPost = 150;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";
numposts = 8;
label = "Blogspot-tips";
home_page = "http://namkna.blogspot.com/";
</script>
<script src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/s2-label.js" type="text/javascript"></script>
Trong đó:
  • Width: 250px :độ rộng của bảng nhỏ khi rê chuột vào tiêu đề bài viết.
  • Background: #ccc : màu nền của cửa sổ popup khi rê chuột vào tiêu đề bài viết, bạn có thể xem mã màu Tại đây.
  • Imgwidth = 60 : chiều rộng của ảnh đại diện.
  • Imgheight = 60 : chiều cao của ảnh đại diện.
  • SummaryPost = 150 : số ký tự hiển thị ở cửa sổ Popup khi khi rê chuột.
  • Home_page: địa chỉ blog của bạn, hãy thay http://namkna.blogspot.com/ thành URL blog của bạn.
  • Label: Tên nhãn muốn hiển thị, hãy thay Blogspot-tips thành tên nhãn của bạn.
  • Numposts=8: Số bài muốn hiển thị trong tiện ích này.

Thủ thuật trên áp dụng cho các bài viết trong cùng một nhãn, nếu các bạn muốn áp dụng cho cả blog thì các bạn thay link Javarscip sau:
http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/s2-label.js
Thành:
http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/s2-post.js

   4-bấm Lưu  tiện ích lại.
Tư liệu: Fandung

0 nhận xét:

Đăng nhận xét