"Tạo menu dock cho Blogspot bằng CSS"

(Traidatmui.com) - 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. Bạn có thể click demo để xem.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập tài khoản Blogger
2. Vào thiết kế
3. Chọn chỉnh sửa HTML
4. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>

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

5. Save template lại và trở về phần tử trang
6. Thêm 1 HTML/Javascript và thêm vào code sau

<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:
- 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 đó.

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

Chúc bạn thành công