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

(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

Xem khác cùng chủ đề

19 nhận xét | Viết lời bình

1/15/2011 09:28:00 CH Trả lời

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!!!!

4/09/2011 06:14:00 SA Trả lời

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.

Admin
4/09/2011 08:26:00 SA Trả lời

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

4/09/2011 09:31:00 SA Trả lời

Đượ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.

4/22/2011 12:48:00 SA Trả lời

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!

Admin
4/22/2011 01:27:00 SA Trả lời

Để 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.

9/29/2011 03:50:00 SA Trả lời

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.

Admin
9/29/2011 04:12:00 SA Trả lời

@ 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.

9/29/2011 04:20:00 SA Trả lời

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ỉ.

Admin
9/29/2011 04:35:00 SA Trả lời

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.

9/29/2011 07:07:00 SA Trả lời

mình làm dc rồi thanks mọi người hehehe

7/03/2013 03:33:00 SA Trả lời

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/

Admin
7/03/2013 07:22:00 SA Trả lời

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

Admin
7/03/2013 07:54:00 SA Trả lời

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

7/13/2013 02:13:00 SA Trả lời

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 ?

7/13/2013 02:14:00 SA Trả lời

Đây là demo http://tanchau123.blogspot.com

8/05/2013 05:35:00 SA Trả lời

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

9/26/2013 03:43:00 SA Trả lời

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ố

Admin
9/26/2013 05:49:00 SA Trả lời

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

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang