Thư viện

Trải nghiệm

Thứ Năm, tháng 4 19, 2012

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

Recent post 1 cột với thumbnail có mô tả bằng hiệu ứng Tooltop cực đẹp kèm theo ảnh thu nhỏ thumbnail.

Chia sẻ:
Recent post 1 cột với thumbnail có mô tả
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.



Ảnh minh họa:
Recent post 1 cột với thumbnail có mô tả
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] = "http://3.bp.blogspot.com/-wm2RqrVKwTg/T493GPLRGSI/AAAAAAAABLI/MmvKZmefPzY/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!
Theo: fandung

11 nhận xét:

  1. CHO MÌNH HỎI ... LÀM SAO BỎ CÁI KHUNG MÀU XANH ĐƯỢC KHÔNG BẠN

    Trả lờiXóa
  2. @Truong Gia VietBỏ cái này đi ne` bạn

    borderColor = "#30a1db";

    Trả lờiXóa
  3. @Nguyên Luật Gia luật nói đúng rồi đấy bạn bỏ đoạn borderColor = "#30a1db"; đi. Hoặc đổi nó thành borderColor = "#fff"; là được.:3) :3) :3)

    Trả lờiXóa
  4. Namkna ơi ! Namkna có rencent post nhiều bài theo từng nhãn có phân trang cho nó đc ! Namkna giúp mình với
    Cám ơn Namkna nhiều

    Trả lờiXóa
  5. Namkna ơi , cho mình hỏi có cách nào cho nó hiện hết đc ko ! có phân trang cho recent post

    Trả lờiXóa
    Trả lời
    1. Hiện chưa có nhưng bạn không nền cho recent post quá nhiều vì tiện ích đó rút từ feed sẽ làm blog chậm nếu quá nhiều bài đó.

      Xóa
  6. Cám ơn Namkna nhiếu ! Khi nào có pm mình dùm nha :3)

    Trả lờiXóa
  7. Chào bạn! làm thế nào mình có thể sắp xếp bài viết trong từng nhãn giống như của bạn vậy ah? nghĩa là hình bên trái hoặc phải kế là tiêu đề bài viết và một đoạn bài viết tóm tắt(kiểu này giống các trang báo online) nó giống như vầy: http://dantri.com.vn/kinh-doanh.htm

    Trả lờiXóa
  8. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa