Tao menu nhieu cap trong bloger

MENU DỌC XỔ XUỐNG NHIỀU CẤP

Với thủ thuật dưới đây, trên blog của bạn sẽ có một menu dọc khá đặc biệt, đó là khi bạn rê chuột vào một menu bất kỳ thì nó sẽ xổ ra một số menu con nhiều cấp nữa.
Bạn có thể làm menu con cấp 2, cấp 3...tuỳ thuộc vào link liên kết nhiều hay ít.

Mời bạn bấm vào Xem thử phía dưới để trải nghiệm nha. 
Thủ thuật này chỉ áp dụng cho các Blog sử dụng giao diện V2 (giao diện được tải trên mạng về) không áp dụng cho các giao diện mặc định của Blogspot...

Xem thử

Bạn chỉ cần đăng nhập vào Blog > Chọn Thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blogspot mới thì đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán đoạn code phía dưới vào.

<style type="text/css">

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 200px; /* Độ rộng của menu chính cấp 1 */
border-bottom: 1px solid #ccc;
}

.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 250px; /* Độ rộng của menu con cấp 2 và 3 */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilxg6Vb1WRINfehoqIAvbdnN1SeqmgWZr7OK5e00W5tABpap6p1_BhI1EqKoxBhdsvy4DQpNcC3PHBT8oi4W-pjZdP79aTifLUokpnSt48BWns5GJI4zarjsq9knZCpTqB3gZ93eWwZUk1/s1600/right.gif) no-repeat 97% 50%;
}


</style>

<script type="text/javascript">


var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
    for (var t=0; t<ultags.length; t++){
    ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
  if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
   ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
  else //else if this is a sub level submenu (ul)
    ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
    ultags[t].parentNode.onmouseover=function(){
    this.getElementsByTagName("ul")[0].style.display="block"
    }
    ultags[t].parentNode.onmouseout=function(){
    this.getElementsByTagName("ul")[0].style.display="none"
    }
    }
  for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
  ultags[t].style.visibility="visible"
  ultags[t].style.display="none"
  }
  }
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Tên menu cấp 1</a></li>

<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  </ul>
</li>

<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a>
<ul>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    </ul>
  </li>

  <li><a href="#">Tên menu cấp 2</a>
<ul>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li> 
    </ul>
  </li>


  <li><a href="#">Tên menu cấp 2</a>
    <ul>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    <li><a href="#">Tên menu cấp 3</a></li>
    </ul>
  </li>
</ul>

<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a>
<ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>

  <li><a href="#">Tên menu cấp 2</a>
<ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>


  <li><a href="#">Tên menu cấp 2</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
</ul>


<li><a href="#">Tên menu cuối</a></li>

</li></li></ul></div>

Bây giờ, bạn cần thay đổi các dòng lệnh màu đỏ (bao gồm kích thước, màu nền, tiêu đề và đường link liên kết # của menu), cuối cùng bấm Lưu lại là xong.

Mở rộng thêm:
* Muốn thêm 1 menu chỉ có một cấp thì copy dòng code này.
<li><a href="#">Tên menu cấp 1</a></li>

Dán phía trên dòng lệnh
<li><a href="#">Tên menu cuối</a></li>

* Muốn thêm 1 menu có 2 cấp thì dán dòng code này:
<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a></li>
  <li><a href="#">Tên menu cấp 2</a></li>
  </ul>
</li>
Dán phía trên dòng lệnh:
<li><a href="#">Tên menu cuối</a></li>


* Muốn thêm 1 menu có 3 cấp thì dán dòng code này:
<li><a href="#">Tên menu cấp 1</a>
  <ul>
  <li><a href="#">Tên menu cấp 2</a>
<ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Sub Item 2.1.3</a></li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
Dán phía trên dòng lệnh:
<li><a href="#">Tên menu cuối</a></li>

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

Read more: MENU DỌC XỔ XUỐNG NHIỀU CẤP | dunghennessy
Under Creative Commons License: Attribution Share Alike

Read more »

Posted in: Blogspot - Bloger

Chèn Flash Vào Blogspot

Trước đây, tôi có chia sẻ với các bạn phần mềm tạo Banner flash động để trang trí cho Blog. Sau khi tạo xong file flash, các bạn phải up load files flash này lên host để lấy link chèn vào blog. Hiện tại thì có rất nhiều host free để các bạn sử dụng nhưng tôi thường sử dụng Google Sites. Hôm nay, tôi chia sẻ với các bạn cách upload files Flash và code để các bạn chèn file Flash vào Blog.

Đầu tiên, bạn VÀO ĐÂY và đăng nhập bằng tài khoản Gmail của mình. Bước kế tiếp, bạn tạo cho mình một trang Web mới (chủ yếu để mình upload file Flash nên bạn không cần chú ý đến giao diện hoặc bố cục của trang Web này).

Sau khi tạo được trang Web mới, bạn đăng nhập vào trang Web bấm chọn thẻ Tác vụ khác và chọn Quản lý trang Web.

Tiếp theo một trang mới xuất hiện, bạn chọn mục Tài liệu đính kèm nằm ở khung bên trái của trang Web.

Kế tiếp, bạn bấm thẻ Tải lên ở menu trên cùng để upload file flash , bạn chờ vài giây sau khi thành công thì file flash sẽ hiện ở khung bên tay phải đi kèm theo là tên của file flash và thời gian upload...Bây giờ bạn bấm vào chữ Xem để xem và lấy link.

Cuối cùng để chèn vào Blog, bạn dán link của file flash lúc nãy vào code phía dưới đây.

<embed bgcolor="#FFFFFF" height="250" width="1000" pluginspage="http://www.macromedia.com/go/getflashplayer" src="Dán link file flash của bạn ở đây " type="application/x-shockwave-flash" >
</embed>

Sau đó, bạn copy tất cả các code trên và đăng nhập vào Blog > chọn Thiết kế > thêm tiện ích HTML/Javacript rồi dán vào và bấm Lưu lại là xong, bạn có thể thay đổi kích thước mình muốn ở Height (chiều cao), Width (chiều rộng). 

Bây giờ, bạn quay trở lại Blog sẽ thấy có một file flash "đẹp" được hiển thị trên Blog của mình.

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

Read more »

Posted in: Blogspot - Bloger