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

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 !

20 Nhận xét on "Tạo thanh Dock cho Blogger (cực cool)"

RoboOnline.Tk on 29 March 2009 at 14:20 said...

Từ nay cộng đồng Blogger đã có một thủ thuật mới cực cool. Bài viết thật đáng để hoan nghênh! Cảm ơn bạn! :)

Pika Rock on 30 March 2009 at 00:10 said...

hay thế :)>-

NAD on 30 March 2009 at 01:25 said...

Thanks. Mình góp ý chút:

Thanh Dock của Mac OS khi chỉ vào tab nào thì nó phóng to biểu tượng của tab đấy lên. Cái này tớ đã test nhưng ko thấy thế :D

Ngankvn ® on 30 March 2009 at 09:59 said...

Quá Cool , quá tuyệt vời với FF và quá xấu với IE

Benjami Tennyson on 30 March 2009 at 18:48 said...

@RoboOnline.Tk : Hì, mình chỉ chia sẻ cho mọi người cùng biết thôi mà ^^!

@Pika Rock : Bạn Pika áp dụng thử chưa :D ?

@NAD : Ý của bạn là icon hả , mình test thấy nó có phóng to icon khi rê chuột tới mà (hình minh họa ở đầu bài viết).
P/s : Nếu mình nói sai thì bạn thông cảm nhé ^^! , chưa xài thanh Dock của Mac bao giờ :D , chỉ mới xài Rocket Dock thôi :P

@Ngankvn ® : IE muốn chia sẻ thị phần cho FF với Safari rồi :D

[L]-[K] on 30 March 2009 at 21:24 said...

bác cho xem mấy cái sample đi, xem có hợp kô

RoboOnline.Tk on 31 March 2009 at 19:15 said...

IE chiếm thị phần? cái này có tính vào ngày 1/4 không nhỉ :D theo mình IE chiếm thị phần đúng hơn :D ủa mà ie vẫn hiển thị tốt mà ta?? ...nói chung là quá tuyệt :)

sample à? qua Www.RoboOnline.Tk là thấy liền hà :D hihi

Nhưng mà dù sao thì cũng phải hỏi cái đã, bên mình hệ thống truy xuất nền toàn màu trắng, mà chữ của tiện ích này cũng trắng nốt thì sao đây nhỉ ??

(Super Comment from Www.RoboOnline.Tk)

Benjami Tennyson on 1 April 2009 at 00:10 said...

@[L]-[K] : Bạn có thể vào Roboonline.tk để xem thử thanh dock nhé :D

@RoboOnline.Tk : Chưa tới 1/4 mà bạn ^^! , mà IE thì cũng tùy version thôi, nhưng mình đều cảm giác chạy không mượt như trên Firefox.
Còn về thanh Dock, đây là code khắc phục tình trạng màu chữ trùng với nền : http://boyprodx.110mb.com/uvumi-dock-black.css , bạn copy nó rồi dán đè lên code http://boyprodx.110mb.com/uvumi-dock.css nhé ! Chúc vui :D

Rocky on 8 April 2009 at 22:33 said...

Thank bạn very much. Cái này đẹp quá!

RoboOnline.Tk on 19 April 2009 at 18:38 said...

Cảm ơn sự nhiệt tình & chu đáo của bạn^^! Mình làm thành công rùi, đa tạ đa tạ ^^! Chúc blog của bạn ngày càng phát triển & có thêm nhìu thủ thuật mới cho dân blogger tụi mình nhé!

Benjami Tennyson on 20 April 2009 at 17:40 said...

@Rocky & RoboOnline.Tk : U're welcome :D

fandung-tester on 22 April 2009 at 15:27 said...

Xin giới thiệu với các bạn, blog của mình
http://fandung.blogspot.comKhá nhiều thủ thuật hay cho Blogspot, đảm bảo có những thủ thuật các bạn chưa biết.

Cảm ơn đã đọc bài.

Anonymous said...

fandung-tester này, người ta đang thảo luận tự nhiên chạy zdô quảng cáo ~_~

♂..V!Ø|€† ♥ M¥ |_!ŋђ..♀ on 1 July 2009 at 16:09 said...

Thks bạn nhìu nhaz, đẹp đấy :D

Mika Nguyen on 17 July 2009 at 08:55 said...

Ban oi cho toi hoi minh ko the de menu truc tiep vao code HTML chinh ha ban ? vi neu minh bo vao Html con thi no hien o duoi cung nhin xau qua .ban giup minh lam giong trang www.9xozo.net nha .Bai huong dan ban vui long post coment vao http://calldesign.blogspot.com/ hoac Y!m : pro_mikanguyen .Tran trong cam on! Chuc Vui ve!

ngan ling on 18 July 2009 at 00:07 said...

moi nguoi di dau thi di neu co thay gi bat thuong PM cho anh em voi nha vi nhieu luc code khong cos trong template thi lamf the nao dc

ngan ling on 18 July 2009 at 00:11 said...

không có demo hả sếp em cũng chưa biết thank này như thế nào mà

boyproDX on 18 July 2009 at 12:46 said...

@Mika Nguyen : Do code gốc của Mootools đã mặc định thanh Dock hiển thị ở cuối trang, nên bạn cần phải sửa lại code nếu muốn Dock hiển thị theo vị trí xác định. Hiện tại thì mình đang tìm cách làm khác cho thủ thuật này nên chưa thể giúp bạn sửa code này đc, bạn thông cảm nhé :)
@ngan ling : Có cái hình đầu bài làm ... demo đó bạn :D . Thông cảm vì mấy trang test mình remove mất mấy thủ thuật này rồi :| , nên bạn hãy thử nghiệm ngay trên Blog của mình nhé :)

SeS Online on 22 April 2012 at 20:30 said...

chào bạn, ko biết bạn có thể giúp mình biến nó thành 1 widget đc ko? mình muốn nó ở chính giữa trang web chứ ko muốn nó là 1 thanh dock !
rất cảm ơn nếu bạn trả lời!

Ngu Học on 3 May 2012 at 17:30 said...

thằng này chuyên leech bài chứ biết cái cặc gì mà trả lời đâu

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3