Recent posts 2 cột & 1 cột với hiệu ứng Tooltip

Demo:



* Sau đây là các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đọan code bên dưới vào trước thẻ đóng

Code:

</head>

Code:

<link href="http://data.fandung.com/blog/demo/tooltip-recentposts/tooltip.css" rel="stylesheet" type="text/css" />
<script src="http://data.fandung.com/blog/demo/tooltip-recentposts/System_Tooltip.js" type="text/javascript"></script>

4. Tạo widget HTML/Javascript và dán đọan code bên dưới vào :

Code:

<style type="text/css">
#rc-posts-2-col {
width:320px;
}
#rc-posts-2-col h3 {
background:url(http://data.fandung.com/blog/demo/tooltip-recentposts/img-bg-rd.png) no-repeat top left;
padding:3px 5px 14px 5px;
font-size:13px;
color:#fff;
}
table#rc-2cot {border-top:1px solid #ccc;border-bottom:1px solid #ccc; border-left:1px solid #ccc;}
#rc-tr1 {background:#f3f3f3;}
#rc-tr0 {background:#fff;}
#rc-td {padding:2px; color:#CC0000; border-right:1px solid #ccc;width:160px;}
#rc-td img {float:left; margin-right:2px; height:50px; width:50px; border:1px solid #ccc; padding:1px;}
#rc-td a {text-decoration:none;}
#rc-td a:hover {text-decoration:underline;}
</style>

<script type="text/javascript">
home_page = "http://www.fandung.com/";
label = "Thu%20Thuat%20Blog";
numposts = 12;
postcount = 400;
sumTitle = 40;
colortitle = "#555";
tcolortitle = "#ff6c00";
cmcolor = "#6b1f01";
nocmtext = "No Comment";
cmtext = "Comments";
posttext = "Posted in";
</script>

<div id="rc-posts-2-col"><h3>Recent Posts with tooltip</h3>
<div id="rc-posts-loading">
<img align='absmiddle' src='http://data.fandung.com/img/loading-related.gif'/>
</div>
<script src="http://data.fandung.com/blog/demo/tooltip-recentposts/tooltip-rc-post-2cot.js" type="text/javascript"></script>
</div>

- Ở bài viết mở rộng này, chỉ có thêm các biến mới là :

Code:

postcount = 400; //số kí tự của đọan nội dung tóm tắt bài viết
tcolortitle = “#ff6c00″; // màu của tiêu đề bài viết ở phần mô tả
cmcolor = “#6b1f01″; // màu của phần thông tin bài viết (gồm : ngày đăng và số nhận xét)

còn các biến : nocmtext, cmtext, posttext các bạn có thể thay thế bằng các đọan text khác tùy ý bạn.


- Nếu muốn hiển thị bài viết mới cho cả blog, các bạn thay file js ở trên lại thành file bên dưới :

Code:

http://data.fandung.com/blog/demo/tooltip-recentposts/tooltip-rc-post-2cot-all.js

5. Save widget lại để hòan thành.

Tạm thời widget này sẽ chỉ hiển thị được 1 cái ở 1 trang mà thôi, nếu bạn nào hiển thị 2 widget này trên 1 trang sẽ gặp 1 số trục trặc. Tất nhiên là với những người am hiểu 1 chút về javascript thì vấn đề này ko có gì đáng ngại. Mình chỉ lưu ý với 1 số bạn chưa rành về js.

Code:

Nguồn: mothuthuat.com

Recent posts 1 cột với hiệu ứng Tooltip:

Demo:


* Để thực hiện, các bạn chỉ cần điều chỉnh 1 vài đọan code như bên dưới :
Code CSS :

Code:

#rc-posts-2-col {
width:220px; /*Thay đổi giá trị này cho phù hợp với độ rộng của sidebar ở blog của bạn*/
}
#rc-td {padding:2px; color:#CC0000; border-right:1px solid #ccc;width:220px;} /*thay đổi giá trị 220px bằng với giá trị đã thay đổi ở trên*/

Code javascript :

Code:

thay đổi giá trị của biến :
sumTitle = 60;
cho phù hợp

Thay link file javascript của thủ thuật thành link bên dưới là ok :
http://data.fandung.com/blog/demo/tooltip-recentposts/tooltip-rc-post-1cot.js (dùng cho 1 nhãn)
http://data.fandung.com/blog/demo/tooltip-recentposts/tooltip-rc-post-1cot-all.js (dùng cho cả blog)

Với 1 chút thay đổi nhỏ như vậy bạn đã có thể có 1 tiện ích recent posts with tooltip với 1 cột hiển thị.
Chúc các bạn thành công.

Code:

Nguồn: mothuthuat.com

tạo widget HTML/Javascript như nào vậy

Bạn vào Thiết kế -> Sắp xếp phần tử trang -> Thêm tiện ích -> Chọn HTML/Javascript