Cân bằng chiều cao của phần main và phần sidebar

(Huynh Nhat Ha's Blog) --
Khi thiết kế Blogger, đôi khi chúng ta gặp trường hợp phần main và phần sidebar của trang blog ở một số template không có chiều cao bằng nhau, khiến cho blog thiếu sự cân đối.

Việc điều chỉnh chiều cao của phần main và phần sidebar có thể được thực hiện bằng việc sử dụng javascript khá đơn giản. Bạn chỉ việc đặt đoạn code bên dưới vào trước thẻ </head> là có thể giúp cho phần main và phần sidebar có cùng chiều cao rồi.

<!--Height Fixer Starts-->
&lt;script type=&#39;text/javascript&#39;&gt;
&lt;!--
onload=function() {

var mh = document.getElementById(&#39;main-wrapper&#39;).offsetHeight;
var sh = document.getElementById(&#39;sidebar-wrapper&#39;).offsetHeight;
if(sh&gt;mh) mh=sh;
document.getElementById(&#39;main-wrapper&#39;).style.height = document.getElementById(&#39;sidebar-wrapper&#39;).style.height = mh+ &#39;px&#39;
}
//--&gt;
&lt;/script&gt;
<!--Height Fixer Ends-->

Ở đây sử dụng code đã được mã hóa để tránh trường hợp Blogger gặp lỗi đối với các Template dạng Layout.

Ý nghĩa của code trên như sau: mh biểu thị chiều cao của phần main-wrapper (main height). Biến sh thể hiện giá trị chiều cao của phần sidebar-wrapper. Nếu sh cao hơn mh thì chỉ định chiều cao của phần cao hơn (cao hơn phần main một giá trị pixel nào đó) bằng với chiều cao của phần main cộng với giá trị pixel ở trên. Như vậy script này giúp kiểm tra chiều cao của hai phần và gán cho chiều cao của hai phần đều bằng nhau khi có một phần cao hơn.

Mở liên kết ngoài sang cửa sổ mới một cách tự động

Thông thường khi thiết kế website hay webblog, khi muốn mở liên kết ngoài sang một cửa sổ mới, chúng ta thường sử dụng giá trị target="_blank" theo như ví dụ sau đây:

<a href="http://www.blogger.com/" target="_blank">Blogger</a>

Tuy nhiên đối với cả một website hay webblog đồ sộ, cứ mỗi lần có một liên kết ngoài ta muốn mở sang một cửa sổ mới khi kích chuột vào liên kết đó thì thật là bất tiện và mất nhiều công sức.

Bằng một thủ thuật đơn giản với việc sử dụng Javascript chúng ta có thể mở các liên kết ngoài sang cửa sổ mới một cách tự động mà không cần phải sử dụng giá trị "_blank".

Bạn chỉ cần đặt đoạn code dưới đây trước thẻ </body>. Thủ thuật này sử dụng cho website thông thường và cho cả Blogspot nữa đấy. Thật tuyệt cho các Blogger.

<script type='text/javascript'>
this.blankwin = function(){
var hostname = window.location.hostname;
hostname = hostname.replace("www.","").toLowerCase();
var a = document.getElementsByTagName("a");
this.check = function(obj){
var href = obj.href.toLowerCase();
return (href.indexOf("http://")!=-1 && href.indexOf(hostname)==-1) ? true : false;
};
this.set = function(obj){
obj.target = "_blank";
obj.className = "external";
};
for (var i=0;i<a.length;i++){
if(check(a[i])) set(a[i]);
};
};



// script initiates on page load.

this.addEvent = function(obj,type,fn){
if(obj.attachEvent){
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn](window.event );}
obj.attachEvent('on'+type, obj[type+fn]);
} else {
obj.addEventListener(type,fn,false);
};
};
addEvent(window,"load",blankwin);
</script>

Đơn giản hơn, chúng ta đặt đoạn javascript trên vào một file nguồn như thế này.

<script src='http://huynhatha.250free.com/js/blankwindow.js' type='text/javascript'/>

Lưu ý bạn nên tải về file blankwindow.js và upload lên free hosting để sử dụng cho website/webblog của bạn nhé.

Hiệu ứng Lightbox cho hình ảnh sử dụng jQuery

Lightbox là một script đơn giản được dùng để tạo chế độ Preview hình ảnh trên trang web. Hôm nay xin giới thiệu hiệu ứng Lightbox của Pirolab phát triển dựa trên thư viện jQuery, có chức năng tự động chỉnh lại kích cỡ hình ảnh dự trên kích cỡ cửa sổ trình duyệt.


Hiệu ứng này tương thích với các công cụ trình duyệt như FireFox 2-3, Opera 9.0, Chrome, Safari (Mac/Windows), Internet Explorer 6-7-8.

Xem Demo.

Sau đây là các bước thực hiện:

1. Gắn các phần code dưới đây vào trước thẻ </head>.

<link href="http://www.pirolab.it/pirobox/css_pirobox/demo3/style.css" class="piro_style" media="screen" title="white" rel="stylesheet" type="text/css" />
<style type="text/css" >
.demo a{ float:left; margin:0; padding:0; margin:5px 0px 5px 19px!important; margin:5px 10px 5px 10px; display:block; border:3px solid #efefef;} .demo a:hover{ border:3px solid #fff} .demo a img{ float:left; margin:0; padding:0; margin:0; background:url(http://www.pirolab.it/pirobox/css_pirobox/bg_tms.jpg) no-repeat;} ul,li,dl,dt,dd{ list-style-type:none; margin:0; padding:0; }
</style>
<script type="text/javascript" src="http://www.pirolab.it/pirobox/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.pirolab.it/pirobox/js/pirobox.js"></script>
<script type="text/javascript">
$(document).ready(function() { $().piroBox({ my_speed: 400, //animation speed bg_alpha: 0.1, //background opacity slideShow : true, // true == slideshow on, false == slideshow off slideSpeed : 4, //slideshow duration in seconds(3 to 6 Recommended) close_all : '.piro_close,.piro_overlay'// add class .piro_overlay(with comma)if you want overlay click close piroBox }); });
</script>

Trong các phần code trên, bạn có thể chỉnh các thông số cho tốc độ slide hình ảnh.

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>.

<div style="float:left; width:550px; display:block;">
<h2>Click chuột trái vào Thumbnail để phóng lớn hình</h2>
<div class="demo"><a href="/images/1.jpg" class="pirobox_gall" title="Mo ta anh 1"><img src="/images/1s.jpg" /></a></div>
<div class="demo"><a href="/images/2.jpg" class="pirobox_gall" title="Mo ta anh 2"><img src="/images/2s.jpg" /></a></div>
<div class="demo"><a href="/images/3.jpg" class="pirobox_gall" title="Mo ta anh 3"><img src="/images/3s.jpg" /></a></div>
<div class="demo"><a href="/images/4.jpg" class="pirobox_gall" title="Mo ta anh 4"><img src="/images/4s.jpg" /></a></div>
...
</div>

Chú ý: Các file ảnh đánh dấu màu xanh là ảnh lớn cho chế độ Preview, các file ảnh đánh dấu màu đỏ là ảnh thumnail đại diện, thêm thuộc tính mô tả ảnh nếu cần. Bạn có thể thêm số lượng ảnh tùy thích và chỉnh sửa cấu trúc HTML cho phù hợp.

Kỹ thuật load ảnh trước dùng Javascript

Kỹ thuật load ảnh trước là một cách để cải thiện tốc độ tải trang web. Khi ảnh được load trước trong công cụ trình duyệt, người đọc có thể lướt qua trang web của bạn nhanh chóng hơn. Kỹ thuật này đặc biệt hữu ích cho các trang web có bộ sưu tập hình ảnh.

Sau đây xin giới thiệu một kỹ thuật giúp load ảnh trước sử dụng Javascript.

Đặt phần code dưới đây vào trước thẻ <body>.

<div class="hidden">
<script type="text/javascript">
<!--//--><![CDATA[//><!--
var images = new Array()
function preload() {
             for (i = 0; i < preload.arguments.length; i++) {
                         images[i] = new Image()
                         images[i].src = preload.arguments[i]
            }
}
preload(
            "http://yourdomain.com/gallery/image-001.jpg",
            "http://yourdomain.com/gallery/image-002.jpg",
            "http://yourdomain.com/gallery/image-003.jpg"
)
//--><!]]>
</script>
</div>

Bạn cần phải thay đường dẫn cho các file ảnh cần load trước. Với việc thêm đoạn thẻ <div class="hidden"> trên vào ngay dưới thẻ <body> của trang web hoặc blog của bạn, khi trình duyệt đọc tới thẻ div này, nó sẽ load trước toàn bộ những ảnh được liệt kê trong danh sách trên vào trong bộ đệm của trình duyệt.

Tạo plugin Twitter cập nhật tweet mới nhất bằng jQuery

Bạn muốn theo dõi những bình luận mới nhất từ trang Twitter? Plugin Twitter sẽ giúp tải những bình luận mới nhất của người dùng Twitter trên toàn cầu với chức năng lọc ngôn ngữ thô tục để tránh những nội dung xấu trên trang web của bạn.Plugin này còn có chức năng hỗ trợ tìm kiếm nhiều người dùng, hiển thị hình Avatar và đặc biệt là không làm chậm trang web khi các tweet đang hạ tải.

Xem Demo.
Sau đây là các bước cài đặt:

1. Đặt các file jQuery và javasctipt bên dưới vào trước thẻ </head>.

<style type="text/css">
/*JUITTER PLUGIN CSS*/
#juitter{width:550px;float:left;}
#juitterSearch{clear:both;padding:7px 0 5px 0;}
#juitterSearch P{font-size:1.2em;color:#2CAF1D}
#juitterSearch INPUT{padding:4px;border:solid 1px #666;width:250px;color:#666}

#juitterContainer{} /*Juitter container*/

#juitterContainer .twittList{margin:0;padding:0;} /* UL that will contain the list of tweets */

/* Bellow the list of tweets "<li>" */

#juitterContainer .twittLI{list-style:none;background:#EEFDEA;margin:0;padding:5px 0 0 0;border-bottom:dashed 1px #CAF8C9;padding:3px;clear:both;height:55px;}
#juitterContainer .twittList SPAN.time{color:#777;font-size:0.9em}
#juitterContainer .twittList A{color:#006600;} /*Links inside the tweets list */

/* Bellow the CSS for the avatar image */

#juitterContainer .juitterAvatar{float:left;border:solid 1px #D3EECA;background:#FFF;margin-right:5px;padding:2px;width:48px;;height:48px;}

#juitterContainer .jRM{float:right;clear:both} /*read it on twitter link*/

#juitterContainer .extLink{} /*CSS for the external links*/

#juitterContainer .hashLink{} /*CSS for the hash links*/

/*end of Juitter CSS*/
</style>

<script language="javascript" src="http://juitter.com/app/js/jquery-1.3.1.min.js" type="text/javascript"></script>

<script language="javascript" src="http://juitter.com/app/js/jquery.juitter.js" type="text/javascript"></script>

<script language="javascript" src="http://juitter.com/app/js/system.js" type="text/javascript"></script>

Các các file trên thì file jquery-1.3.1.min.js là phần lõi jQuery để làm cho plugin hoạt động, file jquery.juitter.js là file lõi và cấu hình plugin, file system.js là file mẫu về cách làm cho plugin hoạt động trên trang web của bạn.

Tiếp đến cần tạo phần chứa nội dung plugin, đặt thành phần div với định dạng id như sau:

<div id="juitter">
<form method="post" id="juitterSearch" action="">
<p>Search Twitter: <input type="text" class="juitterSearch" value="Type a word and press enter" />
</p>
</form>
<div id="juitterContainer"></div>
</div>

Đặt phần code ở trên vào phần thân của trang web (giữa 2 thẻ <body>, </body>).

Phân trang cho bài viết sử dụng jQuery

Với sự hỗ trợ của jQuery, việc phân trang ngay trong bài viết giúp cho không gian trong trang web được bố trí hài hòa hơn nhờ thanh Pagination khá giống với phân trang cho cả một website hoặc webblog.

Xem Demo.

Trong thủ thuật này chúng ta cần dùng thẻ <div> để tạo các trang nhỏ và thẻ
để phân bố đều các đoạn văn trong trang nhỏ ấy.

Trước tiết cần đặt phần code CSS và Javascript vào trước thẻ </div>.

<style type='text/css'>
.pagination {
font-size: 80%;
}
.pagination a {
text-decoration: none;
border: solid 1px #AAE;
color: #15B;
}
.pagination a, .pagination span {
display: block;
float: left;
padding: 0.3em 0.5em;
margin-right: 5px;
margin-bottom: 5px;
}
.pagination .current {
background: #26B;
color: #fff;
border: solid 1px #AAE;
}
.pagination .current.prev, .pagination .current.next{
color:#999;
border-color:#999;
background:#fff;
}
#Searchresult {
margin-top:15px;
margin-bottom:15px;
border:solid 1px #eef;
padding:5px;
background:#eef;
width:40%;
}
#Searchresult p { margin-bottom:1.4em;}
</style>
<script type="text/javascript" src="http://d-scribe.de/webtools/jquery-pagination/lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="http://d-scribe.de/webtools/jquery-pagination/lib/jquery_pagination/jquery.pagination.js"></script>
<script type="text/javascript">

// This is a very simple demo that shows how a range of elements can
// be paginated.

/**
* Callback function that displays the content.
*
* Gets called every time the user clicks on a pagination link.
*
* @param {int}page_index New Page index
* @param {jQuery} jq the container with the pagination links as a jQuery object
*/
function pageselectCallback(page_index, jq){
var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone();
$('#Searchresult').empty().append(new_content);
return false;
}

/**
* Callback function for the AJAX content loader.
*/
function initPagination() {
var num_entries = $('#hiddenresult div.result').length;
// Create pagination element
$("#Pagination").pagination(num_entries, {
num_edge_entries: 2,
num_display_entries: 8,
callback: pageselectCallback,
items_per_page:1
});
}

// Load HTML snippet with AJAX and insert it into the Hiddenresult element
// When the HTML has loaded, call initPagination to paginate the elements
$(document).ready(function(){
initPagination();
});



</script>

* Chú ý: Dòng items_per_page:1, số 1 thể hiện 1 thành phần div trên mỗi trang, bạn có thể đặt 2, 3, 4, ... tùy theo số lượng thành phần div cần hiển thị.

Ở phần nội dung phân trang, thiết lập cấu trúc HTML như sau:

<div id="Pagination"></div>
<br style="clear:both;" />
<div id="Searchresult">
This content will be replaced when pagination inits.
</div>

<!-- Container element for all the Elements that are to be paginated -->
<div id="hiddenresult" style="display:none;">
<div class="result">
<p>Nội dung đoạn văn bản thứ 1 – trang 1.</p>
<p>Nội dung đoạn văn bản thứ 2 – trang 1.</p>
</div>
<div class="result">
<p>Nội dung đoạn văn bản thứ 1 – trang 2</p>
<p>Nội dung đoạn văn bản thứ 2 – trang 2.</p>
</div>
<div class="result">
<p>Nội dung đoạn văn bản thứ 1 – trang 3</p>
<p>Nội dung đoạn văn bản thứ 2 – trang 3.</p>
</div>
</div>

(Còn cập nhật)

Tạo hiệu ứng Tooltip trong trường dữ liệu của Form

Tooltip là một thành phần giao thức người dùng khá phổ biến. Nó được sử dụng để tạo hiệu ứng con trỏ. Người dùng web rê con trỏ qua một đối tượng mà không kích trỏ vào nó, thì hiệu ứng tooltip xuất hiện với một khung nhỏ chứa thông tin về đối tượng đã được rê chuột.

Chúng ta có thể sử dụng tooltip trong những trường dữ liệu (field) của một Form. Bạn có thể di chuyển giữa các trường bằng bàn phím (sử dụng phím TAB) hoặc bằng chuột.

Xem Demo.

Các bước thực hiện như sau:

1. Bước 1: Đặt code CSS vào phần đầu của trang web, giữa 2 thẻ <head>, </head>.

<style type="text/css">

/* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;

/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
#myform {
border:1px outset #ccc;
background:#fff url(http://static.flowplayer.org/img/global/gradient/h600.png) repeat-x;
padding:20px;
margin:20px 0;
width:350px;
font-size:12px;
-moz-border-radius:4px;
}

#myform h3 {
text-align:center;
margin:0 0 10px 0;
}

/* http://www.quirksmode.org/css/forms.html */
#inputs label, #inputs input, #inputs textarea, #inputs select {
display: block;
width: 150px;
float: left;
margin-bottom: 20px;
}

#inputs label {
text-align: right;
width: 75px;
padding-right: 20px;
}

#inputs br {
clear: left;
}
</style>

2. Bước 2: Đặt đoạn code jQuery bên dưới vào trước thẻ </head>.
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>

3. Bước 3: Đặt đoạn code jQuery dưới đây vào trước thẻ </body>.

<script>
// execute your scripts when the DOM is ready. this is a good habit
$(function() {



// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({

// place tooltip on the right edge
position: "center right",

// a little tweaking of the position
offset: [-2, 10],

// use the built-in fadeIn/fadeOut effect
effect: "fade",

// custom opacity setting
opacity: 0.7

});
});
</script>

4. Bước 4: Thiết lập cấu trúc HTML như dưới đây và đặt vào phần thân của trang web (giữa 2 thẻ <body>, </body>).

<form id="myform" action="#">

<h3>Registration Form</h3>

<div id="inputs">

<!-- username -->
<label for="username">Username</label>
<input id="username" title="Must be at least 8 characters."/><br />

<!-- password -->
<label for="password">Password</label>
<input id="password" type="password" title="Try to make it hard to guess." /><br />

<!-- email -->
<label for="email">Email</label>
<input id="email" title="We won't send you any marketing material." /><br />

<!-- message -->
<label for="body">Message</label>
<textarea id="body" title="What's on your mind?"></textarea><br />

<!-- message -->
<label for="where">Select one</label>
<select id="where" title="Select one of these options">
<option>-- first option --</option>
<option>-- second option --</option>
<option>-- third option --</option>
</select>
<br />
</div>

<!-- email -->
<label>
I accept the terms and conditions
<input type="checkbox" id="check" title="Required to proceed" />
</label>

<p>
<button type="button" title="This button won't do anything">Proceed</button>
</p>

</form>

Những dòng chữ màu đỏ là phần nội dung hiển thị mà bạn cần sửa đổi cho hiệu ứng theo nhu cầu của bạn.

Tạo nút trượt lên đầu và cuối trang web bằng jQuery

Dưới đây là một cách tạo nút lên đầu hoặc cuối trang web bằng 1 cái nhấp chuột đơn giản. Thủ thuật này sử dụng các sự kiện cuộn đặc biệt qua thư viện jQuery từ James Padolsey. Có 2 nút cố định nằm ở đáy bên trái trang web, mỗi nút có chức năng di chuyển xuống hoặc lên trong trang web. Nếu bạn kéo thanh cuộn trang web thì 2 nút này mờ ẩn dần và cho hiệu ứng mềm mại đẹp mắt.

Xem demo.

Sau đây là các bước thực hiện thủ thuật.

1. Bước 1: Dán đoạn code CSS này vào trước thẻ </head> (áp dụng cho cả Blogger).

<style type="text/css">
.nav_up{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://www.tympanus.net/scrollupdown/images/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
left:30px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.nav_down{
padding:7px;
background-color:white;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://www.tympanus.net/scrollupdown/images/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
left:70px;
white-space:nowrap;
cursor: pointer;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>

Bước 2: Dán toàn bộ đoạn code bên dưới vào trước thẻ </body> (áp dụng cho cả Blogger). Đối với Blogger có thể dán toàn bộ đoạn code vào một widget HTML/JavaScript nằm dưới phần footer.

<script src="http://www.tympanus.net/scrollupdown/jquery-1.3.2.js" type="text/javascript"></script>
<script src="http://www.tympanus.net/scrollupdown/scroll-startstop.events.jquery.js" type="text/javascript"></script>
<script>
$(function() {
var $elem = $('#content');

$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');

$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});

$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}
);
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>

Hy vọng với thủ thuật này, các bạn sẽ giúp ích nhiều cho trang web của bạn.

Liệt kê tiêu đề bài viết mới nhất cho 1 nhãn

Nếu bạn chịu khó tìm kiếm trên Google thì sẽ tìm thấy một số bài viết hướng dẫn cách tạo widget bài viết mới nhất có ảnh thumbnail cho cả Blog và cho riêng 1 nhãn nào đó. Đôi khi bài viết mới nhất cho riêng 1 nhãn mà chỉ cần liệt kê tiêu đề bài viết cũng rất cần thiết. Thủ thuật sau đây sử dụng feed chuyên biệt theo 1 nhãn với định dạng JSON kết hợp Javascript. Nó giúp liệt kê tiêu đề những bài viết mới nhất cho 1 nhãn nào đó trên Blogger. Dưới đây là những bước cài đặt widget.

1. Đăng nhập vào Blogger.

2. Vào Bảng điều khiển (Dashboard) >> Thêm tiện ích (Add A Gadget) >> Chọn HTML/Javascript .

3. Đặt tiêu đề cho widget của bạn. Dán đoạn code bên dưới vào phần nội dung của widget.

<!-- Recent Posts by Label Start -->
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {

if (json.feed.entry[i].link[j].rel == 'alternate') {

break;

}

}

var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";

document.write(item);
}

document.write('</ul>');
}
</script>
<script src="http://yourname.blogspot.com/feeds/posts/summary/-/Label name?max-results=postnumber&alt=json-in-script&callback=recentpostslist"></script>
<!-- Recent Posts by Label End -->

4. Thay thế yourname bằng tên địa chỉ Blogger của bạn.

Thay Label name bằng tên nhãn cần hiển thị những bài viết mới nhất.

Thay Postnumber bằng số bài viết cần hiển thị, ví dụ: 5, 7, 10, … Nếu muốn hiển thị tất cả bài viết thì để là 500 (số tối đa cho widget này).

Chú ý: Tiêu đề các bài viết được liệt kê có dấu chấm đầu dòng (dùng thẻ <ul>). Nếu bạn muốn được liệt kê theo số thứ tự thì thay đoạn document.write('</ul>'); bằng document.write('</ol>');

Tạo thanh sidebar menu với trạng thái viếng thăm kiểu đánh dấu tick

Có nhiều cách khác nhau để thể hiện sự đặc sắc và nổi bật cho thanh menu sidebar trên website của bạn. Một trong số đó là sidebar với trạng thái liên kết đã viết thăm dạng tick, tức là kiểu đánh dấu tick giống như khi bạn làm bài kiểm tra vậy. Đây cũng là một trong những kiểu menu rất độc đáo, chỉ cần vài thao tác CSS đơn giản là có thể thực hiện kiểu menu sidebar thật tuyệt vời.

Sau đây là đoạn mã cho phần CSS.

#sidebar ul {
list-style-type:none;
padding:3px;
}

#sidebar li a {
display:block;
line-height:150%;
width:239px;
background:url(ticks_grey.gif);
text-decoration:none;
}

#sidebar li a:link, a:active {
color:#666;
}

#sidebar li a:hover {
color:#F33;
background-position: 0 -20px;
}

#sidebar li a:visited {
background-position: 0 -40px;
}

Tải file hình ticks_grey tại đây.

Chú ý: Kiểu sidebar này có thể áp dụng khi thiết kế blog trên Blogger. Bạn chỉ việc dán đoạn mã CSS trên vào trước phần ]]></b:skin> khi chỉnh sửa HTML trong Template.

Tạo cửa sổ pop-up thông báo “Happy New Year…” cho Blogger

Trong mỗi dịp tết đến chắc hẳn không ít các bạn trong cộng đồng Blogger mong muốn Blog của mình có một câu thông báo chúc mừng năm mới mỗi khi người lướt web đánh địa chỉ blog của bạn trên thanh địa chỉ của công cụ trình duyệt.

Mình sẽ hướng dẫn bạn thực hiện điều này bằng cách sử dụng JavaScript.


Đăng nhập Blogger, vào chỉnh sửa Template. Đặt đoạn code dưới đây vào trước dòng <b:skin><![CDATA[/* rồi lưu Template là xong. Chú ý phần code JavaScript bên dưới phải nằm dưới các thẻ meta.

<script language='JavaScript'>
//<![CDATA[
var alertmessage="Happy New Year! \n Everything to your liking!"

//Alert only once per browser session (0=no, 1=yes)
var once_per_session=1

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function alertornot(){
if (get_cookie('alerted')==''){
loadalert()
document.cookie="alerted=yes"
}
}

function loadalert(){
alert(alertmessage)
}

if (once_per_session==0)
loadalert()
else
alertornot()

//]]>
</script>

Bạn có thể copy địa chỉ http://bloggertestland.blogspot.com/ rồi dán vào thanh địa chỉ trên công cụ trình duyệt để xem kết quả hiệu ứng này.

Lưu ý bạn có thể thay đổi nội dung thông báo tùy ý và thông báo chỉ xuất hiện khi mở địa chỉ trang chủ lần đầu tiên.

Trang trí con trỏ Blogger nhân dịp Giáng sinh

Nếu bạn muốn có kiểu con trỏ được thiết kế đặc biệt cho blog của mình thì bạn có thể tìm nhiều kiểu có sẵn miễn phí trên Internet. Nhưng điều quan trọng là cách cài đặt nó mà thôi.

Sau đây là một ví dụ kiểu con trỏ tham khảo từ Internet có dạng hộp sọ ông già Nô-el nhân dịp Giáng Sinh sắp đến gần.

Kiểu con trỏ hộp sọ ông gia Nô-el có dáng như thế này:

Sau đây là hướng dẫn thiết lập:

Bước 1: Đăng nhập Blogger, vào Bố cục (Layout), Chỉnh sửa HTML (Edit HTML).

Bước 2: Trong Template tìm thẻ mở <body> rồi dán đoạn mã sau đây vào bên dưới nó.

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol281.cur), progress;}</style>

Kết quả sau các thao tác trông như thế này:

<body>

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/holidays/hol-3/hol281.cur), progress;}</style>

Lưu Template và bạn có thể kiểm tra tác dụng của hiệu ứng con trỏ rồi đấy.

Hiển thị tổng số bài viết và nhận xét trên Blogger

Tạo widget hiển thị tổng số bài viết và tổng số nhận xét trên Blogger là cách cho phép bạn thống kê số lượng bài viết và nhận xét để tiện cho việc quản lý blog của mình.

Chỉ cần đăng nhập Blogger rồi đặt toàn bộ đoạn code dưới đây vào một tiện ích HTML/JavaScript là có thể thực hiện công việc đơn giản này.

<div style="float:left;"><img src="URL hình thống kê"/></div><br/><script style="text/javascript">
function numberOfPosts(json) {
document.write('<span style="font-weight: bold; ">Tổng số bài viết:</span> <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('<span style="font-weight: bold; ">Tổng số nhận xét:</span><b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<script src="http://yourblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
<script src="http://yourblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

Chú ý nếu bạn thích có hình thống kê thì phải đặt liên kết (URL) hình thống kê vào đoạn code trên, nếu không thích thì xóa tất cả phần code màu đỏ. Ngoài ra bạn có thể chỉnh sửa các thuộc tính CSS tùy thích. Tất nhiên bạn phải đổi địa chỉ blogspot trong đoạn code trên bằng địa chỉ blogspot của bạn.

Chống copy văn bản bằng cách vô hiệu hóa right click

Việc chống copy nội dung web bằng việc vô hiệu hóa thao tác kích chuột phải là một điều cần thiết đối với một số trường hợp riêng biệt. Thủ thuật này được thực hiện khá dễ dàng khi thiết kế website. Đối với webblog trên nền Blogger, thao tác này cũng có thể thực hiện được bằng cách sử dụng ngôn ngữ Javascript. Trong một lần tham khảo tại trang web www.dynamicdrive.com, mình đã bắt gặp một đoạn code được khuyến nghị sử dụng khi thiết kế website, trong khi áp dụng cho Blogger thì kết quả cũng rất tốt, nên chia sẻ cũng các bạn.

Chỉ cần dán toàn bộ đoạn code dưới đây vào một widget dạng HTML/JavaScript bất kỳ cho Template của bạn là có thể thành công, lưu ý nên đặt widget ở trên Header hoặc Footer để dễ quản lý.

<script language=javascript>
<!--

//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="Xin lỗi, bạn không được phép sao chép!";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->
</script>

Bạn có thể thay đổi câu thông báo màu đỏ trong đoạn code trên theo ý mình.

Tạo thanh trượt cho vùng hiển thị các bài nhận xét (Blogger)

Đối với các blog có số lượng lời bình, nhận xét (comments) khá lớn thì ít nhiều cũng ảnh hưởng đến vẻ đẹp và phong cách của blog do danh sách các nhận xét quá dài làm tốn không gian của blog. Bài viết này sẽ hướng dẫn một thủ thuật cơ bản để tạo một thanh trượt cho vùng hiển thị các bài nhận xét.

Nhờ thủ thuật này mà khi số bài nhận xét trên một trang quá nhiều thì thanh trượt sẽ tự động xuất hiện để giảm đi không gian hiển thị các nhận xét.

Sau đây là hướng dẫn thủ thuật:
Bước 1: Đăng nhập Blogger, vào Bố cục (Layout) đến Chỉnh sửa HTML (Edit HTML), trong Template bạn hãy tìm đoạn mã bên dưới:

#comments-block {
line-height:1.5em;
}

Bước 2: Thêm đoạn mã màu đỏ vào cho giống như kết quả bên dưới:

#comments-block {
line-height:1.5em;
height: 420px;
width: 550px;
overflow:auto;}

Chú ý: Có thể tùy chỉnh các giá trị height và width cho phù hợp với kích cỡ phần Comment trên blog của bạn.

Cuối cùng là Lưu Template.

Hiệu ứng tuyết rơi trên Blogger

Bạn muốn tạo hiệu ứng tuyết rơi thật đẹp mắt trên blog của mình giống một số trang web mà bạn tìm thấy. Bạn chưa tìm ra thủ thuật tối ưu cho mình?
Thật đơn giản. Chỉ cần đăng nhập vào bảng điều khiển Blogger, sau đó vào Bố cục (Layout) và Thêm tiện ích (Add a Widget), chọn HTML/JavaScript rồi dán đoạn code dưới đây vào đó. Mở trang nhà của bạn và bạn sẽ thấy kết quả như mong đợi. Chú ý tuyết có màu trắng nên nền blog của bạn phải có màu tối thì mới được.

<script src="http://snow-effect.googlecode.com/files/snow.js" type="text/javascript"></script>

Một điều cần chú ý là, sau khi tạo hiệu ứng tuyết rơi cho blog của mình thì bạn sẽ thấy rằng hiệu ứng này khiến cho máy tính phải làm việc cật lực hơn khi mở trang nhà của bạn. Có thể phát hiện điều này khi sử dụng laptop, quạt chạy mạnh hơn. Xem ra thủ thuật này giúp bạn thích thú nhưng vô tình góp phần làm nhanh hỏng các máy vi tính.

Cách tạo bảng có viền bằng HTML với khoảng trắng văn bản

Nếu không sử dụng nơi chưa văn bản (placeholder) trong các ô bảng HTML trống thì các đường viền ô bảng trống sẽ không hiển thị. Bằng cách thêm vào chuỗi mã ký tự &nbsp; trong cấu trúc HTML thỉ ô bảng sẽ hiển thị.
Dưới đây là đoạn code không có placeholder.

<table border cellpadding="4"> <tr> <td>văn bản của bạn</td> <td></td> <td>văn bản của bạn</td> </tr> <tr> <td></td> <td>văn bản của bạn</td> <td></td> </tr> </table>

Và đây là kết quả trên công cụ trình duyệt khi không sử dụng placeholder.

văn bản của bạn		văn bản của bạn
	văn bản của bạn

Tiếp đến là ví dụ đoạn code có sử dụng placeholder.

<table border cellpadding="4"> <tr> <td>văn bản của bạn</td> <td>&nbsp;</td> <td>văn bản của bạn</td> </tr> <tr> <td>&nbsp;</td> <td>văn bản của bạn</td> <td>&nbsp;</td> </tr> </table>

Và đây là kết quả hiển thị trên công cụ trình duyệt khi sử dụng placeholder.

văn bản của bạn		văn bản của bạn
	văn bản của bạn

Liên kết đến một vị trí đặc biệt trong một trang web

Khi thiết kế trang web, nhiều khi bạn cần tạo một liên kết từ một phần của trang web đến một phần khác, lấy ví dụ khi tạo liên kết đến giữa bài viết hoặc đầu bài viết hoặc có thể đến cuối trang.
Ví dụ minh họa: Đến cuối bài viết
Bằng một số cú pháp HTML đơn giản thì bạn có thể thực hiện được công việc này.

Bước 1: Chọn vùng văn bản bạn cần liên kết dẫn đến khi được kích chuột vào liên kết. Ở ví dụ trên, văn bản được liên kết đến là HTML, được đặt trong câu "Xem tất cả bài viết trong chuyên mục Thủ thuật HTML" nằm ở cuối bài viết này.

Sau khi chọn từ bạn muốn liên kết đến thì bạn phải tạo một liên kết neo như thế này:

<a name="Text">Text</a>

Văn bản in đậm sẽ là văn bản được chọn, theo như ví dụ trong trang này là HTML. Dù bạn có thể thay đổi văn bản màu đỏ thành văn bản bạn thích song sẽ dễ dàng để nhớ hơn nếu bạn chỉ sử dụng cùng nội dung văn bản với văn bản bạn chọn làm neo liên kết. Theo như ví dụ trong trang này sau khi tạo neo thì nó trông như thế này:

Xem tất cả bài viết trong chuyên mục Thủ thuật <a name="HTML">HTML</a>

Bước 2: Bước cuối cùng là bạn phải tạo liên kết thực mà khi kích chuột vào thì sẽ đưa bạn đến văn bản neo.

<a href="#Text">Click Here</a>

Ở ví dụ trong trang này, tôi chọn HTML làm văn bản neo và “Đến cuối bài viết” được sử dụng để tạo liên kết. Khi kích chuột vào thì trang web sẽ nhảy đến văn bản neo HTML đã chọn.
Khi tạo liên kết, bạn phải sử dụng cùng tên trong liên kết với phần neo liên kết. Trong ví dụ tôi đã sử dụng HTML trong thẻ neo và HTML trong liên kết thực. Khi tạo liên kết, tôi đã sử dụng đoạn code này:

<a href="#HTML">Đến cuối bài viết</a>

Xem tất cả bài viết trong chuyên mục Thủ thuật HTML.

Mô tả liên kết sử dụng cửa sổ pop-up

Bạn có thể khiến cho một số công cụ trình duyệt mở cửa số pop-up khi chuột dừng lại qua một hình ảnh bằng cách thêm tham số ALT cho các thẻ IMG. Đối với các liên kết văn bản thì bạn đã quen với việc hiển thị địa chỉ trên thanh trạng thái. Tuy nhiên cách này không phải là cách hiệu quả nhất bởi vì thanh trạng thái không chỉ giới hạn về khoảng trống mà còn vì người lướt web có thể không sẳn sàng chú ý đến.

Chúng ta có thể tạo mô tả trong cửa sổ pop-up mà không sử dụng JavaScript.

Thông thường thẻ neo cho một liên kết trông như thế này:

<a href="http://www.websitecuaban.com/">

Bạn cần thêm tham số TITLE để tạo cửa sổ pop-up mô tả liên kết:

<a href="http://www.websitecuaban.com/" TITLE="Mo ta lien ket cua ban">

Ví dụ: Bạn hãy rê chuột vào Websitecuaban để xem kết quả hiệu ứng mô tả liên kết.

Nếu bạn muốn tạo cửa sổ mô tả có nhiều dòng thì chỉ cần sử dụng đoạn mã &#10;&#13; ở cuối mỗi dòng trừ dòng cuối cùng:

<a href="http://www.websitecuaban.com/" TITLE="Mo ta lien ket cua ban, dong 1&#10;&#13;Mo ta lien ket cua ban, dong 2&#10;&#13;Mo ta lien ket cua ban, dong 3&#10;&#13;Mo ta lien ket cua ban, dong 4">

Ví dụ: Bạn hãy rê chuột vào Websitecuaban để xem kết quả hiệu ứng mô tả liên kết.

Tạo Menu sổ dọc cơ bản sử dụng Javascript

Kiểu Menu sổ dọc là một cách tuyệt vời để gom nhiều liên kết vào một vùng nhỏ.

Bài viết này sẽ hướng dẫn bạn cách tạo một thanh menu sổ dọc cơ bản nhưng cũng rất hữu ích khi thiết kế web.

Xem Demo.

Bước 1: Đặt code Javascript dưới đây vào phần đầu (trước thẻ </head>) của trang web.

<script language="javascript"><!--
function openURL()
{

// grab index number of the selected option
selInd = document.theForm.aaa.selectedIndex;

// get value of the selected option
goURL = document.theForm.aaa.options[selInd].value;

// redirect browser to the grabbed value (here a URL)
top.location.href = goURL;

}

//-->
</script>

Bước 2: Thiết lập HTML để hiển thị Menu sổ dọc, như ví dụ bên dưới.

<form name="theForm"> <tt>
<select name="aaa" size="1">
<option selected value="/trang-chu.html">Home </option>
<option value="#">-------------------- </option>
<option value="/introduction.html">Introduction </option>
<option value="/service.html">Services </option>
<option value="#">-------------------- </option>
<option value="/products.html">Products </option>
<option value="/download.html">Download </option>
<option value="/resources.html">Resources </option>
<option value="#">-------------------- </option>
<option value="/contact.html">Contact </option>
<option value="/faq.html">FAQ </option>
</select>
<input type="button" value=" GO " onClick="openURL()"> </tt>
</form>

Nếu bạn không cần sử dụng nút GO thì bỏ dòng code của nó, tức là dòng trước thẻ </form>. Sau đó bạn phải thay đổi dòng thứ hai thành thế này:

<select name="aaa" size="1" onchange="openurl()">

Tạo thanh menu dọc với hiệu ứng accordion sử dụng Mootools

Hiệu ứng accordion giúp một vùng liên kết được kích chuột vào có thể xếp lại trông giống như đàn accordion. Sử dụng hiệu ứng này với sự hỗ trợ của Mootools có thể tạo một thanh menu dọc khá ấn tượng.

Xem Demo.

Sau đây là hướng dẫn cài đặt hiệu ứng:

Bước 1: Trước tiên, bạn hãy đặt toàn bộ phần code bên dưới vào phần đầu của trang HTML, nằm giữa 2 thẻ <head>, </head>.

<script type="text/javascript" src="http://www.ryanscherf.net/demos/accordion/mootools.js"></script>
<style type="text/css">
#content {
width: 220px;
margin: 0 auto;
}

#wrap {
width: 232px;
overflow: hidden;
background: #fff url("http://www.ryanscherf.net/demos/accordion/images/wrapbg.gif") repeat-y top left;
}

h3 {
padding: 10px 0 11px 15px;
margin: 0;
font-size: 12px;
font-weight: normal;
color: #222;
background: #efefef;
cursor: pointer;
border-bottom: 1px solid #fff;
text-decoration: none;
}

h3.toggler a {
color: #666;
text-decoration: none;
}

h3.toggler a:hover {
color: black;
}

div.accordion {
background: #fff url("http://www.ryanscherf.net/demos/accordion/images/accordionbg.gif") repeat-x top left;
}

div.accordion ul {
list-style-type: none;
padding: 0;
margin: 0 0 5px 0;
}

div.accordion ul li {
padding: 6px 0;
}

div.accordion ul li a {
color: #666;
text-decoration: none;
display: block;
padding: 4px 0px 4px 20px;
font-size: 90%;
}

div.accordion ul li a span {
padding-bottom: 10px;
}

div.accordion ul li a img {
border: 0;
vertical-align: bottom;
margin-right: 15px;
}

div.accordion ul li a:hover span {
text-decoration: underline;
}

#top_round {
height: 10px;
font-size: 1px; /* ie whitespace */
}

#bottom_round {
height: 10px;
font-size: 1px; /* ie whitespace */
}

.top_dark {
background: url("http://www.ryanscherf.net/demos/accordion/images/top_dark.gif") no-repeat top left;
}

.top_light {
background: url("http://www.ryanscherf.net/demos/accordion/images/top_light.gif") no-repeat top left;
}

.bottom_dark {
background: url("http://www.ryanscherf.net/demos/accordion/images/bottom_dark.gif") no-repeat top left;
}

.bottom_light {
background: url("http://www.ryanscherf.net/demos/accordion/images/bottom_light.gif") no-repeat top left;
}

.first {
padding-top: 5px;
}

.last {
padding-bottom: 5px;
}
</style>

Bước 2: Thiết lập HTML như bên dưới để đặt vào phần thân của trang HTML, nằm giữa 2 thẻ <body>, </body>.

<div id="wrap">
<div id="top_round"></div>
<div id="content">
<h3 class="toggler first" style="padding-top:5px;"><a href="#section1" onfocus="this.blur();">Section Title 1</a></h3>
<div class="accordion">
<ul>
<li><a href="#" onfocus="this.blur();"><img src="/images/image1.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image2.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image3.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image4.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image5.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image6.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image7.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image8.png" alt="" /><span>Link to other content area</span></a></li>
</ul>
</div>

<h3 class="toggler"><a href="#section2" onfocus="this.blur();">Section Title 2</a></h3>

<div class="accordion">
<ul>
<li><a href="#" onfocus="this.blur();"><img src="/images/image9.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image10.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image11.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image12.png" alt="" /><span>Link to other content area</span></a></li>
</ul>
</div>

<h3 class="toggler"><a href="#section3" onfocus="this.blur();">Section Title 3</a></h3>
<div class="accordion">
<ul>
<li><a href="#" onfocus="this.blur();"><img src="/images/image13.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image14.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image15.png" alt="" /><span>Link to other content area</span></a></li>
</ul>
</div>

<h3 class="toggler"><a href="#section4" onfocus="this.blur();">Section Title 4</a></h3>
<div class="accordion">
<ul>
<li><a href="#" onfocus="this.blur();"><img src="/images/image16.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image17.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image18.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image19.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image20.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src=" /images/image21.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image22.png" alt="" /><span>Link to other content area</span></a></li>
<li><a href="#" onfocus="this.blur();"><img src="/images/image23.png" alt="" /><span>Link to other content area</span></a></li>
</ul>
</div>

<h3 class="toggler last"><a href="#section5" onfocus="this.blur();">Section Title 5</a></h3>
<div class="accordion"><!-- no content hack --></div>
</div>
<div id="bottom_round"></div>
</div>
</div>

Bước 3: Đặt đoạn code sau đây trước thẻ đóng </body>.

<script type="text/javascript" src="http://www.ryanscherf.net/demos/accordion/accordion.js"></script>

Chú ý ở Bước 2, bạn phải tùy chỉnh scr theo URL các file hình ảnh tương ứng của bạn.
Hiệu ứng này có thể áp dụng cho Blogger khá dễ dàng.

Theo Ryanscherf.net

Tạo hiệu ứng đổi dạng rê chuột bằng công cụ Mootools

Công cụ Mootools có nhiều ứng dụng thú vị cho việc thiết kế web. Ở đây xin giới thiệu cách thêm hiệu ứng đẹp mắt cho một danh mục tin tức khi rê chuột có sự đổi dạng và khiến cho cả vùng chọn có thể kích chuột được. Mục đích của hiệu ứng này là giúp cho một danh mục tin tức không động trở nên động và đẹp hơn.

Xem Demo.

Việc đầu tiên là thiết lập CSS và 2 file js tạo hiệu ứng rồi đặt vào phần đầu của trang HTML, giữa 2 thẻ <head>, </head>.

<style type="text/css">
/*<![CDATA[*/
#posts {
padding: 0;
margin: 0;
}
#posts li {
width: 600px;
border: 1px solid #eee;
background-color: #F9F9F9;
background-image: none;
float: left;
clear: both;
list-style: none;
margin: 0 0 5px 0;
padding: 5px;
}
#posts a {
text-decoration: none;
color: #999;
font-size: 0.85em;
}
#posts img {
display: block;
float: left;
border: 1px #ccc solid;
background: white;
padding: 3px;
margin: 0 10px 0 0;
}
#posts h1 {
padding: 5px 0 0 0;
margin: 0;
color: #CC0033;
font-family: "Times New Roman", Times, serif;
font-size: 1.2em;
}
#posts p {
margin: 0;
padding: 0 0 10px 0;
}
/*]]>*/
</style>

<script src="http://www.web-kreation.com/demos/mootools-1.2_mouseenter-mouseleave/js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="http://www.web-kreation.com/demos/mootools-1.2_mouseenter-mouseleave/js/clickMe.js" type="text/javascript"></script>

Bạn nên tải về file mootools-1.2.1-core-yc.js và file clickMe.js rồi upload lên webhost của bạn để lấy URL, sau đó đặt vào phần scr.

Kế đến là thiết lập HTML như bên dưới rồi đặt vào phần thân của trang HTML, giữa 2 thẻ <body>, </body>.

<ul id="posts">
<li>
<img src="/images/image1.jpg" alt="" />
<h1>This is the title of the first news</h1>
<p>And this is the summary of the first news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More &raquo;</a>
</li>
<li>
<img src="/images/image2.jpg" alt="" />
<h1>This is the title of the second news</h1>
<p>And this is the summary of the second news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More &raquo;</a>
</li>
<li>
<img src="/images/image3.jpg" alt="" />
<h1>This is the title of the third news</h1>
<p>And this is the summary of the third news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More &raquo;</a>
</li>
<li>
<img src="/images/image4.jpg" alt="" />
<h1>This is the title of the second news</h1>
<p>And this is the summary of the fourth news. You can use your own post to customize this part...</p>
<a href="http://ngonngulaptrinhvn.blogspot.com/" title="Read More">Read More &raquo;</a>
</li>
</ul>

Bạn nên chỉnh sửa URL ảnh đại diện, tiêu đề tin và nội dung tóm tắt của mỗi tin cho phù hợp với trang web của bạn.

Tạo Menu sổ dọc nhiều cấp

Kiểu Menu sổ dọc có một ưu điểm là tiết kiệm không gian web cho trang web của bạn. Menu sổ dọc cũng là một lựa chọn tối ưu của khá nhiều website hiện nay. Ví dụ như trang Kitco.com.

Chỉ cần sử dụng một đoạn mã JavaScript đơn giản, bạn có thể tạo một Menu sổ dọc tự động dẫn đến các liên kết mỗi khi người dùng chọn các tùy chọn.


Trước hết, đặt đoạn mã dưới đây vào phần đầu của trang web, giữa các thẻ <head>, </head>.

<script language="javascript">
<!-- A the script from old browsers --
function goto(form) { var index=form.select.selectedIndex
if (form.select.options[index].value != "0") {
location=form.select.options[index].value;}}
//-->
</script>

Bước tiếp theo là đặt code HTML tại vị trí muốn tạo Menu như bên dưới.

<form name="form1">
<select name="select" onchange="goto(this.form)" size="1">
<option value="">-------Please choice-------
<option value="#">Title for item # 1</option>
<option value="#">Title for item # 2</option>
<option value="#">Title for item # 3</option>
<option value="#">Title for item # 4</option>
<option value="#">Title for item # 5</option>
<option value="#">Title for item # 6</option>
</select>
</form>

Bạn cần thay đổi các Tile for item tương ứng với tên menu con tùy chọn và đặt URL tương ứng cho các tùy chọn đó.

Tạo hiệu ứng mô tả liên kết chỉ bằng file Javascript

Chúng ta đã biết cách thực hiện hiệu ứng mô tả liên kết bằng DHTML Tooltip qua bài viết Hiệu ứng liên kết có mô tả … nhưng phải dùng đến cả CSS và Javascript. Ở bài này tôi xin giới thiệu cách làm đơn giản hơn, chỉ sử dụng 1 file Javascript mà thôi.


Bạn hãy rê chuột vào liên kết này để xem kết quả hiệu ứng.

Sau đây là hướng dẫn thao tác:

Đặt đoạn code bên dưới ngay sau thẻ <body>.

<script type="text/javascript" src="/wz_tooltip.js"></script>

Bạn nên tải file wz_tooltip.js về rồi upload lên webhost của bạn sau đó gắn URL của file vào phần scr ở trên.

Kế đến bạn chỉ cần thiết lập HTML cho liên kết như sau:

<a onmouseover="Tip('Phần mô tả liên kết')" onmouseout="UnTip()" href="URL của liên kết">Tiêu đề của liên kết</a>

Như vậy phương pháp này đã rút ngắn hơn một công đoạn CSS so với phương pháp trước. Bạn có thể áp dụng cách này dễ dàng cho Blogger.

Mô tả liên kết sử dụng Javascript

Khi bạn trỏ vào các liên kết trên một trang web, phần lớn các công cụ trình duyệt sẽ hiển thị địa chỉ mà liên kết đó trỏ đến trên thanh trạng thái. Tại sao không thêm sự nổi bật cho trang web của bạn bằng cách mô tả cho các liên kết.


Có thể sử dụng ngôn ngữ JavaScript để làm việc này. Bạn chỉ cần thêm thẻ sự kiện "OnMouseOver" cho neo liên kết của bạn dưới dạng sau đây:

OnMouseOver="window.status='description'; return true;"

Lấy ví dụ, nếu thẻ neo ban đầu của bạn là:

<a href="http://www.websitecuaban.com/trang-chu.html">

Thì nên thay đổi nó thành:

<a href="http://www.websitecuaban.com/trang.chu.html" OnMouseOver="window.status='Go to my home page...'; return true;">

Chú ý: Vì OnMouseOver là một sự kiện JavaScript nên mô tả của bạn sẽ chỉ hiển thị trên các công cụ trình duyệt cho kích hoạt JavaScript như Netscape 2.x+ và Explorer 3.x. Các trình duyệt khác sẽ bỏ qua thẻ này.

Hiệu ứng liên kết có mô tả sử dụng DHTML Tooltip và Javascript

Hiệu ứng liên kết dạng mô tả giúp cho người lướt web có thể có nhiều hơn thông tin về một liên kết trước khi kích trỏ để vào trực tiếp liên kết. Ngôn ngữ Javascript có thể được sử dụng kết hợp với CSS để thực hiện hiệu ứng này.


Xem trang demo demo.

Sau đây là hướng dẫn thiết lập hiệu ứng.

Đặt đoạn code sau vào giữa 2 thẻ <head>, </head> của trang web.

<style type="text/css">
#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Xóa dòng phía dưới nếu muốn bỏ thuộc tính bóng mờ cho khung mô tả liên kết. Dòng này luôn xuất hiện sau cùng trong phần CSS này*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);

}
</style>
<script language="javascript" src="/tooltip.js"></script>

Bạn nên tải file tooltip.js về rồi upload lên webhost của mình sau đó đặt liên kết file vào scr.

Ở phần code cho liên kết, bạn thiết lập như thế này:

<a href="{URL của liên kết}" onmouseover="showtip('Phần mô tả của liên kết')" onmouseout="hidetip();">Tiêu đề của liên kết</a>

Hiệu ứng này có thể áp dụng cho Blogger, bạn hãy khám phá đi nhé! Rất dễ dàng!

Hiển thị ngày tháng trên website và webblog

Hiển thị ngày tháng trên trang web của bạn là một cách trang trí hay cũng như làm cho trang web của bạn có vẻ chuyên nghiệp hơn. Những đoạn code JavaScript sau đây sẽ giúp bạn hiển thị ngày tháng lên trang web theo một số kiểu khác nhau.

Kiểu 1: Tháng/ngày/năm (Ví dụ hôm nay là 12/17/2009)

Bạn hãy đặt đoạn code sau tại nơi bạn muốn ngày tháng xuất hiện.

<script language="javascript">
var today_date= new Date()
var month=today_date.getMonth()+1
var today=today_date.getDate()
var year=today_date.getFullYear()
//document.write("Today's date is: ")
document.write(month+"/"+today+"/"+year)
</script>

Bạn có thể thay đổi font và màu chữ bằng cách kèm theo các lệnh thuộc tính tương thích.

Kiểu 2: Tháng-ngày-năm (Ví dụ hôm nay là 12-17-2009)

Bạn hãy đặt đoạn code sau tại nơi bạn muốn ngày tháng xuất hiện.

<script language="javascript">
var today_date= new Date()
var month=today_date.getMonth()+1
var today=today_date.getDate()
var year=today_date.getFullYear()
//document.write("Today's date is: ")
document.write(month+"-"+today+"-"+year)
</script>

Kiểu 3: Lấy ví dụ hôm nay là ngày 17/12/2009 thì kiểu này hiển thị theo dạng tiếng Anh là December 17, 2009

Đặt đoạn code sau giữa 2 thẻ <head> và </head>.

<script language=javascript>
var today_date= new Date()
var month=today_date.getMonth()
var today=today_date.getDate()
var year=today_date.getFullYear()

var months = new Array(
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December");
</script>

Sau đó đặt đoạn code này tại nơi bạn muốn ngày tháng xuất hiện.

<script language=javascript>
document.write(months[month]+" "+today+", "+year)
</script>

Từ những đoạn code Javascript này bạn có thể điều chỉnh để có thể hiển thị ngày tháng theo kiểu tiếng Việt, bạn hãy khám phá nhé!
Và tất nhiên các blogger cũng có thể áp dụng thủ thuật này vào webblog của mình.

Thủ thuật tạo nút “Đặt làm trang chủ” trên website, webblog

Khi thiết trang web của bạn, việc tạo cho người lướt web môt cách để thiết lập trang web của bạn làm trang chủ mỗi khi khởi động công cụ trình duyệt web cũng là một cách để tăng cường lượng truy cập cho trang web của bạn.
Đoạn mã Javascript sau đây sẽ giúp bạn đặt một nút lên trang web khi bạn thiết kế, kết quả tạo ra là mỗi khi click chuột vào đó thì nó sẽ tự động thiết lập trang của bạn làm trang chủ cho công cụ trình duyệt.

<form>
<input type="button" value="make this site your home page" onclick="this.style.behavior='url(#default#homepage)'; this.sethomepage('page url beginning with http:// here');">
</form>

Thay đổi đoạn văn bản màu đỏ thành địa chỉ website của bạn bắt đầu bằng http://.

Tạo hiệu ứng liên kết kiểu dancing

Có khá nhiều kiểu hiệu ứng liên kết. Một trong số đó là kiểu hiệu ứng nhảy múa theo đó các đoạn text có link liên kết nhấp nháy theo các màu sắc khác nhau rất nổi bật.

Bạn chỉ việc đặt đoạn mã javascript dưới đây trước thẻ đóng </head>.

<script language="javascript">
<!-- Begin
function initArray() {
for (var i = 0; i < initArray.arguments.length; i++) {
this[i] = initArray.arguments[i];
}
this.length = initArray.arguments.length;
}
var colors = new initArray(
"red",
"blue",
"green",
"purple",
"black",
"tan",
"red");
delay = .5; // seconds
link = 0;
vlink = 2;
function linkDance() {
link = (link+1)%colors.length;
vlink = (vlink+1)%colors.length;
document.linkColor = colors[link];
document.vlinkColor = colors[vlink];
setTimeout("linkDance()",delay*1000);
}
linkDance();
// End -->
</script>

Bạn cũng có thể thêm màu sắc cho hiệu ứng này.
Tham khảo theo Javascript.internet.com.

Tạo nút Trở về trang chủ cho website

Trong một trang web, nút Trở lại trang chủ hay Back Home cũng rất cần thiết để người lướt web có thể dễ dàng sử dụng. Có nhiều cách khác nhau để thực hiện điều này khi thiết kế web. Sau đây là một cách thực hiện bằng các cú pháp Javascript.

Bạn chỉ việc đặt đoạn mã này tại vị trí muốn hiển thị nút Back Home.

<script>
function gohome(){
if (document.layers)
window.home()
else if (document.all)
window.location="about:home"
else
alert("You need NS 4+ or IE 4+ to go back home!")
}
</script>

<form>
<input type="button" onClick="gohome()" value="Back Home!">
</form>

Nếu bạn muốn sử dụng nút dạng hình thay vì dạng form thì sử dụng đoạn mã dưới đây để thay cho đoạn mã màu đỏ.

<a href="javascript:gohome()"><img src="URL cua button hinh"></a>

Tham khảo theo DynamicDrive.

Tạo bộ đếm ngược sử dụng Mootools

Có nhiều website như RapidShare hay 4shared chẳng hạn, thường bắt bạn đợi một khoảng thời gian định sẵn trước khi cho phép bạn tải về một phần mềm nào đó. Sử dụng công cụ MooTools có thể tạo ra plugin đếm ngược tương tự như các trang web nói trên.


Xem Demo.

Sau đây là Javascript MooTools.

var CountDown = new Class({

//implements
Implements: [Options,Events],

//options
options: {
element: 'countdown',
start: 10,
finish: 0,
startFont: '36px',
finishFont: '12px',
onComplete: $empty,
duration: 1000
},

//initialization
initialize: function(options) {
//set options
this.setOptions(options);
},

//get things started
start: function() {
this.anim();
},

//animate!
anim: function() {
this.options.element.set('text',this.options.start--);
var fx = new Fx.Tween(this.options.element,{
duration: this.options.duration,
link: 'ignore',
onComplete: function() {
if(this.options.start >= this.options.finish) {
this.anim();
} else {
this.fireEvent('complete');
}
}.bind(this)
}).start('font-size',this.options.startFont,this.options.finishFont);
}
});

/* usage */
window.addEvent('domready',function() {
var cd = new CountDown({
element: $('countdown'),
start: 12,
finish: 0,
onComplete: function() {
this.options.element.set('text','Xong rồi! Bạn đã có thể tải về phần mềm bạn cần!').setStyle('color','#090');
}
}).start();
});

Trong lớp CountDown có những tùy chọn cho phép bạn tùy chỉnh theo ý mình:
element: chứa văn bản đếm ngược
start: số bắt đầu (mặc định đến 10)
finish: số kết thúc (mặc định đến 0)
duration: thời gian giữa các số (mặc định đến 1000 hoặc 1 giây)
startFont: cỡ font chữ cho số bắt đầu
finishFont: cỡ font chữ cho số kết thúc

Một thứ quan trọng cần có là file javascript moo1.2.js đặt trước phần javascript ở trên. Bạn nên tải về moo1.2.js rồi gắn URL vào phần scr. Tóm lại bạn cần đặt tất cả chúng vào giữa 2 thẻ <head>, </head> như thế này:

<head>
<script type="text/javascript" src="/moo1.2.js"></script>
<script type="text/javascript">

var CountDown = new Class({

//implements
Implements: [Options,Events],

//options
options: {
element: 'countdown',
start: 10,
finish: 0,
onComplete: $empty,
duration: 1000
},

//initialization
initialize: function(options) {
//set options
this.setOptions(options);
},

//get things started
start: function() {
this.anim();
},

//animate!
anim: function() {
this.options.element.set('text',this.options.start--);
var fx = new Fx.Tween(this.options.element,{
duration: this.options.duration,
link: 'ignore',
onComplete: function() {
if(this.options.start >= this.options.finish) {
this.anim();
} else {
this.fireEvent('complete');
}
}.bind(this)
}).start('font-size',this.options.startFont,this.options.endFont);
}
});

window.addEvent('domready',function() {
var cd = new CountDown({
element: $('countdown'),
start: 12,
duration: 1000,
startFont: '36px',
endFont: '12px',
finish: 0,
onComplete: function() {
this.options.element.set('text','Xong rồi! Bạn đã có thể tải về phần mềm bạn cần!').setStyle('color','#090');
}
}).start();
});
</script>
</head>

Sau cùng là thiết lập HTML nơi hiển thị bộ đếm ngược:

<p><span id="countdown"></span></p>

Hy vọng đây có thể là công cụ hữu ích cho các bạn!

Tạo tab menu cơ bản sử dụng jQuery UI

Tạo nội dung theo tab thật dễ dàng nhờ sử dụng giao diện người jQuery (jQuery UI).

Bài viết này hướng dẫn cách tạo giao diện tab đơn giản nhưng khiến cho trang web vẫn có thể đọc được khi công cụ trình duyệt tắt chức năng JavaScript.

Phương pháp này liên quan đến việc ẩn và hiện các thành phần sử dụng JavaScript trước khi thực thi tab.

Xem Demo. Bạn hãy thử tắt JavaScript trên công cụ trình duyệt.

Bước 1: Chúng ta cần một lớp CSS để áp dụng cho các thành phần được ẩn.

.hidden {
display: none;
}

Bước 2: Thiết lập JavaScript như bên dưới. Chú ý dòng thứ nhất để hiển thị tab menu, dòng thứ hai ẩn các tiêu đề và dòng cuối cùng thực thi các tab.

$(function() {
$(".tabmenu").removeClass("hidden");
$(".tabs h2").addClass("hidden");
$(".tabs").tabs();
});

Ngoài ra còn có sự hỗ trợ của 2 file javascript là jquery.min.js và jquery-ui.min.js và file jquery-ui.css. Đặt toàn bộ các javascript và css trong phần đầu của trang web (trước thẻ </head> như thế này:

<style type="text/css">
.hidden {
display: none;
}
</style>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$(".tabmenu").removeClass("hidden");
$(".tabs h2").addClass("hidden");
$(".tabs").tabs();
});
</script>

Bước 3: Cuối cùng là thiết lập HTML, đặt đoạn code bên dưới vào phần thân của trang web, giữa 2 thẻ <body> và </body>. Theo mặc định thì các UI tab sử dụng liệt kê không có thứ tự (ul) với các liên kết neo làm tab và sử dụng các thẻ div tương ứng với nội dung. Liệt kê bắt đầu ẩn đi và sẽ được hiển thị bằng JavaScript và mỗi phần có một tiêu đề mà sẽ được ẩn đi nếu JavaScript được kích hoạt.

<div class="tabs">
<ul class="tabmenu hidden">
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
<li><a href="#tab-4">Tab 4</a></li>
</ul>
<div id="tab-1">
<h2>Tab 1</h2>
<p>Nội dung của tab 1</p>
</div>
<div id="tab-2">
<h2>Tab 2</h2>
<p>Nội dung của tab 2</p>
</div>
<div id="tab-3">
<h2>Tab 3</h2>
<p>Nội dung của tab 3</p>
</div>
<div id="tab-4">
<h2>Tab 4</h2>
<p>Nội dung của tab 4</p>
</div>
</div>

Bạn có thể tạo giao diện tab như thế này trên Blogger. Chỉ cần đặt tất cả các phần code trình bày ở trên trong một tiện ích HTML/JavaScript là thành công.

Tạo hiệu ứng accordion sử dụng jQuery

jQuery rất hữu ích trong thiết kế web. Các plugin jQuery ngày càng được ưa chuộng nhờ những tính năng hiệu ứng nổi bật của chúng.


Hiệu ứng accordion là một kiểu hiệu ứng khá đẹp mắt cho phép ẩn hiện nội dung web một cách chuyên nghiệp.

Xem Demo.

Bạn có thể áp dụng hiệu ứng này cho website của mình theo hướng dẫn dưới đây:
Chèn đoạn code dưới đây vào giữa phần <head> … </head> của trang HTML.

<script type="text/javascript" src="/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();

$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});

});
</script>

<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>

Bạn nên tải về file jquery.js và file arrow-square.gif rồi thiết lập URL cho đúng. Ngoài ra bạn có thể chỉnh độ rộng (width) phù hợp với yêu cầu website của bạn.

Kế đến bạn thiết kế nội dung hiệu ứng theo như bên dưới và đặt vào phần thân của trang HTML, giữa 2 thẻ <body> … </body>.

<div class="accordion">
<h3>Sample Heading 1</h3>
<p>This is a demo content for Sample Heading 1. You should replace it with your own customized content. You can add as many sample headings with their corresponding content as you like.</p>
<h3> Sample Heading 2</h3>
<p> This is a demo content for Sample Heading 2. You should replace it with your own customized content. You can add as many sample headings with their corresponding content as you like.</p>
<h3> Sample Heading 3</h3>
<p> This is a demo content for Sample Heading 3. You should replace it with your own customized content. You can add as many sample headings with their corresponding content as you like.</p>
<h3> Sample Heading 4</h3>
<p> This is a demo content for Sample Heading 4. You should replace it with your own customized content. You can add as many sample headings with their corresponding content as you like.</p>
<h3> Sample Heading 5</h3>
<p> This is a demo content for Sample Heading 5. You should replace it with your own customized content. You can add as many sample headings with their corresponding content as you like.</p>
</div>

Nằm giữa 2 thẻ <h3>, </h3> là phần tiêu đề. Nằm giữa 2 thẻ <p>, </p> là phần nội dung tương ứng cho tiêu đề. Bạn có thể thêm tiêu đề và nội dung tương ứng tùy thích.

Hiệu ứng này có thể áp dụng cho Blogger. Chỉ cần đặt toàn bộ 2 phần code nêu trên vào một tiện ích HTML là xong.

Hiệu ứng tham khảo theo Webdesignerwall.

Kiểu trình chiếu phiên bản s3Slider sử dụng jQuery

s3Slider jQuery plugin được thực hiện theo ý tưởng script slideshow mượt và được phát triển bởi lập trình viên Boban Karišik tại Serbia.


Bạn có thể xem trình chiếu demo tại trang web này: kruskica.net.

Sử dụng plugin này rất dễ dàng. Trước tiên là kèm vào thư viện jQuery rồi thêm vào javascript s3Slider ở phần <head> của trang web.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>

Bạn có thể hạ tải file js/jquery.js và js/s3Slider.js.

Kế đến cần thiết lập HTML cho trang trình chiếu.

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="#" />
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="#" />
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

Sau nữa là phải tạo các khai báo CSS:

#s3slider {
width: 400px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
width: 400px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}

Nếu hiểu về CSS thì bạn có thể điều chỉnh các thuộc tính và giá trị cho phù hợp với trang web của mình.

Cuối cùng bạn cần phải thiết lập thời gian bao lâu để một bức hình được chiếu lên trang.

$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});

Như vậy toàn bộ phần chức năng hiệu ứng slider được đặt như sau:

<head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
</head>

Hy vọng rằng bạn sẽ hài lòng với kiểu trình chiếu này.