VECTOR CODE BLOGSPOT

Vector code: Tạo cây thư mục cho Blog
_________________________________________________________________________________

Hình ảnh minh họa:

►Bây giờ bắt đầu cài đặt:
1. Đăng nhập blog
2. Vào Bố Cục (Layout)
3. Vào chỉnh sửa Code HTML (Edit HTML)
4. Chèn đọan code CSS bên dưới vào ngay trên dòng </head> 

<link rel="StyleSheet" href="http://ahom24.googlepages.com/dtree.css" type="text/css" />

<script type="text/javascript" src="http://ahom24.googlepages.com/dtree.js"></script>

5. Save template lại.
6. Vào Bố cục -> Phần tử trang -> tạo một Widget HTML/Javascript.
7. Chèn đọan code bên dưới vào Widget vừa tạo:

<div class="dtree">

<!-- Có thể bỏ đọan code này nếu bạn muốn -->

<p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>

<!-- Có thể bỏ đọan code này nếu bạn muốn -->


<script type="text/javascript">

d = new dTree('d');

d.add(0,-1,'Home','http://yourblog.blogspot.com');


d.add(1,0,'Main Menu 1')

d.add(2,0,'Main Menu 2','','','','URL Image of Main Menu 2');
d.add(10,2,'Sub Menu 2.1','Link Sub Menu 2.1','','','Link Image of Sub Menu 2.1');
d.add(20,2,'Sub Menu 2.2','Link Sub Menu 2.2','','','Link Image of Sub Menu 2.2');
d.add(30,2,'Sub Menu 2.3','Link Sub Menu 2.3','','','Link Image of Sub Menu 2.3');
d.add(40,2,'Sub Menu 2.4','Link Sub Menu 2.4','','','Link Image of Sub Menu 2.4');
d.add(50,2,'Sub Menu 2.5','Link Sub Menu 2.5','','','Link Image of Sub Menu 2.5');


d.add(3,1,'Main Menu 3','');
d.add(10,3,'Sub Menu 3.1','Link Sub Menu 3.1');
d.add(20,3,'Sub Menu 3.2','Link Sub Menu 3.2');
d.add(30,3,'Sub Menu 3.3','Link Sub Menu 3.3');
d.add(40,3,'Sub Menu 3.4','Link Sub Menu 3.4');
d.add(50,3,'Sub Menu 3.5','Link Sub Menu 3.5');

d.add(4,1,'Main Menu 4');
d.add(10,4,'Sub Menu 4.1','Link Sub Menu 4.1');
d.add(20,4,'Sub Menu 4.2','Link Sub Menu 4.2');
d.add(30,4,'Sub Menu 4.3','Link Sub Menu 4.3');
d.add(40,4,'Sub Menu 4.4','Link Sub Menu 4.4');
d.add(50,4,'Sub Menu 4.5','Link Sub Menu 4.5');



d.add(5,0,'Main Menu 5','Link URL Main Menu 5','{Your Text}','','Link Image for Main Menu 5');
d.add(6,0,'Main Menu 6','Link URL Main Menu 6','{Your Text}','','Link Image for Main Menu 6');
d.add(7,0,'Main Menu 7','Link URL Main Menu 7','{Your Text}','','Link Image for Main Menu 7');

d.add(8,0,'Recycle Bin','Link URL','Recycle bin','','http://amen24.googlepages.com/trash.gif');

document.write(d);

</script>
</div>

8. Save lại.

►Đọc hiểu code:
- Các dòng code màu đỏ là link liên kết của bạn.
- Các dòng code màu xanh là link ảnh (icon cho menu)
- http://yourblog.blogspot.com : thay bằng blog của bạn.
- Để thêm các menu chính bạn thêm code sau:

d.add(9,0,'Main Menu 9','Link URL Main Menu 9','{Your Text}','','Link Image for Main Menu 9');
d.add(10,0,'Main Menu 10','Link URL Main Menu 10','{Your Text}','','Link Image for Main Menu 10');

- Và thêm các menu phụ thì bạn thêm như sau, ví dụ menu phụ cho Main Menu 9:

d.add(9,0,'Main Menu 9','Link URL Main Menu 9','{Your Text}','','Link Image for Main Menu 9');
d.add(10,9,'Sub Menu 9.1','Link Sub Menu 9.1');
d.add(20,9,'Sub Menu 9.2','Link Sub Menu 9.2');
d.add(30,9,'Sub Menu 9.3','Link Sub Menu 9.3');
d.add(40,9,'Sub Menu 9.4','Link Sub Menu 9.4');
d.add(50,9,'Sub Menu 9.5','Link Sub Menu 9.5');

Lưu ý là các số 10, 20, 30 phải liên tục.

►Một lưu ý cuối cùng: có thể tiện ích sẽ không hiển thị được, điều này là do 2 link:

http://ahom24.googlepages.com/dtree.css

http://ahom24.googlepages.com/dtree.js

_________________________________________________________________________________

TẠO MENU CÓ HIỆU ỨNG ĐỘNG

<script type="text/javascript" src="http://dl.dropbox.com/u/66348944/Jquery1.3.2.js"></script>
<script src="http://dl.dropbox.com/u/66348944/flipmenu.js" type="text/javascript"> </script>
<style>
.flipmenu {
font-family: Times new roman;
font-size: 16px;
font-weight: bold;
position: relative;
}

.flipmenu_box {
overflow: hidden;
position: relative;
}

.flipmenu_link,.flipmenu_link_over,.flipmenu_link_active {
width:250px;
text-decoration: none;
text-shadow:1px 1px 1px #fff;
text-transform: uppercase;
color: #000000;
cursor: pointer;
margin-top:2px;
padding: 6px;
position: absolute;
background: #fdd78d;
background: -moz-linear-gradient(top, #fbdc88 0%, #fbbf57 50%, #fac319 51%, #fb9709 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbdc88), color-stop(50%,#fbbf57), color-stop(51%,#fac319), color-stop(100%,#fb9709)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbdc88', endColorstr='#fb9709',GradientType=0 );
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

.flipmenu_link_over,
.flipmenu_link_active {
text-decoration: none;
text-shadow:1px 1px 1px #eee;
color: #fa0320;
background: #aebcbf;
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 50%, #0a0e0a 51%, #0a0809 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(50%,#6e7774), color-stop(51%,#0a0e0a), color-stop(100%,#0a0809)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 );
</style>

<div id="flip_menu">
<a href="#">● Thủ thuật Windows 7</a>
<a href="#">● Thủ thuật Windows XP</a>
<a href="#">● Thủ thuật Internet</a>
<a href="#">● Thủ thuật USB</a>
<a href="#">● Thủ thuật Yaoo-Gmail</a>
<a href="#">● Thủ thuật Windows</a>
<a href="#">● Thủ thuật Blogspot</a>
<a href="#">● Chuyên đề máy tính</a>
<a href="#">● Tổng hợp</a>
<a href="#">● Linh tinh</a>
</div>

Read more: TẠO MENU DỌC CÓ HIỆU ỨNG ĐỘNG | dunghennessy 
Under Creative Commons License: Attribution Share Alike