Tạo thanh Dock cho Blogger (cực cool)

Như các bạn đã biết, hệ điều hành MacOS X của Apple luôn có 1 thanh dock giúp người dùng dễ quản lý. Với giao diện bắt mắt và sang trọng, thanh Dock dễ dàng làm người ta chú ý đến nó. Vậy phải làm sao để tạo 1 thanh DockMenu cho Blogger nhỉ ? Mời bạn đọc bài viết này !

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(&quot;dock&quot;);
</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ả.
Gửi bài viết này cho bạn bè qua Y!M: » Tạo thanh Dock cho Blogger (cực cool) : http://f69dkm.blogspot.com/2011/12/tao-thanh-dock-cho-blogger-cuc-cool.html