Trình chiếu những bài viết nổi bật nhất trong website/webblog của bạn theo một kiểu độc đáo có thể thu hút sự chú ý của người lướt web. Sử dụng kỹ thuật trình chiếu nội dung tự động là một trong những kỹ thuật giúp tiết kiệm không gian web. Việc sử dụng thư viện jQuery UI có thể giúp cho kiểu trình chiếu trở nên mềm mại và đẹp mắt hơn.
Sau đây xin giới thiệu một kiểu trình chiếu như vậy. Xem Demo và thực hiện theo các bước như bên dưới.
1. Đặt phần code sau đây vào trước thẻ </head>. Áp dụng cho cả website và Blogger.
2. Thiết lập cấu trúc HTML như bên dưới và đặt vào phần thân của trang web nằm giữa 2 thẻ <body>, </body>. Đối với Blogger thì đặt vào một tiện ích HTML/JavaScript.
Thủ thuật này sẽ khá phức tạp đối với một người mới bước chân vào nghiên cứu CSS, HTML, Javascript, jQuery. Nếu bạn gặp rắc rối, xin vui lòng để lại câu hỏi để Admin gỡ rối nhé.
Theo Webdeveloperplus
Sau đây xin giới thiệu một kiểu trình chiếu như vậy. Xem Demo và thực hiện theo các bước như bên dưới.
1. Đặt phần code sau đây vào trước thẻ </head>. Áp dụng cho cả website và Blogger.
<style type="text/css">
#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px; overflow:hidden;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px; height:250px;
overflow:auto;
overflow-x:hidden;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
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{
display:block;
height:60px; text-decoration:none;
color:#333; background:#fff;
line-height:20px; outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('http://demo.webdeveloperplus.com/featured-content-slider/images/selected-item.gif ') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
bottom:0; left:0;
height:70px;
background: url('http://demo.webdeveloperplus.com/featured-content-slider/images/transparent-bg.png');
}
#featured .ui-tabs-panel .info a.hideshow{
position:absolute; font-size:11px; font-family:Verdana; color:#f0f0f0; right:10px; top:-20px; line-height:20px; margin:0; outline:none; background:#333;
}
#featured .info h2{
font-size:1.2em; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0; font-weight:normal;
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>
#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px; overflow:hidden;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px; height:250px;
overflow:auto;
overflow-x:hidden;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
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{
display:block;
height:60px; text-decoration:none;
color:#333; background:#fff;
line-height:20px; outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('http://demo.webdeveloperplus.com/featured-content-slider/images/selected-item.gif ') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
bottom:0; left:0;
height:70px;
background: url('http://demo.webdeveloperplus.com/featured-content-slider/images/transparent-bg.png');
}
#featured .ui-tabs-panel .info a.hideshow{
position:absolute; font-size:11px; font-family:Verdana; color:#f0f0f0; right:10px; top:-20px; line-height:20px; margin:0; outline:none; background:#333;
}
#featured .info h2{
font-size:1.2em; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0; font-weight:normal;
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>
2. Thiết lập cấu trúc HTML như bên dưới và đặt vào phần thân của trang web nằm giữa 2 thẻ <body>, </body>. Đối với Blogger thì đặt vào một tiện ích HTML/JavaScript.
<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"><img src="images/image1-small.jpg" alt="" /><span>Tieu de bai viet 1</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>Tieu de bai viet 2</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>Tieu de bai viet 3></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Tieu de bai viet 4</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Tieu de bai viet 1</a></h2>
<p>Noi dung tom tat cho bai viet 1....<a href="#" >Read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Tieu de bai viet 2</a></h2>
<p>Noi dung tom tat cho bai viet 2....<a href="#" >Read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Tieu de bai viet 3</a></h2>
<p>Noi dung tom tat cho bai viet 3....<a href="#" >Read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Tieu de bai viet 4</a></h2>
<p>Noi dung tom tat cho bai viet 4....<a href="#" >Read more</a></p>
</div>
</div>
</div>
Trong phần HTML ở trên, các liên kết đánh dấu màu đỏ là liên kết ảnh đại diện, các liên kết đánh dấu màu xanh là liên kết ảnh với kích thước lớn.<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" /><span>Tieu de bai viet 1</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" /><span>Tieu de bai viet 2</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>Tieu de bai viet 3></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Tieu de bai viet 4</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Tieu de bai viet 1</a></h2>
<p>Noi dung tom tat cho bai viet 1....<a href="#" >Read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Tieu de bai viet 2</a></h2>
<p>Noi dung tom tat cho bai viet 2....<a href="#" >Read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Tieu de bai viet 3</a></h2>
<p>Noi dung tom tat cho bai viet 3....<a href="#" >Read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Tieu de bai viet 4</a></h2>
<p>Noi dung tom tat cho bai viet 4....<a href="#" >Read more</a></p>
</div>
</div>
</div>
Thủ thuật này sẽ khá phức tạp đối với một người mới bước chân vào nghiên cứu CSS, HTML, Javascript, jQuery. Nếu bạn gặp rắc rối, xin vui lòng để lại câu hỏi để Admin gỡ rối nhé.
Theo Webdeveloperplus