Admin
[Code] Tab nổi bật nè...
on 12/05/2012Admin
loading...
Demo:
Hướng Dẫn
ACP ==> Modules ==> HTML & JAVASCRIPT ==> Create new HTML page
Title * : Tab Tin Nổi Bật
Do you wish to use your forum header and footer ? Không
Use this page as homepage ? Không
HTML source * :
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Featured Content Slider Using jQuery - Web Developer Plus Demos</title>
<style type="text/css">
#featured{
width:675px;
padding-right:250px;
position:relative;
border:5px solid #EFF2F7!important;
height:310px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:675px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:3px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
text-decoration:none;
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
padding-left:5px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#EFF2F7!important;
}
#featured .ui-tabs-panel{
width:675px; height:310px;
background:#fff!important; position:relative;
text-align:center;
}
#featured .ui-tabs-panel img{
width:auto; height:310px;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:240px; left:0;
height:70px;
width:100%;
background: url('http://hieuung.tatthanh.com.vn/pic/Library/Demo/634655064023906250featured-content-slider/images/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
</head>
<body>
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><span>Your Uninstaller! 2012<br/>Chương Trình Tháo Gỡ Phần Mềm Chuyên Nghiệp</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><span>TeraCopy Pro 2.2 beta FULL Key + Hướng dẫn - Tăng tốc copy dữ liệu cực nhanh</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><span>[MF] Adobe flash CS4 v10.0 Professional - Portable Full</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><span>K-Lite Codec Pack 8.6.0 - Hỗ trợ xem mọi định dạng Video </span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><span>Tạo SlideShow ảnh tự động trên Windows Media Player (WMP) </span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="https://lh6.googleusercontent.com/-xnucwKR_Uf4/T5LPbyp4KpI/AAAAAAAABlQ/llpmKqWGFS0/s488/chiplove.png" alt="" />
<div class="info" >
<h2><a target="_blank" href="http://www.khamphait.vn/t341-topic" >Your Uninstaller! Pro 7.4.2012.05 Final Full - Phần mềm gỡ bỏ ứng dụng chuyên nghiệp</a></h2>
<p>Your Uninstaller! 2012 là một chương trình tháo gỡ cài đặt hàng đầu trong ngành....<a target="_blank" href="http://www.khamphait.vn/t341-topic" >Xem tiếp</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://uphinh.truyenky.vn/out.php/i70808_teracopy-pro-v2.12.png" alt="" />
<div class="info" >
<h2><a target="_blank" href="http://www.khamphait.vn/t254-topic" >TeraCopy Pro 2.2 beta FULL Key + Hướng dẫn - Tăng tốc copy dữ liệu cực nhanh</a></h2>
<p>Công việc Ctrl - C và Ctrl - V dữ liệu diễn ra hàng ngày đối các bạn, nhưng mặc định trình Copy / Cut của Windows còn thiếu sót quá nhiều, kể cả tốc độ nữa. Vì vậy chúng ta cần tới TeraCopy....<a target="_blank" href="http://www.khamphait.vn/t254-topic" >read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://i286.photobucket.com/albums/ll111/hai_su/feature-spotlight.jpg" alt="" />
<div class="info" >
<h2><a target="_blank" href="http://www.khamphait.vn/t358-topic" >[MF] Adobe flash CS4 v10.0 Professional - Portable Full </a></h2>
<p>Adobe flash CS4 v10.0 Professional - Portable Full | 527 MB.....</p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://a.imageshack.us/img846/6868/chiplovebizklitecodecpa.jpg" alt="" />
<div class="info" >
<h2><a target="_blank" href="http://www.khamphait.vn/t354-topic" >K-Lite Codec Pack 8.6.0 - Hỗ trợ xem mọi định dạng Video </a></h2>
<p>K-Lite (Mega) Codec Pack là tập hợp các bộ mã hóa/giải mã và các công cụ liên quan. Các bộ mã hóa/giải mã cần thiết cho việc mã hóa và/hay giải mã (chơi) các định dạng phim.....</p>
</div>
</div>
<!-- 5 Content -->
<div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://www.nguoihoian.info/images/upload/9a5f6955bac7c2ac64d12d92113fba92.jpg" alt="" />
<div class="info" >
<h2><a target="_blank" href="http://www.khamphait.vn/t195-topic#492" >Tạo SlideShow ảnh tự động trên Windows Media Player (WMP)</a></h2>
<p>Vừa chơi nhạc vừa ngắm “girl xinh” hoặc các bức ảnh của chính bạn ngay trên cửa sổ Windows Media Player (WMP) ai mà chẳng muốn....</p>
</div>
</div>
</div>
</body>
</html>
Display ==> Templates ==> Quản Lý Tổng Thể ==> index_body ==> Chèn codes sau bên dưới
- Code:
{JAVASCRIPT}
- Code:
<div class="main dungyen"><div class="main-head"><div class="page-title" style="float:left"><h2>Bài Nổi Bật <span class="loading" style="display:none">[LOADING_LASTEST_TOPIC.....]</span></h2></div><div style="float:right; top: 5px; position: absolute; right: 5px;"><span class="collapse" style="float:right" id="fmvicollapse1"><a href="javascript:dongmo();" alt="fmClose"><img alt="[-]" src="http://i48.servimg.com/u/f48/16/58/89/73/collap12.png" title="[-]"/></a><a href="javascript:dongmo();" style="display:none" alt="fmOpen"><img alt="[+]" src="http://i48.servimg.com/u/f48/16/58/89/73/collap11.png" title="[+]"/></a></span></div></div><div class="main-content" align="center"><iframe src="http://chiaseonline.us.to/h30-page" align="center" width="100%" height="340px" style="border:0px inset;"></iframe></div></div><div class="main dungyen"><div class="main-head"><div class="page-title" style="float:left">
Tìm http://www.hotrofm.com/h6-page rồi thay bằng link HTML vừa tạo.
No Comment.