[Thủ Thuật] Tạo menu dock cho Blogspot bằng CSS

Hôm nay mình xin chia sẽ với các bạn cách tạo menu dock bằng hình ảnh với hiệu ứng động khá đẹp cho Blogspot. Thủ thuật này chỉ đơn giản là tạo hiệu ứng động bằng CSS, nó cũng rất đơn giản vè dễ dàng thực hiện. Các bạn chắc hẳn đã thấy menu dạng này ở những trang web khác và đã biết hiệu ứng của nó. Nếu bạn nào đã dùng phần mềm ObjectDock (Bạn có thể download tại đây) để sắp xếp các shortcut trên desktop thì sẽ thấy hiệu ứng này tương tự như hiệu ứng của phần mềm này khi rê chuột vào ảnh.

xem demo: (đưa chuột vào các biểu tượng trình duyệt nhé)

• 
  
  
  Opera
  
• 
  
  
  Safari
  
• 
  
  
  Firefox
  
• 
  
  
  Google Chrome
  
• 
  
  
  Internet Explorer
  
• 
  
  
  Konqueror
  

» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn thêm tiện ích (Add a Gadget)
4. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<!---
[Thủ Thuật] Tạo menu dock cho Blogspot bằng CSS
(code CSS hổ trợ hiện đúng bố cục).
-->
<style>
.expand-down {
font-family:Arial, Helvetica, sans-serif;
line-height:normal;
margin-top:20px;
height:100px;
width:500px;
margin-bottom:30px;
}
.expand-down * {
margin: 0;
padding: 0;
}
.expand-down ul {
padding-top:10px;
margin-left:10px;
}
.expand-down ul li {
float:left;
list-style-type:none;
}
.expand-down ul li a {
text-decoration:none;
}
.expand-down ul li a img {
width:50px; /* �� r�ng của ảnh ban �ầu */
height:50px; /* chi�u cao của ảnh ban �ầu */
border:none;
}

.expand-down ul li a span {
display:none;
}
.expand-down ul li:hover a span {
display:block;
font-size:14px;
text-align:center;
color:#fff;
}
.expand-down ul li:hover a img {
width:100px; /* �� r�ng của ảnh khi rê chu�t*/
height:100px; /* chi�u cao của ảnh khi rê chu�t*/
}
.expand-down ul li:hover + li a img {
width:60px;
height:60px;
}
.expand-down ul li:hover + li + li a img {
width:55px;
height:55px;
}
</style>


<!---
[Thủ Thuật] Tạo menu dock cho Blogspot bằng CSS
(code hiện trên trình duyệt).
-->

<div class="expand-down">
<ul>

<li>
<a href="http://www.opera.com/download/" title="Opera" rel="nofollow" target="_blank">
<img src="https://lh3.googleusercontent.com/_9-sNIAfGhKg/TVNhuG7jbTI/AAAAAAAAADg/vEGKI2JoJfk/opera-trans.png" alt="Opera" title="Opera" />
<span>Opera</span></a>
</li>

<li>
<a href="http://www.apple.com/safari/download/" title="Safari" rel="nofollow" target="_blank">
<img src="https://lh3.googleusercontent.com/_9-sNIAfGhKg/TVNhuUa2ovI/AAAAAAAAADk/WKSv8xncVmA/safari-trans.png" alt="Safari" title="Safari" />
<span>Safari</span></a>
</li>

<li>
<a href="http://www.mozilla.com/en-US/firefox/" title="Firefox" rel="nofollow" target="_blank">
<img src="https://lh6.googleusercontent.com/_9-sNIAfGhKg/TVNhoARO6II/AAAAAAAAADI/Q6_lfcOAgx8/firefox-trans.png" alt="Firefox" title="Firefox" />
<span>Firefox</span></a>
</li>

<li>
<a href="http://www.google.com/chrome" title="Google Chrome" rel="nofollow" target="_blank">
<img src="https://lh6.googleusercontent.com/_9-sNIAfGhKg/TVNhoFLCVNI/AAAAAAAAADM/JdB-Nbsi-g8/google-chrome-trans.png" alt="Google Chrome" title="Google Chrome" />
<span>Google Chrome</span></a>
</li>

<li>
<a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx" title="Internet Explorer" rel="nofollow" target="_blank">
<img src="https://lh4.googleusercontent.com/_9-sNIAfGhKg/TVNhoDuIdoI/AAAAAAAAADQ/DH-maYd2i8A/ie-trans.png" alt="Internet Explorer" title="Internet Explorer" />
<span>Internet Explorer</span></a>
</li>

<li>
<a href="http://www.konqueror.org/download/" title="Konqueror" rel="nofollow" target="_blank">
<img src="https://lh3.googleusercontent.com/_9-sNIAfGhKg/TVNhoUJ-I3I/AAAAAAAAADU/Q0AYzxeZBj0/konqueror-trans.png" alt="Konqueror" title="Konqueror" />
<span>Konqueror</span></a>
</li>

</ul>
</div>

Chỉnh code:
<a href="http://www.opera.com/download/" title="Opera" rel="nofollow" target="_blank">
<img src="https://lh3.googleusercontent.com/_9-sNIAfGhKg/TVNhuG7jbTI/AAAAAAAAADg/vEGKI2JoJfk/opera-trans.png" alt="Opera" title="Opera" />
<span>Opera</span></a>
</li>

- Bạn thay các dòng màu đỏ thành link tương ứng cho các ảnh.
- Dòng màu xanh chính là link ảnh mà bạn muốn hiển thị trong menu.
- Phần màu tím là phần hiển thị bên dưới ảnh khi bạn rê chuột vào ảnh đó.

Save tiện ích lại là xong

ST:
Địa chỉ bài viết: http://www.traidatmui.com/2010/08/liveshow-hoai-linh-p3.html#ixzz1HRNQUJJL
Nguồn: TRAIDATMUI.com