Recent post 1 cột với thumbnail có mô tả khi dê chuột cho blogger

Tiếp theo mình sẽ giới thiệu thêm cho các bạn tiện ích bài viết mới nhất dạng 1 cột với 1 bên là hình đại diện và một bên là tiêu đề của bài nó. Điểm đặc biệt ở tiện ích này là nó có thêm hiệu ứng mô tả khi bạn dê chuột vào tiêu đề của bài viết đó.

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

Demo for Post

Ảnh minh họa:

☼ 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:190px;
background:#ccc;
text-align: justify;
}
</style>


<script language="JavaScript">
imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGAty1z3DAWyH1bQpjf270oIGEKH-P2JHOxehH3TurMj6x8mdVvz6i3CGQ8WlvkW1jxsMnbrulAIinu297yN9fbJ38aaRu0NlT6izVyhmG78463-v0c9DF0lida-ZbkaxeYjzji2w-c1Pt/s320/nothumbnail-namkna-blogspot-com.gif";

showRandomImg = true;
tablewidth = 185;
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 = " &#187; ";

text = "no";

showPostDate = false;

summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " &#187; ";

numposts = 8;
label = "Blogspot-tips";
home_page = "http://namkna.blogspot.com/";
</script>
<script src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/s1-label.js" type="text/javascript">
</script>

Trong đó:

•  top: 20px; , left:50px; : đây là code xác định vị trí hiển thị của popup
  width:250px; : độ rộng của popup, còn chiều cao sẽ tự thay đổi tùy vào nội dung hiện thị trong nó dài hay ngắn.
  background:#ccc; : màu nền
  text-align: justify; : tự động căn giữa cho văn bản.
• Thay Blogspot-tips : thành tên nhãn (laber) bạn muốn hiển thị trong tiện ích.
• Thay http://namkna.blogspot.com/ Thành URL địa chỉ blog của ban.
• nompossts = 8; Số bài đăng muốn hiển thị trong tiện ích
• imgwidth = 60;  Độ rộng của ảnh thumbnail
  imgheight = 60; Chiều cao cửa ảnh Thumbnail
• - summaryPost = 150; : số kí tự sẽ hiển thị trong popup mô tả.

- Code trên là dùng cho các bài viết theo nhãn, nếu các bạn muốn hiển thị các bài viết mới cho cả blog thì đổi link file javascript  :

http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/s1-label.js

Thành 

http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/s1-post.js

'
5-bấm Lưu  tiện ích lại.

Chúc thành công!