- Demo: c3zone
- Đầ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 -->
<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 -->
- Do host ảnh công cộng nên để đề phòng trường hợp hết bandwidth các bạn nên download gói ảnh dưới đây và upload lại - kể cả file js (file đính kèm)
Code từ VD2J Bottom Bar - Edit by Việt K