Home
News
Latest images
Search
Register
Log in
[Code] Facebook bottom bar
Tường nhà
Bài viết
Kết bạn
Tài sản
![[Code] Facebook bottom bar 24286586](https://2img.net/r/ihimizer/img823/1438/24286586.png)
![[Code] Facebook bottom bar 96655087](https://2img.net/r/ihimizer/img294/3543/96655087.png)
Đầu tiên chèn đoạn sau vào CSS
- Code:
#mudimPanel {display: none;}
.tipsy { padding: 5px; font-size: 10px; opacity: 0.9; filter: alpha(opacity=90); background-repeat: no-repeat; }
.tipsy-inner { padding: 4px 5px; background-color: black; color: white; max-width: 600px; text-align: center; }
.tipsy-north { background-image:
url(http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/tipsy-north.gif);
background-position: top center; }
.tipsy-south {
background-image:
url(http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/tipsy-south.gif);
background-position: bottom center; }
.tipsy-east {
background-image:
url(http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/tipsy-east.gif);
background-position: right center; }
.tipsy-west {
background-image:
url(http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/tipsy-west.gif);
background-position: left center; }
#bar_bottom {
position: fixed;
bottom: 0px;
left: 20px;
right: 20px;
height: 25px;
padding:0px;
margin:0px;
vertical-align:bottom;
background:#E7DFE7 url(http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/bar_bottom_bg.png) 0 0 repeat-x;
border-left:1px solid #b5b5b5;
border-right:1px solid #b5b5b5;
}
.ntmin, .ntmin:hover {
float: right;
width: 18px;
height: 18px;
background: transparent url(http://css.me.zdn.vn/images/notifications/ntmin.gif) no-repeat 0 0;
cursor: pointer;
}
.ntmin:hover {
background-position: -18px 0;
}
.bar_float {float:left; padding:5px 0px 2px 0px; border-right:1px solid #b5b5b5;text-decoration: none}
.bar_float a{padding:9px 5px 5px 5px; border:0px; text-decoration: none}
.bar_float a:hover{padding:9px 5px 5px 5px; background:#ffffff
url(http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/bar_bottom_bg_2.png)
0 0 repeat-x; text-decoration:none; white-space:nowrap;
border:0px}
.bar_float1 {float:left; padding:5px 0px 2px 0px; font-size:11px; color:#000000; text-decoration: none}
.bar_float1 a{text-decoration:none; color:#000000;font-size:11px; padding:10px 5px 5px 5px; border:0px}
.bar_float1
a:hover{font-size:11px; color:green; padding:10px 5px 5px 5px;
background:#ffffff
url(http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/bar_bottom_bg_2.png)
0 0 repeat-x; text-decoration:none; white-space:nowrap; border:0px}
.bar_float2 {float:right; padding:5px 0px 2px 0px; border-left:1px solid #b5b5b5; text-decoration: none}
.bar_float2 a {padding:9px 5px 5px 5px; border:0px; text-decoration: none}
.bar_float2
a:hover {padding:9px 5px 5px 5px; background:#ffffff
url(http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/bar_bottom_bg_2.png)
0 0 repeat-x; text-decoration:none; white-space:nowrap; border:0px}
.bar_contents {padding-top:5px; text-align:center; text-decoration: none}
.c3z_notice_box
{ background: #ffffff; border: 1px solid #b5b5b5;}
.c3z_notice_box_head
{ background: #E7DFE7; color: #000000; border: 1px solid #ffffff; padding: 4px;}
Tiếp đó chèn đoạn sau vào cuối footer
- Code:
<script src="http://scriptfm.googlecode.com/files/tipsy.js" type="text/javascript"></script>
<!-- c3z Facebook BAR -->
<style>
#mudimPanel {display: none;}
body { font: 12px/1.4 Arial, Helvetica, sans-serif; color: #484848; }
.tipsy { padding: 5px; font-size: 10px; opacity: 0.9; filter: alpha(opacity=90); background-repeat: no-repeat; }
.tipsy-inner { padding: 4px 5px; background-color: black; color: white; max-width: 600px; text-align: center; }
.tipsy-north { background-image:
url(http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/tipsy-north.gif);
background-position: top center; }
.tipsy-south {
background-image:
url(http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/tipsy-south.gif);
background-position: bottom center; }
.tipsy-east {
background-image:
url(http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/tipsy-east.gif);
background-position: right center; }
.tipsy-west {
background-image:
url(http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/tipsy-west.gif);
background-position: left center; }
#bar_bottom {
position: fixed;
bottom: 0px;
left: 20px;
right: 20px;
height: 25px;
padding:0px;
margin:0px;
vertical-align:bottom;
background:#E7DFE7 url(http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/bar_bottom_bg.png) 0 0 repeat-x;
border-left:1px solid #b5b5b5;
border-right:1px solid #b5b5b5;
}
.ntmin, .ntmin:hover {
float: right;
width: 18px;
height: 18px;
background: transparent url(http://css.me.zdn.vn/images/notifications/ntmin.gif) no-repeat 0 0;
cursor: pointer;
}
.ntmin:hover {
background-position: -18px 0;
}
.bar_float {float:left; padding:5px 0px 2px 0px; border-right:1px solid #b5b5b5;text-decoration: none}
.bar_float a{padding:9px 5px 5px 5px; border:0px; text-decoration: none}
.bar_float a:hover{padding:9px 5px 5px 5px; background:#ffffff
url(http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/bar_bottom_bg_2.png)
0 0 repeat-x; text-decoration:none; white-space:nowrap;
border:0px}
.bar_float1 {float:left; padding:5px 0px 2px 0px; font-size:11px; color:#000000; text-decoration: none}
.bar_float1 a{text-decoration:none; color:#000000;font-size:11px; padding:10px 5px 5px 5px; border:0px}
.bar_float1
a:hover{font-size:11px; color:green; padding:10px 5px 5px 5px;
background:#ffffff
url(http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/bar_bottom_bg_2.png)
0 0 repeat-x; text-decoration:none; white-space:nowrap; border:0px}
.bar_float2 {float:right; padding:5px 0px 2px 0px; border-left:1px solid #b5b5b5; text-decoration: none}
.bar_float2 a {padding:9px 5px 5px 5px; border:0px; text-decoration: none}
.bar_float2
a:hover {padding:9px 5px 5px 5px; background:#ffffff
url(http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/bar_bottom_bg_2.png)
0 0 repeat-x; text-decoration:none; white-space:nowrap; border:0px}
.bar_contents {padding-top:5px; text-align:center; text-decoration: none}
</style>
<script type='text/javascript'>
$(function() {
$('#c3z_bar_0').tipsy({gravity: 'w'});
$('#c3z_bar_1').tipsy({gravity: 's'});
$('#c3z_bar_2').tipsy({gravity: 's'});
$('#c3z_bar_3').tipsy({gravity: 's'});
$('#c3z_bar_4').tipsy({gravity: 's'});
$('#c3z_bar_5').tipsy({gravity: 's'});
$('#c3z_bar_6').tipsy({gravity: 's'});
$('#c3z_bar_7').tipsy({gravity: 'w'});
$('#c3z_bar_8').tipsy({gravity: 'w'});
$('#c3z_bar_9').tipsy({gravity: 's'});
$('#c3z_bar_10').tipsy({gravity: 's'});
$('#c3z_bar_reg').tipsy({gravity: 's'});
$('#c3z_bar_11').tipsy({gravity: 's'});
$('#c3z_bar_12').tipsy({gravity: 'e'});
$('#c3z_bar_13').tipsy({gravity: 'e'});
$('#c3z_bar_14').tipsy({gravity: 's'});
$('#c3z_bar_15').tipsy({gravity: 's'});
$('#c3z_bar_16').tipsy({gravity: 'e'});
});
</script>
<div id="bar_bottom" style="width: %65; bottom: 0px;">
<div class="bar_float" style="width: %5;">
<a
href="/" id='c3z_bar_0' title="Về trang chủ Diễn đàn!"><img
src="http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/home.png"
width="16" height="16" border="0" /></a></div>
<div class="bar_float" style="width: %75;">
<a
id='c3z_bar_15' title="RSS!" href="/feed"><img
src="http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/feed.png"
width="16" height="16" border="0" /></a><a
href="/contact.forum" id='c3z_bar_4' title="Liên hệ!"><img
src="http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/email.png"
width="16" height="16" border="0" /></a><a
href="/memberlist.forum" id='c3z_bar_6' title="Danh sách thành
viên!"><img
src="http://i873.photobucket.com/albums/ab298/c3zskin/bottombar/group.gif"
width="16" height="16" border="0" /></a><a
href="/stats.htm" id='c3z_bar_11' title="Thống kê diễn đàn!"
target="_blank"><img
src="http://i873.photobucket.com/albums/ab298/c3zskin/bottombar/event.gif"
width="16" height="16" border="0" /></a><a id='c3z_bar_14'
title="Tìm kiếm bài viết!" target="_blank"
href="/search.forum"><img
src="http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/search.gif"
width="16" height="16" border="0" /></a></div>
<div class="bar_float1" style="width: %70"><!-- BEGIN switch_user_logged_in -->
<a href="/msg.forum?folder=inbox" id='c3z_bar_1' title="Hộp tin nhắn cá nhân!"><img
src="http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/email_open.gif"
width="16" height="16" border="0" /> Hộp tin nhắn</a><a
href="/msg.forum?mode=post" id='c3z_bar_2' title="Gửi tin cho thành
viên khác !"><img
src="http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/email_add.gif"
width="16" height="16" border="0" /> Gửi tin nhắn</a><a
href="/profile.forum?mode=editprofile&page_profil=friendsfoes"
id='c3z_bar_9' title="Danh sách bạn/thù !..."><img
src="http://i873.photobucket.com/albums/ab298/c3zskin/bottombar/market.gif"
width="16" height="16" border="0" /> Friends &
Foes</a><a id='c3z_bar_10' title="Tùy chỉnh giao diện cá
nhân"
href="/profile.forum?mode=editprofile&page_profil=preferences"><img
src="http://i873.photobucket.com/albums/ab298/c3zskin/bottombar/useredit.gif"
width="16" height="16" border="0" /> Tùy chọn cá
nhân</a><!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<a
href="profile.forum?mode=register" id='c3z_bar_reg' title="Đăng kí tài
khoản mới..."><img
src="http://i873.photobucket.com/albums/ab298/c3zskin/bottombar/lock.gif"
width="16" height="16" border="0" /> Bạn chưa đăng
nhập</a><span><img
src="http://i873.photobucket.com/albums/ab298/c3zskin/bottombar/blogs.png"
width="16" height="16" border="0" /> Hiển thị tốt nhất trên Firefox,
Google Chrome</span>
<!-- END switch_user_logged_out -->
</div>
<!-- cn notice js-->
<script language="javascript">
function cn_toggle_box(boxid)
{
if (document.getElementById(boxid).style.display == 'none')
{
document.getElementById(boxid).style.display = 'inline';
}
else
{
document.getElementById(boxid).style.display = 'none';
}
}
</script>
<!-- /cn notice js-->
<div class="bar_float2">
<a
onclick="cn_toggle_box('cn_notice_box');" style="cursor: pointer;"
id='c3z_bar_12' title="Thông báo!"><img
src="http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/notifications.gif"
width="16" height="16" border="0" /></a></div><div
class="bar_float2"><a id='c3z_bar_13' title="Bài viết mới nhất!"
href="/search.forum?search_id=activetopics"><img
src="http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/blogs.png"
width="16" height="16" border="0" /></a>
</div><div
class="bar_float2"><a id='c3z_bar_16' title="Chỉnh sửa thông tin
cá nhân!"
href="/profile.forum?mode=editprofile&page_profil=informations"><img
src="http://s873.photobucket.com/albums/ab298/c3zskin/bottombar/config.png"
width="16" height="16" border="0" /></a>
</div>
</div>
<!-- cn notice box-->
<style>
.c3z_notice_box
{ background: #ffffff; border: 1px solid #b5b5b5;}
.c3z_notice_box_head
{ background: #E7DFE7; color: #000000; border: 1px solid #ffffff; padding: 4px;}
</style>
<div
class="c3z_notice_box" id="cn_notice_box" style="display: none;
position: fixed; bottom: 24px; right: 20px; width: 210px;">
<div class="c3z_notice_box_head">
<span
class="ntmin" style="float: right; cursor: pointer; padding-top: 4px"
onclick="cn_toggle_box('cn_notice_box');"> </span>
<span class="smallfont"><font size="1"><b>• Thông báo</b></font></span>
</div>
<div style="padding: 4px; border: 0px solid #E7DFE7;" width="200">
<span class="smallfont">
<font size="1">
<b>• Forumotion</b>
<a href="/forum-f34/">• Forumotion Skin</a><br>
<a href="/forum-f57/">• Skin Gallery</a><br>
<a href="/forum-f27/">• Tips - Mods - Code</a><br>
<a href="/forum-f29/">• Q & A</a><br>
</font>
</span>
</div>
</div>
<!-- /cn notice box-->
<!-- c3z Facebook BAR -->
