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

Điểm 4.6/5 dựa vào 87 đánh giá

(Traidatmui.com) - Một thủ thuật khá hay được mothuthuat.com phát triển đó là tạo tiện ích "Recent posts" với 2 cột cùng hiệu ứng Tooltip. Để chia sẽ đến các blogger có thể biết và thêm tiện ích này cho blog của mình, hôm nay mình xin chia sẽ lại thủ thuật này. Ở đây mình không sử dụng link css mà chèn hẳn code vào template để tránh tình trạng host bị die. Điều này cũng có thể giúp tiện ích này load nhanh hơn khi sử dụng host không ổn định hay bị lỗi.


Hình ảnh minh họa
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (hay bố cục)
3. Chọn chỉnh sửa HTML
4. Chèn code bên dưới vào trước thẻ ]]></b:skin>
/*Tooltip*/
#osdhtmltooltip{
border: #999 1px solid;
padding: 4px;
font-size: 10pt;
z-index: 100;
left: -300px;
visibility: hidden;
width: 350px;
font-family: Arial;
position: absolute;
background-color: #fcfee4;
text-align: left;
}
#osdhtmltooltip img{
float: left;
padding: 3px;
border: solid 1px #FFF;
margin: 2px;
}
#osdhtmltooltip h3{
color: #000;
padding: 2px;
margin: 0px;
font-weight: bold;
text-transform: none;
text-decoration: none;
}
#osdhtmltooltip span{
color: #999;
font-style: italic;
}
#osdhtmltooltip div{
color: #000;
}
#osdhtmlpointer{
z-index: 101;
left: -300px;
visibility: hidden;
position: absolute;
}

#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;
margin:0px;
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:#ff0000; 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 {color:#ff0000;text-decoration:none;}
#rc-td a:hover {text-decoration:underline;}

5. Save template lại và trở về phần tử trang
6. Tạo 1 HTML/Javascript và thêm vào code bên dưới
<script src="http://data-traidatmui.appspot.com/scripts/System_Tooltip.js" type="text/javascript"></script>
<script type="text/javascript">
numposts = 12; //số bài viết hiển thị trong tiện ích
postcount = 400; //số kí tự của đọan nội dung tóm tắt bài viết
sumTitle = 40; // số kí tự của tiêu đề bài viết
colortitle = "#555";
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)
nocmtext = "No Comment";
cmtext = "Comments";
posttext = "Posted in";
label = "Advanced blogger";
home_page = "http://www.traidatmui.com/";
</script>
<div id="rc-posts-2-col"><h3>Recent Posts with tooltip</h3><div id="rc-posts-loading"><img align='absmiddle' src='http://lh6.ggpht.com/_btztxrwc9ik/tsw3lpdf6yi/aaaaaaaage0/lkhkccqnwvw/loading-related.gif'/></div>
<script src="http://data-traidatmui.appspot.com/scripts/tooltip-rc-post-2cot.js" type="text/javascript"></script>
</div>

Bạn hãy thay tên nhãn (Advanced blogger) và địa chỉ (http://www.traidatmui.com/) thành tên nhãn và địa chỉ blog của bạn.

7. Sau khi chỉnh sửa xong bạn save tiện ích lại.

Chúc bạn thành công
Theo mothuthuat.com

Loading...

19 nhận xét

  1. CHUA CO TRANG BLOG NAO CHO BAN LIEN KET LOGO O DAU TRANG => DE NHIN DE THAY DE QUANG CAO NHU OXIVN.COM => http://www.oxivn.com/ THAM GIA NGAY HOM NAY DE DUOC DIEU DO!!!!

    Trả lờiXóa
  2. T làm ko được bạn ơi, để cái nhãn và cái địa chỉ của bạn thì được, nhưng đổi sang địa chỉ và nhãn của t thì ko hoạt động.

    Trả lờiXóa
  3. Bạn phải thay tên nhãn chính xác và sau địa chỉ blog có dấu "/" bạn thử lại nhe

    Trả lờiXóa
  4. Được rồi bạn ah'...Cần phải sửa lại số bài Post trong widget. Do lable của t ko đủ 12 bài nên ko hiển thị, t chỉnh lại 10 và đã chạy tốt.

    Trả lờiXóa
  5. Cái label = "Advanced blogger"; làm sao để cho nó hiển thị tự động vậy, chứ để như vầy thì chỉ có 1 chuyên mục được cập nhật thôi chứ đâu có cho cả Blog... Bác có cách thì chỉ em với. Thank!

    Trả lờiXóa
  6. Để hiển thị cho tất cả bài viết thì bạn thay link http://traidatmui-tips.googlecode.com/files/tooltip-rc-post-2cot.js trong code trên thành link bên dưới http://traidatmui-tips.googlecode.com/files/tooltip-rc_allpost-2cot.js và có thể bỏ phần nhãn đi rồi bạn.

    Trả lờiXóa
  7. Nhờ TDM chỉ giùm cách thay đổi kích thước phần nội dung của thủ thuật này. Mình chỉ thay đổi được độ rộng của khung chứa tiêu đề thôi. Mình thử chỉnh các biến 350 và 320 trên rồi mà không được. Nhờ TĐM xem giùm. Thêm một cái nữa là phần tóm tắt bài viết khi rê chuột vào nằm bị lệch sang phải rất nhiều không biết sao nữa.

    Trả lờiXóa
  8. @ Hoàng Đức Hoài: Để thay đổi độ rộng của tiện ích bạn phải thay đổi đồng loạt các phần Width để tránh lệch tiện ích ở phần

    #rc-posts-2-col {
    width:320px;
    }



    #rc-td {padding:2px; color:#ff0000; border-right:1px solid #ccc;
    width:160px;}

    Phần width trong #rc-td chính là độ rộng mỗi cột và nó bằng độ rộng ở phần #rc-posts-2-col chia 2. Nếu bạn có thêm thuộc tính margin trong #rc-td bạn nhớ trừ khoảng cách đó ra mới phù hợp nhe.

    Trả lờiXóa
  9. cảm ơn TDM nhiều mình làm được rồi. Còn lỗi phần tóm tắt bị lệch hẳn ra ngoài khung tiện ích thì mình chữa lỗi sao nhỉ.

    Trả lờiXóa
  10. Phần mô tả bạn tùy chỉnh độ rộng ở #osdhtmltooltip{ và vị trí là left:-300px; trong phần đó, bạn chỉnh sửa cho phù hợp.

    Trả lờiXóa
  11. mình làm dc rồi thanks mọi người hehehe

    Trả lờiXóa
  12. anh em muốn xóa cột thứ 3 : từ trái sang ( cột tên nhãn, Facebook với quảng cáo ) để blog còn lại 2 cột thì làm thế nào : giống như mẫu này nè

    http://news-v9-share123vn.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Mẫu đó là do bên mình thiết kế nhưng do bạn đó không tôn trọng quyền thiết kế đi chia sẻ lại thôi. Mình chỉ hỗ trợ và đảm bảo sự ổn định của template khi đó là khách hàng mua template từ bên mình thôi. Mình sẽ không hỗ trợ bất kỳ điều gì liên quan đến template nếu không phải là khách hàng mua template từ bên mình. Mong bạn hiểu điều này nhé. Đây là mẫu gốc http://bloggertemplate.traidatmui.com/2013/01/m-bnews-template.html

      Xóa
    2. Mẫu đó là do bên mình thiết kế nhưng do bạn đó không tôn trọng quyền thiết kế đi chia sẻ lại thôi. Mình chỉ hỗ trợ và đảm bảo sự ổn định của template khi đó là khách hàng mua template từ bên mình thôi. Mình sẽ không hỗ trợ bất kỳ điều gì liên quan đến template nếu không phải là khách hàng mua template từ bên mình. Mong bạn hiểu điều này nhé. Đây là mẫu gốc http://bloggertemplate.traidatmui.com/2013/01/m-bnews-template.html

      Xóa
  13. Thủ thuật hay ! Sẵn tiện cho mình hỏi tí nhé: mình làm được rồi, nhưng mà phần tooltips hiện lên lại bị trùng nhau - nghĩa là chỉ hiện có 1 mẫu tooltips theo kiểu lấy mẫu tooltips ở script cuối cùng làm chuẩn.
    Bạn có cách nào khắc phục không ?

    Trả lờiXóa
  14. Đây là demo http://tanchau123.blogspot.com

    Trả lờiXóa
  15. em muốn làm tooltip cho phần bài đăng trong blog giống như mấy trang bán hàng thì phải làm thế nào ạ,em cam on a trước

    Trả lờiXóa
  16. Hình như ây giờ k làm theo cách này đc. Mình làm y hệt mà k đc. Dù đã thay đổi chính xác các thông số

    Trả lờiXóa
    Trả lời
    1. Bạn nói rỏ hơn là thay đổi thông số nào mà không được bạn.

      Xóa