Thủ thuật mình sắp giới thiệu dưới đây dùng nhiều code javascript , css và hình ảnh , vì thế bạn nên kiểm tra lại tốc độ của Blog trước khi áp dụng thủ thuật này vào mã nguồn template. Nếu blog bạn load nhanh và ổn định thì Dock Menu sẽ chạy rất mượt mà.
Bước 1 : Đăng nhập vào Blogger > Layout > Edit HTML (không cần Mở rộng Mẫu tiện ích)
Bước 2 : Tìm đoạn code </head> và thêm vào ngay bên trên đoạn code bên dưới :
<!--DOCK-MENU-STARTS-->
<script src='http://boyprodx.110mb.com/mootools-for-dock.js' type='text/javascript'> </script>
<script src='http://boyprodx.110mb.com/UvumiDock-compressed.js' type='text/javascript'> </script>
<link href='http://boyprodx.110mb.com/uvumi-dock.css' media='screen' rel='stylesheet' type='text/css'/>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="http://boyprodx.110mb.com/uvumi-dock-ie6.css" />
<![endif]-->
<script type='text/javascript'>
var myDock = new UvumiDock("dock");
</script>
<!--DOCK-MENU-STOP-by boyproDX.blogspot.com-->
<script src='http://boyprodx.110mb.com/mootools-for-dock.js' type='text/javascript'> </script>
<script src='http://boyprodx.110mb.com/UvumiDock-compressed.js' type='text/javascript'> </script>
<link href='http://boyprodx.110mb.com/uvumi-dock.css' media='screen' rel='stylesheet' type='text/css'/>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="http://boyprodx.110mb.com/uvumi-dock-ie6.css" />
<![endif]-->
<script type='text/javascript'>
var myDock = new UvumiDock("dock");
</script>
<!--DOCK-MENU-STOP-by boyproDX.blogspot.com-->
Bước 3 : Trở về Layout > Page Elements và thêm 1 phần tử HTML/Javascript với nội dung bên dưới :
<ul id="dock">
<li><a href="http://boyprodx.blogspot.com/"><img src="http://img2.pict.com/e6/c4/62/bd0208cba8978d6925a52fcc13/ffLeX/home128.png" alt="Home"/></a></li>
<li><a href="http://feeds2.feedburner.com/boyprodx"><img src="http://img2.pict.com/56/08/85/44a94d4fcc3b84fb4d23485d11/lq8D1/feediconblue128.png" alt="RSS"/></a></li>
<li><a href="http://boyprodx.blogspot.com/2008/01/lin-h.html"><img src="http://img2.pict.com/6b/c4/6c/1641965548b2f47150739e626a/6txt0/mail128x128.png" alt="Liên hệ"/></a></li>
<li><a href="#About"><img src="http://img2.pict.com/25/32/d2/ed6acfa663393ce085c8c2d142/tcKUM/helpabout.png" alt="About"/></a></li>
<li><a href="#"><img src="http://img2.pict.com/da/d6/26/4d322a5b86eb2ff3fc58561134/QQmBc/up.png" alt="Back to Top"/></a></li>
</ul>
Thay thế các đường link màu đỏ bên trên thành các link url và hình ảnh của Blog bạn. Save lại và kiểm tra kết quả.<li><a href="http://boyprodx.blogspot.com/"><img src="http://img2.pict.com/e6/c4/62/bd0208cba8978d6925a52fcc13/ffLeX/home128.png" alt="Home"/></a></li>
<li><a href="http://feeds2.feedburner.com/boyprodx"><img src="http://img2.pict.com/56/08/85/44a94d4fcc3b84fb4d23485d11/lq8D1/feediconblue128.png" alt="RSS"/></a></li>
<li><a href="http://boyprodx.blogspot.com/2008/01/lin-h.html"><img src="http://img2.pict.com/6b/c4/6c/1641965548b2f47150739e626a/6txt0/mail128x128.png" alt="Liên hệ"/></a></li>
<li><a href="#About"><img src="http://img2.pict.com/25/32/d2/ed6acfa663393ce085c8c2d142/tcKUM/helpabout.png" alt="About"/></a></li>
<li><a href="#"><img src="http://img2.pict.com/da/d6/26/4d322a5b86eb2ff3fc58561134/QQmBc/up.png" alt="Back to Top"/></a></li>
</ul>
P/s : Vậy là bạn đã có được thanh DockMenu cho Blog của mình rồi đấy. Mọi thắc mắc và ý kiến về thanh Dock này , bạn hãy gửi comment lại bên dưới. Mình sẽ nhanh chóng trả lời. Chúc vui !
