6/17/2012, 18:19
Demo:
[You must be registered and logged in to see this image.]
Chèn zô viewtopic nàk:
Thêm cái này vào css để có hiệu ứng profile lồi ra
[You must be registered and logged in to see this image.]
Chèn zô viewtopic nàk:
- Code:
<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}';
var multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
//]]>
</script>
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td align="left" valign="middle" nowrap="nowrap">
<span class="nav">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle"
border="0" /></a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authreply -->
</span>
</td>
<!-- BEGIN insert_plus_menu -->
<td align="right" valign="bottom" nowrap="nowrap" width="100%">
<span class=" smallfont bold">
<script type="text/javascript">
//<![CDATA[
insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
//]]>
</script>
</span>
</td>
<!-- END insert_plus_menu -->
</tr>
</table>
<table class=" tborder" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr align="right">
<td class="catHead" colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%" class="tcat" height="28"></td>
<td align="center" nowrap="nowrap" class="tcat"><!-- google_ad_section_start -->{TOPIC_TITLE}<!--
google_ad_section_end --></td>
<td align="right" nowrap="nowrap" width="9%" class="tcat"><a
href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="alt1" colspan="2" align="right" valign="top"><span class="smallfont">{PAGINATION}</span></td>
</tr>
{POLL_DISPLAY}
<!-- BEGIN postrow -->
<!-- BEGIN displayed -->
<table class="tborder" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr><td class="thead" height="20" colspan="3"><span class="smallfont"> <img src="{postrow.displayed.MINI_TIME_IMG}"
alt="" border="0" />{postrow.displayed.POST_DATE}</span></td></tr>
<tr class="post">
<td class="alt2" valign="top" width="200" colspan="3">
<table cellpadding="0" cellspacing="6" border="0" width="100%">
<tr>
<table cellpadding="0" style="background: #ffffff url(http://i41.servimg.com/u/f41/16/81/06/32/cats13.jpg) no-repeat top right; height:235px; width:100%;" cellspacing="6" border="0" width="100%">
<td class="alt2">
<table cellSpacing="0" cellPadding="0" border="0" style="width:auto">
<td style="padding: 0px"><img src=" http://i421.photobucket.com/albums/pp296/cuachung/ava_01.png "></td>
<td style="padding: 0px" background=" http://i421.photobucket.com/albums/pp296/cuachung/ava_02.png "></td>
<td style="padding: 0px"><img src=" http://i421.photobucket.com/albums/pp296/cuachung/ava_03.png "></td>
</tr>
<tr>
<td valign="top" style="padding: 0px" background=" http://i421.photobucket.com/albums/pp296/cuachung/ava_04.png ">
<td style="padding: 0px; background-color: #ffffff" bgColor="#ffffff">
{postrow.displayed.POSTER_AVATAR}
</td>
<td style="padding: 0px" background=" http://i421.photobucket.com/albums/pp296/cuachung/ava_06.png "></td>
</tr>
<tr>
<td style="padding: 0px"><img src=" http://i421.photobucket.com/albums/pp296/cuachung/ava_07.png "></td>
<td style="padding: 0px" background=" http://i421.photobucket.com/albums/pp296/cuachung/ava_08.png "></td>
<td style="padding: 0px"><img src=" http://i421.photobucket.com/albums/pp296/cuachung/ava_09.png "></td>
</table>
</td>
<td align="left" width="55%">
<a name="{postrow.displayed.U_POST_ID}"></a><strong><font color=Red>Tớ Là</font> - {postrow.displayed.POSTER_NAME}</strong>
<span class="smallfont">
<strong> <table width="220px">
<tr>
<td>
<div class="genmed">
<fieldset class="fieldset"><legend>Tước hiệu</legend>
<FONT face="Times New Roman" size=5>
<B>
<font size=3 style="text-shadow: 0px 0px 6px rgb(800, 0, 100), 0px 0px 5px rgb(800, 0,100), 0px 0px 5px rgb(800, 0,100);" color="#ffffff">
{postrow.displayed.POSTER_RANK}</font>
</B>
</FONT>
</div></td>
</tr>
</table></strong><br>
{postrow.displayed.RANK_IMAGE}
</span>
<table cellspacing="0"
cellpadding="0"><tr><td
class="onlinetest">{postrow.displayed.ONLINE_IMG}</td></tr></table>
</td>
<td align="left" width="30%"><span class="smallfont">
<!-- BEGIN profile_field -->
<div style="padding: 2px;">
<div class="thongtintv" style="padding: 3px; border: 1px dashed rgb(153, 153, 153);">
{postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
</div></div>
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</b>
</span>
<img src="http://www.fileden.com/files/2009/2/13/2319435/vide.gif" alt="" style="width: 200px; height: 1px;" /></td>
</tr></table>
</td>
</tr>
<td height="27" width=100% background="http://www.fileden.com/files/2009/2/13/2319435/p310.gif" colspan=3>
</td>
<tr>
<td class="alt1" valign="top" width="100%" height="28" colspan="3">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="smallfont"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}"
title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}</span></td>
<td align="right" valign="top" nowrap="nowrap" class="post-options">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" nowrap="nowrap">
<!--start post cam on you ♥♥♥-->
<!-- BEGIN switch_vote_active -->
<div class="vote gensmall">
<!-- BEGIN switch_vote -->
<div class="vote-button"><a class="thumbnail" href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}"><img src="http://www.fileden.com/files/2009/2/13/2319435/post_thanks_you_hack.gif" id="Thanks button" border="0" alt="Cám ơn người này" vspace="1" /></a>
</a>
</div>
<!-- END switch_vote -->
</div>
<!-- END switch_vote_active -->
<!-- BEGIN switch_vote_active -->
<div class="vote gensmall">
<!-- BEGIN switch_vote -->
<div class="vote-button">
<a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}"></a></div>
<!-- END switch_vote -->
</div>
<!-- END switch_vote_active -->
<!--end post c?m on you ♥♥♥-->
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.WWW_IMG}
{postrow.displayed.AIM_IMG} {postrow.displayed.YIM_IMG} {postrow.displayed.MSN_IMG} {postrow.displayed.SKYPE_IMG}
<script type="text/javascript"><!--
if ( navigator.userAgent.toLowerCase().indexOf('mozilla') != -1 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; navigator.userAgent.indexOf('5.') == -1 &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;
navigator.userAgent.indexOf('6.') == -1 ) {
document.write('{postrow.displayed.ICQ_IMG}');
} else {
document.write('</td><td> </td><td valign="top" nowrap="nowrap"><div style="position:relative"><div
style="position:absolute">{postrow.displayed.ICQ_IMG}</div><div style="position:absolute;left:3px;top:-1px">{postrow.displayed.ICQ_STATUS_IMG}</div></div>');
}
//-->
</script>
<noscript>{postrow.displayed.ICQ_IMG}</noscript>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" class="hr">
<hr />
</td>
</tr>
<tr>
<td colspan="2"><!-- google_ad_section_start --><tr>
<td colspan="2">
<!-- google_ad_section_start -->
<table cellSpacing="0" cellPadding="0" border="0" style="width:auto">
<tr>
<td style="padding: 0px"><img src="http://i84.servimg.com/u/f84/14/04/65/68/admin110.png"></td>
<td style="padding: 0px" background="http://i84.servimg.com/u/f84/14/04/65/68/admin210.png"></td>
<td style="padding: 0px"><img src="http://i84.servimg.com/u/f84/14/04/65/68/admin310.png"></td>
</tr>
<tr>
<td valign="top" style="padding: 0px" background="http://i84.servimg.com/u/f84/14/04/65/68/admin410.png">
<img src="http://i84.servimg.com/u/f84/14/04/65/68/admin510.png"></td>
<td style="padding: 0px; background-color: #ffffff" bgColor="#ffffff">
<!-- google_ad_section_start -->
<font color=red>Tiêu đề: </font> {TOPIC_TITLE}<br><br>
<div class="postbody">
{postrow.displayed.MESSAGE}
</div>
<div class="clear"></div>
<!-- BEGIN switch_attachments -->
<dl class="attachbox">
<dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
<dd>
<!-- BEGIN switch_post_attachments -->
<dl class="file">
<dt>
<img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />
<!-- BEGIN switch_dl_att -->
<a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
<!-- END switch_dl_att -->
<!-- BEGIN switch_no_dl_att -->
{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
<!-- END switch_no_dl_att -->
</dt>
<!-- BEGIN switch_no_comment -->
<dd>
<em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
</dd>
<!-- END switch_no_comment -->
<!-- BEGIN switch_no_dl_att -->
<dd>
<em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
</dd>
<!-- END switch_no_dl_att -->
<dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
</dl>
<!-- END switch_post_attachments -->
</dd>
</dl>
<!-- END switch_attachments -->
<!-- google_ad_section_end -->
</td>
<td style="padding: 0px" background="http://i84.servimg.com/u/f84/14/04/65/68/admin610.png"></td>
</tr>
<tr>
<td style="padding: 0px"><img src="http://i84.servimg.com/u/f84/14/04/65/68/admin710.png"></td>
<td style="padding: 0px" background="http://i84.servimg.com/u/f84/14/04/65/68/admin810.png"></td>
<td style="padding: 0px"><img src="http://i84.servimg.com/u/f84/14/04/65/68/admin910.png"></td>
</tr>
</table>
<p align="center">
<!-- google_ad_section_end -->
{postrow.displayed.SIGNATURE}<br>
<br/>
<span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
</td>
</tr></p>
</table>
<div align="right" width="100%">{postrow.displayed.THANK_IMG}
{postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}</div>
</td>
</tr>
</table>
<!-- END displayed -->
<!-- BEGIN hidden -->
<table class="tborder" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
</tr></table>
<!-- END hidden -->
<!-- END postrow -->
<!-- BEGIN no_post -->
<table class="tborder" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr align="center">
<td class="alt1" colspan="2" height="28">
<span class="smallfont">{no_post.L_NO_POST}</span>
</td>
</tr></table>
<!-- END no_post -->
<table class=" tborder" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr align="right">
<td class="catHead" colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%"></td>
<td align="center" nowrap="nowrap"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
<td align="right" nowrap="nowrap" width="9%"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a
href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
</tr>
</table>
</td>
</tr>
</table>
<table class="tborder" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="alt2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="smallfont">{PAGE_NUMBER}</span></td>
<!-- BEGIN topicpagination -->
<td class="alt1" align="right" valign="top"><span class="smallfont">{PAGINATION}</span></td>
<!-- END topicpagination -->
</tr>
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<tr>
<td class="alt2" colspan="2" align="right" valign="top"><span class="smallfont">{S_WATCH_TOPIC}</span></td>
</tr>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
<tr>
<td class="alt2" colspan="2" align="center" style="padding:0px">
<!-- BEGIN switch_user_logged_in -->
<font size="2" face="tahoma" color="green">
<center>* Không dùng những ngôn từ thiếu lịch sự. <br>
* Bài viết sưu tầm nên ghi rõ nguồn.<br>
* Tránh spam nhảm không liên quan đến chủ đề.</font><br>
<font size="2" face="tahoma" color="red"><b>Yêu cầu viết tiếng Việt có dấu.</font></center><br>
<a name="quickreply"></a>
{QUICK_REPLY_FORM}<br/>
<!-- END switch_user_logged_in -->
</td>
</tr>
<tr>
<td style="margin:0; padding: 0;" colspan="2">
<table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
<tbody>
<!-- BEGIN show_permissions -->
<tr>
<td class="alt2" valign="top" width="25%"><span class="smallfont">{L_TABS_PERMISSIONS}</span></td>
<td class="alt1" valign="top" width="75%"><span class="smallfont">{S_AUTH_LIST}</span></td>
</tr>
<!-- END show_permissions -->
<tr>
<td class="tfoot" colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a
class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
<!-- BEGIN show_permissions -->
<td align="right" valign="middle"><span class="smallfont"><a
href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
<!-- END show_permissions -->
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="margin:0; padding: 0;" colspan="2">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
<tbody>
<tr>
<td class="tfoot" colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a
class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
<td align="right" valign="middle"><span class="smallfont"><a
href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
<span class="nav">
<!-- BEGIN switch_user_authpost -->
<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}"
align="middle" border="0" /></a>
<!-- END switch_user_authpost -->
<!-- BEGIN switch_user_authreply -->
<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
<!-- END switch_user_authreply -->
</span>
</td>
<!-- BEGIN viewtopic_bottom -->
<td align="right" nowrap="nowrap"><span class="smallfont">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit"
value="{L_GO}" /></span></td>
<!-- END viewtopic_bottom -->
<!-- BEGIN moderation_panel -->
<td align="center">
<span class="smallfont">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
</td>
<td align="center" width="250">
<span class="smallfont"> </span>
</td>
<!-- END moderation_panel -->
</tr>
</table>
</form>
<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td colspan="2" align="left" valign="top" nowrap="nowrap">
{S_TOPIC_ADMIN}
<form name="action" method="get" action="{S_FORM_MOD_ACTION}">
<input type="hidden" name="t" value="{TOPIC_ID}" />
<input type="hidden" name="sid" value="{S_SID}" />
<span class="gen">{L_MOD_TOOLS}
{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
</form>
</td>
</tr>
</table>
<!-- END viewtopic_bottom -->
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
Thêm cái này vào css để có hiệu ứng profile lồi ra
- Code:
/* profiles --------------------------------*/
.thongtintv {
position:relative;
left:0px;
color: #000000;
}
.thongtintv:hover {
left:15px;
transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease;
transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2);
}
.thongtintv {
background-color: #FFFFFF;
margin:1px 3px 2px 1px;
padding:1px 5px;
border:1px solid #CCCCCC;
}