Loading post navigation ...
 
 

Pro page

21
Nhận xét

Làm đẹp tiện ích Popular Posts (hiệu ứng tooltip)

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Tiện ích Popular posts là 1 tiện ích được cung cấp bởi Blogger, nó hiển thị các bài viết được xem nhiều nhất trong blog với các khoảng thời gian như : 1 tuần, 1 tháng, hay mọi lúc. Và nó cũng có 3 chế độ hiển thị : chỉ hiển thị tiêu đề, hiện thị tiêu đề và ảnh thumbnail, và thứ 3 là kiểu hiện thị đầy đủ (gồm : tiêu đề, ảnh thumbnail và trích dẫn).
Lâu rồi mới lại "nổi hứng", nên bữa nay rảnh ngồi chế lại cái tiện ích Popular posts cho nó đẹp chút. Như các bạn đã biết, tiện ích này có 3 chế độ hiển thị khác nhau. Và trong 3 chế độ này đa phần mọi người thường dùng cách hiển thị ảnh thumnnail và tiêu đề vì cách này nhìn tương đối nhất. Với cách hiển thị đầy đủ (gồm : tiêu đề, ảnh thumbnail và trích dẫn), thì cách này thường chiếm nhiều không gian của blog, do đó mà ít người dùng. Hôm nay mình sẽ áp dụng hiệu ứng tooltips cho tiện ích này, để có thể hiển thị đầy đủ nhất nôi dung của tiện ích này mà không tốn nhiều không gian của blog.


Với áp dụng này, phần trích dẫn của tiện ích sẽ hiển thị khi ta rê chuột vào tiêu đề của bài viết. Việc làm này cũng ko ảnh hưởng nhiều đến việc load tiện ích, do tooltips cũng khá nhẹ, vì thế các bạn có thể an tâm về tốc độ load.

Ở đây mình sẽ hướng dẫn 2 cách hiển thị với tooltips.

Cách 1 : Hiển thị tiêu đề và ảnh thumnail, phần trích dẫn sẽ hiển thị khi rê chuột vào tiêu đề.
Cách 2 : Chỉ hiển thị tiêu đề, khi rê chuột sẽ hiển thị ảnh thumbnail và trích dẫn.

Ảnh minh họa :
Cách 1

Cách 2

Sau đây là hướng dẫn:
1. Đầu tiên để thực hiện được thủ thuật này, blog bạn phải có tiện ích popular posts.
- Các bạn thực hiện các bước chuẩn bị như hình bên dưới.

2. Chèn code javascript và CSS cho tooltips:
- Các bạn vào phần chỉnh sửa HTML và chèn đoạn code này vào trước thẻ </head>
<style type='text/css'>
/* CSS ToolTip */
#dhtmltooltip{
border-right: #555 1px solid;
padding-right: 4px;
border-top: #555 1px solid;
padding-left: 4px;
font-size: 10pt;
z-index: 100;
filter: alpha(opacity=90);
-moz-opacity: .90;
-khtml-opacity: .90;
opacity: .90;
left: -300px;
visibility: hidden;
padding-bottom: 4px;
border-left: #555 1px solid;
padding-top: 4px;
border-bottom: #555 1px solid;
font-family: Arial;
position: absolute;
background: #ffffe0;
width: 250px;
}
#dhtmlpointer{
z-index: 101;
left: -300px;
visibility: hidden;
position: absolute;
}
/* END CSS ToolTip */
</style>
<script language='javascript' src='http://data.fandung.com/js/tooltip.js'/>

3. Như vậy đã chuẩn bị xong. bây giờ sẽ là hướng dẫn thực hiện thủ thuật.

A. Cách 1 : hiển thị ảnh thumnail và tiêu để, phần trích dẫn sẽ hiển thị khi rê chuột.

- Vào bố cục, vào chỉnh sửa code HTML, nhấp chọn mở rộng mẫu tiện ích.
- Chèn đoạn code CSS của thủ thuật vào trước dòng ]]></b:skin>
/* CSS Most View with ToolTip */
.popular-posts {display:none;}
#fdmostview {
margin:0px;
padding: 0px 5px 5px 5px;
}
#fdmostview ul {margin:0!important;}
#fdmostview li.lipopu {min-height:54px;border-bottom:1px dashed #F7AA4F;padding:5px 0 5px 0;}
#fdmostview li.lipopu img {float:left;border:1px solid #ccc;padding:1px;margin-right:4px;width:50px;}
#fdmostview ul li {list-style:none;}
/* END Most View with ToolTip */

- Tiếp tục tìm đến code của tiện ích Popular Posts. code của nó sẽ trông như bên dưới :
<b:widget id='PopularPosts1' locked='false' title='Most View' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><data:title/></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
...
...
...
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>
- và các bạn thêm code của thủ thuật vào đoạn code vừa tìm được như đoạn code highlight bên dưới :
<b:widget id='PopularPosts1' locked='false' title='Most View' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><data:title/></b:if>
<div class='widget-content popular-posts'>

<script type='text/javascript'>
var p=0;
var sumpopu = new Array();
var titlepopu = new Array();
var urlpopu = new Array();
var thumbpopu = new Array();
</script>

<ul>
<b:loop values='data:posts' var='post'>

<b:if cond='data:post.thumbnail'>
<script type='text/javascript'>
p++;
sumpopu[p]='<data:post.snippet/>';
titlepopu[p]='<data:post.title/>';
urlpopu[p]='<data:post.href/>';
thumbpopu[p]='<data:post.thumbnail/>';
</script>
<b:else/>
<script type='text/javascript'>
p++;
sumpopu[p]='<data:post.snippet/>';
titlepopu[p]='<data:post.title/>';
urlpopu[p]='<data:post.href/>';
thumbpopu[p]='http://lh6.googleusercontent.com/-8fE2X7kBhWs/Tf96WzivFHI/AAAAAAAAB0s/fItUKGW08gY/no-image.png';
</script>
</b:if>

<li>
...
...
...
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>


<div id='fdmostview'>
<ul>
<script type='text/javascript'>
//<![CDATA[
for (k=1;k<p+1;k++) {
document.write("<li class='lipopu'><img src='"+thumbpopu[k]+"' /><a href='"+urlpopu[k]+"' onmouseout='hidetip();' onmouseover='showtip('"+sumpopu[k]+"')'>"+titlepopu[k]+"</a></li>");
}
//]]>
</script>
</ul>
</div>

</b:includable>
</b:widget>

- Cuối cùng save template lại.

B. Cách 2 : chỉ hiện thị tiêu đề bài viết, ảnh thumbnail và trích dẫn sẽ hiện thị khi rê chuột vào tiêu đề.

- Vào bố cục, vào chỉnh sửa code HTML, nhấp chọn mở rộng mẫu tiện ích.
- Chèn đoạn code CSS của thủ thuật vào trước dòng ]]></b:skin>
/* CSS Most View with ToolTip */
.popular-posts {display:none;}
#fdmostview {
margin:0px;
padding: 0px 5px 5px 5px;
}
#fdmostview ul {margin:0!important;}
#fdmostview li.lipopu2 {border-bottom:1px dashed #F7AA4F;padding:5px 0 5px 0;}
#fdmostview ul li {list-style:none;}
img.imgpopu2 {float:left;border:1px solid #ccc;padding:1px;margin-right:4px;width:60px;}
/* END Most View with ToolTip */

- tương tự như cách 1, thêm đoạn code highlight bên dưới :
<b:widget id='PopularPosts1' locked='false' title='Most View' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><data:title/></b:if>
<div class='widget-content popular-posts'>

<script type='text/javascript'>
var p=0;
var sumpopu2 = new Array();
var titlepopu = new Array();
var urlpopu = new Array();
</script>

<ul>
<b:loop values='data:posts' var='post'>

<b:if cond='data:post.thumbnail'>
<script type='text/javascript'>
p++;
sumpopu2[p]='&lt;img class="imgpopu2" src="<data:post.thumbnail/>" /&gt;<data:post.snippet/>';
titlepopu[p]='<data:post.title/>';
urlpopu[p]='<data:post.href/>';
</script>
<b:else/>
<script type='text/javascript'>
p++;
sumpopu2[p]='&lt;img class="imgpopu2" src="http://lh6.googleusercontent.com/-8fE2X7kBhWs/Tf96WzivFHI/AAAAAAAAB0s/fItUKGW08gY/no-image.png" /&gt;<data:post.snippet/>';
titlepopu[p]='<data:post.title/>';
urlpopu[p]='<data:post.href/>';
</script>
</b:if>

<li>
...
...
...
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>


<div id='fdmostview'>
<ul>
<script type='text/javascript'>
//<![CDATA[
for (k=1;k<p+1;k++) {
document.write("<li class='lipopu2'><img src='http://data.fandung.com/img/icon_popular.png' /><a href='"+urlpopu[k]+"' onmouseout='hidetip();' onmouseover='showtip('"+sumpopu2[k]+"')'>"+titlepopu[k]+"</a></li>");
}
//]]>
</script>
</ul>
</div>

</b:includable>
</b:widget>

- Save template lại.


Enter your mail address:

21

Pig

anh Dũng lâu r mới thấy có bài, nhưng bài nào viết cũng hay, ngắn gọn rõ ràng và dễ làm

Dr.House

hí bóc tem phát 1 , ah bác FD hình như ghé qua blog em góp ý ( http://ghost2s.blogspot.com/2011/08/su-kien-nhanh-tay-nhan-key-ban-quyen.html?showComment=1315666749416#c8002770079415372980) mà em làm hoài cũng ko đc, bác xem giúp giùm em, với lại phần code 4 cột trên trang chủ cũng là tips của bác nên bác xem giúp làm sao để hiển thị đồng bộ màu nền với tăng thêm số cột mà không bị lỗi hả bác.

Phan Dũng

dạo này bận quá, không có thời gian viết blog. Hôm 9/9 là ngày domain và host hết hạn, a tính buông ko duy trì nữa, nhưng thấy tiếc tiếc sao đó, nên lại duy trì tiếp. thôi thì cũng ko đáng bao nhiêu tiền. Cứ duy trì để vậy, lâu lâu lại lên post 1 bài gọi là thỏa mãn đam mê :D

Nguyen Duc

Sao lại tính ko duy trì nữa, nghe buồn anh nhỉ :(

Unknown

Nếu ko thì lại cho nó quay về Fandung.blogspot.com cũng đc mà

ABV

Đợi bài mới của anh Dũng mà lâu quá trời, lúc trước thấy anh quay lại, tưởng là sẽ có nhiều bài viết mới, sau đấy lại biệt tăm luôn...:(. Thủ thuật này bên Vngreenzone.com cũng có đấy anh!
PS: Anh đổi cho em cái link liên kết nhé! http://ldv.linhdungvn.com thành http://www.linhdungvn.com

Phan Dũng

@QuyetN : tên miền thi ko có gì, chủ yếu các file js, các demo, hình ảnh ở bên host thôi.

@LinhDung ; ah, thủ thuật tooltip ở bên vngreenzone là dùng CSS hover, khác với cách của mình.

Yolks

:-* 2 cách :))

Huynh Nhat Ha

Nếu phải dùng thêm js thì dùng title có sẵn đơn giản hơn

ABV

Anh Dũng đổi link liên kết giúp em với hì hì

Phan Dũng

@Huỳnh Nhật Hà: đúng rồi, cách đó là đơn giản nhất.

@Linh Dung: hình như liên kết rồi mà. Linh Dung VnMart đó

ABV

Em muốn đổi URL liên kết anh Dũng ạ http://ldv.linhdungvn.com thành http://www.linhdungvn.com hì hì. Anh giúp em nhé!

ChoiBlogs.blogspot.com

- Mâu mâu lưu thủ thuật lại và file JS lại kẻo mất thì uổng công :)

Điện Tử ChipKool

Thủ thuật hay lắm anh Dũng,em xài thử mới được

BinhTienBeach

Hiện băng thông của host đã được nâng cấp lên gấp đôi, nhưng không hiểu sao vẫn thiếu, có thể do nhiều người dùng file js từ host mình quá

Chắc chắn là như thế rồi còn gì nữa FD à

6 mét vuông

filejs bị die rồi.ai có thì cho xin với. Cảm ơn nhé

Dânvl

Ghé qua đây xem nhé mấy you. Toàn dùng thủ thuật của FD không àh.
http://cuoigi.com

Minh Tài

:))

Unknown

Cám ơn bạn. Mình đã dùng thử nhưng không hiểu tại sao nó không hiện ra hình thumb của bài viết mà chỉ hiện dạng no image? Không biết mình có làm sai gì không, nhờ bạn giúp mình với nhé.

Unknown

Bạn Dũng ơi! Mình làm giống như bạn đã hướng dẫn, được nhưng có một lỗi là khi vào blog nó cứ bảo file tooltip.js bị gì ấy! mình không rành, mong bạn hướng dẫn mình phần đóa! Thanks bạn trước nha!

rickywhoru

mình đã đưa file js lên google doc mà vẫn bị câu lỗi file tooltip.js chỉ chạy trên fandung.com. Nản ghê :|



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home