Bài viết mới với hình ảnh thu nhỏ và title dạng tooltip hiển thị trích đoạn

Bài viết này sẽ hướng dẫn giúp bạn thêm tiện ích Bài viết mới nhất dạng hình ảnh thu nhỏ với hiệu ứng tooltip đẹp mắt tóm tắt nội dung khi rê chuột vào bài viết. Mới bạn xem demo và hình ảnh bên dưới để hiểu rõ hơn về thủ thuật này

Live Demo

Thực Hiện

Để thêm tiện ích này vào blog bạn cần tạo một widget HTML/Javascrip mới sau đó thêm code sau vào

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script><style type="text/css" scoped="scoped">
#mini-gallery {
  width:380px; /* Chiều rộng của widget*/
  margin:0 auto;
  font:normal normal 11px Verdana,Arial,Sans-Serif;
  color:#666;
  padding:8px;
  background-color:#222;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);
  box-shadow:0 1px 3px rgba(0,0,0,0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#mini-gallery h2 {
  font:normal normal 14px Impact,"Arial Narrow",Arial,Sans-Serif;
  color:#999;
  text-shadow:0 1px 0 black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#3c3c3c;
}
#mini-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0 0;
  background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}
#mini-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0 0 !important;
  padding:0 0 !important;
  background:transparent !important;
  display:none;
}
#mini-gallery .rp-item .rp-child {
  position:absolute;
  top:95%;
  left:95%;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:4px solid #3399ff;
  -webkit-box-shadow:0 0 3px rgba(0,0,0,0.7);
  -moz-box-shadow:0 0 3px rgba(0,0,0,0.7);
  box-shadow:0 0 3px rgba(0,0,0,0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
}
#mini-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0 0 5px;
  color:#2473A8;
}
#mini-gallery .rp-item:hover .hidden {display:block}
</style>
<script type="text/javascript">
var rpTitle     = "Recent Post", // Tên widget
    numposts    = 20,                // Số bài hiển thị
    numchar     = 300,               // Số ký tự tóm tắt
    rcFadeSpeed = 600,               // Tốc độ của hiệu ứng
    pBlank      = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg", // Hình ảnh thay thế cho những bài không có ảnh thu nhỏ
    blogURL     = "http://www.trollvl.com"; // Link blog
</script>
<script src="http://trollvlhcv.googlecode.com/svn/trunk/rp-mini-gallery.js" type="text/javascript"></script>

Lưu ý:

1. Nếu trong template của bạn đã có jQuery rồi thì xóa dòng màu đỏ đi
2. Bạn nên chỉnh sửa chiều rộng của widget với kích cỡ hình ảnh thu nhỏ và số lượng bài viết sao cho phù hợp với blog của mình. Mặc định của code trên có chiều rộng là 380px trong đó chiều rộng mỗi hình ảnh thu nhỏ là 72px và hiển thị 20 bài viết.
3. Thay đổi http://www.trollvl.com thành link blog của bạn 

Tham khảo DTE