Home » All posts

TẠO MENU NGANG CÓ NHIỀU MENU CON XỔ DỌC XUỐNG NHIỀU CẤP (KIỂU 1)

Người đăng: kiemdaigia on Chủ Nhật, 15 tháng 5, 2011

Nếu trên Blog của bạn có quá nhiều trang riêng lẻ thì công việc tạo menu ngang là cần thiết, có nhiều cách để tạo ra menu ngang (bạn có thể xem các mẫu menu ngang đơn giản TẠI ĐÂY).
Ngoài cách trên, bạn có thể tạo cho mình một menu có nhiều menu con xổ dọc xuống khi bạn click vào một menu chính bất kỳ, điều này sẽ làm cho Blog bạn trông "gọn gàng" hơn và "Pro" hơn rất nhiều.
Mời bạn bấm Xem thử phía dưới để trải nghiệm trước menu ngang này

Xem thử

Để tạo được như vậy, các bạn cần làm theo các bước sau đây:
Đầu tiên, bạn đăng nhập vào Blog > Chọn bố cục > Thêm tiện ích HTML/Javacript (nếu chưa biết cách thêm tiện ích HTML/Javacript thì mời bạn xem TẠI ĐÂY). Sau đó dán toàn bộ code phía dưới vào.
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1.css" />
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1-v.css" />

<script type="text/javascript" src="https://dl.dropbox.com/u/66348944/dunghennessy/jquery.min.js"></script>
<script type="text/javascript" src="https://dl.dropbox.com/u/66348944/dunghennessy/menungangxodoc1.js">

</script>

<script type="text/javascript">

ddsmoothmenu.init({
    mainmenuid: "smoothmenu1", //menu DIV id
    orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
    classname: 'ddsmoothmenu', //class added to menu's outer DIV
    //customtheme: ["#1c5a80", "#18374a"],
    contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

ddsmoothmenu.init({
    mainmenuid: "smoothmenu2", //Menu DIV id
    orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
    classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
    //customtheme: ["#804000", "#482400"],
    contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>

<div id="smoothmenu1" class="ddsmoothmenu">

<ul>

<li><a href="http://www.dunghennessy.blogspot.com">Home</a></li>

<li><a href="#"> Tên menu chính 1 </a>

  <ul>

  <li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>  
  <li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 1 </a></li>
  </ul>

</li>

<li><a href="#"> Tên menu chính 2</a>

  <ul>

  <li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>  
  <li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>
  <li><a href=" địa chỉ trang "> Tên menu phụ 2 </a></li>

   </ul>

 </li>

 <li><a href=" địa chỉ trang "> Tên menu chính 3</a></li>

 <li><a href="#"> Tên menu chính 4</a>

   <ul>

   <li><a href=" địa chỉ trang "> Tên menu phụ 4 </a></li>

   <li><a href="#"> Tên menu phụ 4 </a>

     <ul>

     <li><a href=" địa chỉ trang "> Tên menu phụ 4/1 </a></li>

     <li><a href=" địa chỉ trang "> Tên menu phụ 4/1 </a></li>
    <li><a href="#"> Tên menu phụ 4/2 </a>

   <ul>

       <li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>

       <li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>

       <li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>

       <li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>

       <li><a href=" địa chỉ trang "> Tên menu phụ 4/3 </a></li>

   </ul>

     </li>

     <li><a href=" địa chỉ trang "> Tên menu phụ 4/2 </a></li>

     </ul>

   </li>

   </ul>

 </li>

 <li><a href=" địa chỉ trang "> Tên menu chính 5 </a></li>

 </ul>

 <br style="clear: left" />

 </div></!doctype>

Bây giờ bạn chỉ việc thay đổi các dòng lệnh màu đỏ và màu xanh theo ý của bạn, cuối cùng bấm Lưu và trở lại blog bạn sẽ thấy blog của mình sẽ có một menu ngang xổ dọc xuống các menu con khá tiện dụng...
Chúc bạn thành công

More about →
vào lúc 23:48 { Add nhận xét }
Nhãn: , ,

KHUNG CHỨA CODE MÀU XANH

Người đăng: kiemdaigia

Trước đây tôi có đăng bài "Tạo khung chứa code trong bài đăng", nay xin giới thiệu đến các bạn khung chứa code có màu nền xanh. Đây là code của nó


<textarea name="code" rows="2" cols="42" style="background:#A9F5A9;  color:#295F00; border:2px #295F00 dashed; line-height:1.5em;  padding:5px;"> TYPE YOUR TEXT AREA IN HERE </textarea>


Các bước đều giống bài trên nhưng khác ở chỗ sau khi dán code xong, bạn gõ nội dung mà mình muốn hiển thị  thay vào dòng chữ TYPE YOUR TEXT AREA IN HERE ngay tại ô chỉnh sửa HTML luôn, không cần phải bấm vào thẻ VIẾT trên góc phải trang đăng bài.


Bạn có thể thay đổi kích thước khung ở mục "cods" và số dòng ở mục "row" 
Chúc bạn vui

 


More about →










vào lúc
16:20



{ Add nhận xét }
          







Nhãn:
,















TẠO KHUNG CHỨA HÌNH ẢNH





Người đăng:
kiemdaigia on Thứ Bảy, 14 tháng 5, 2011




Ngoài việc tạo khung chứa code, bạn cũng có thể tạo khung có thanh trượt để chứa các hình ảnh của mình.
Đầu tiên, bạn đăng nhập Blog > chọn Thiết kế > chọn Thêm Tiện ích > Thêm HTML/Javacript rồi dán tất cả các code này vào:



Bây giờ, bạn thay đổi link ảnh và kích thước ảnh mà mình muốn hiển thị, cuối cùng bấm Lưu là xong.
Với code trên ta sẽ được hình như thế này:

scroll

scroll



scroll




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


More about →










vào lúc
16:25



{ Add nhận xét }
          







Nhãn:
,
,















TIỆN ÍCH BÀI VIẾT VỚI HIỆU ỨNG RƠI TỪ TRÊN XUỐNG





Người đăng:
kiemdaigia on Thứ Tư, 11 tháng 5, 2011




Để gắn tiện ích bài viết mới có kèm ảnh với hiệu ứng "rơi" từ trên xuống, các bạn cần làm các bước sau:
Đầu tiên, bạn đăng nhập Blog > chọn Thiết kế > chọn Thêm tiện ích > Thêm HTML/Javacript, sau đó dán tất cả các code này vào







 
<style type="text/css">

#spylist {
overflow:hidden;
margin-top:5px;
height:450px; /* độ cao của tiện ích*/
}
#spylist ul{
overflow:hidden;
list-style-type: none;
padding: 0px;

}
#spylist li {
border:1px dotted #0000ff;
width:208px; /* độ rộng của tiện ích*/
margin:0px 0px 5px 0px;
padding:2px 1px 2px 2px;
list-style-type:none;
float:none;
height:60px; /* độ cao của mỗi tiêu đề bài viết*/
overflow: hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMe9BSlq3ZGtrTpoMZ-WO4K4abrJMhwABN1hvPS98cEetJ6ua6stM8t2XH2kvkOtXQvOwJRfhHXOiPYe_crjH5B_InzPisrxGFfBgAJTbQGkm7r4uVKJ97FqhLRcQRwgOX66u1_B2Zf-31/); /* màu nền của tiện ích*/
}

#spylist li a {
text-decoration:none;
color:#0066cc;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px 0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li a:hover{
text-decoration:underline;
color:#ff0000;
}
#spylist li img {
float:left;
margin-right:5px;
border:1px;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#ff0066;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

</style>
<script src="http://dl.dropbox.com/u/66348944/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript">

imgr = new Array();

imgr[0] = "http://img138.imageshack.us/img138/7159/noimage.jpg";

limitspy = 6; //số bài trình diễn
intervalspy = 4000; //tốc độ chuyển đổi bài viết
showRandomImg = true;

boxwidth = 255;
cellspacing = 0;
borderColor = "#000000";
bgTD = "#fff";
thumbwidth = 60; //độ rộng ảnh thumb
thumbheight = 60; //độ cao ảnh thumb
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "no"; //nếu muốn hiển thị số comment thì bạn thay "no" thành "comments"
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10; //kích thước của text
summaryColor = "";
icon2 = " ";
numposts = 10; //số bài viết hiển thị
label = "Advanced blogger"; //nhãn bài viết (nếu hiển thị theo bài viết thì không cần quan tâm)
home_page = "http://www.dungheineken.blogspot.com/"; //địa chỉ blog của bạn
</script>
<div id="spylist"><script src="http://dl.dropbox.com/u/66348944/recent_post_spy.js" type="text/javascript"></script></div>

Sau đó, bạn thay đổi địa chỉ Blog của bạn và bạn có thể thay đổi các tùy chỉnh như trên code đã chú thích để chọn cho mình một tiện ích đẹp nhất nha. Cuối cùng bấm lưu lại và quay trở lại Blog xem kết quả. 
Ở code trên thì thủ thuật này sẽ hiển thị tất cả các bài ở Web/Blog, nếu muốn thủ thuật chỉ hiển thị ở một nhãn nhất định, bạn thay thế dòng code cuối cùng (màu đỏ) thành đoạn code như sau:
  
https://dl.dropbox.com/u/66348944/recent_label_spy.js


Với mã code ở trên thì chúng ta sẽ có tiện ích giống như thế này:




Xem thử






More about →










vào lúc
04:02



{ Add nhận xét }
          







Nhãn:
,















TẠO 4 BANNER QUẢNG CÁO 125X125 TRONG MỘT TIỆN ÍCH HTML/JAVACRIPT





Người đăng:
kiemdaigia on Chủ Nhật, 8 tháng 5, 2011




Các bạn thường thấy trên các trang Web/Blog họ hay đặt các khung banner quảng cáo nhỏ vào trong một tiện ích HTML/Javacript để tiết kiệm không gian cho Web/Blog.
Bạn cũng có thể làm được như vậy với các bước sau:
Đầu tiên bạn đăng nhập vào Blog > Chọn Thiết kế > Chọn Thêm tiện ích > Thêm HTML/Javacript rồi dán tất cả các code này vào:



Sau đó, bạn thay link liên kết ở dòng lệnh màu đỏ, link ảnh ở dòng lệnh màu xanh hoặc kích thước mình muốn ở height và Width:
<td><center><a href=" http://dunghennessy.blogspot.com " rel="nofollow" target="_blank"><img alt=" " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMo1xnuZtZ9C2SgJ_I26QjpSwMS71-FK-ui85ARExS4ui-5tk27JoSySq3NsGUqaVKlmzLX-Jc_XZ5t_JNd7a3VWzBrP6123XwKbAeGFhsjuNxuzpBjs_63e0XeqEkHfzKVlWI3SgeDoc/" border="0" height="125" width="125".
Sau đó bấm Lưu là xong, bây giờ bạn trở vào Blog sẽ thấy 4 banner hiển thị trên Blog của bạn.
Nếu muốn thêm nhiều banner nữa, bạn copy code này vào
  


Và dán phía trên dòng lệnh: </tbody></table></div>
Chúc các bạn thành công


More about →










vào lúc
16:24



{ Add nhận xét }
          







Nhãn:
,















LINK TEXT THAY ĐỔI MÀU LIÊN TỤC KHI RÊ CHUỘT VÀO LINK





Người đăng:
kiemdaigia on Thứ Bảy, 7 tháng 5, 2011




Để cho Blog mình thêm đẹp bạn có nhiều cách tạo hiệu ứng cho nó, trong giới hạn bài viết này, tôi sẽ giới thiệu đến các bạn đổi hình trỏ chuột kết hợp link text sẽ thay đổi màu liên tục khi rê chuột đến link.
Đầu tiên, bạn đăng nhập vào Blog > chọn Thiết kế > chọn Thêm tiện ích > Thêm HTML/Javacript rồi dán tất cả các code này vào



Và cuối cùng bấm Lưu lại là xong.
Nếu bạn không thích hình con chuột ở trên, bạn có thể thay đổi hình trỏ chuột khác bằng cách thay đổi dòng lệnh này:
http://lh5.ggpht.com/_TaHzV-QgYq0/S17G632P9HI/AAAAAAAAFRA/ArKIi6ah1Fo/redglitlnkslct.gif bằng link hình con trỏ chuột trên TRANG NÀY.
Bây giờ bạn trở lại vào blog để "hưởng thụ" thành quả nha
Chúc vui



More about →










vào lúc
16:54



{ Add nhận xét }
          







Nhãn:
,















TẠO MENU DỌC CHO NHÃN





Người đăng:
kiemdaigia on Thứ Sáu, 6 tháng 5, 2011




Mặc định các nhãn của Blogspot được hiển thị rất đơn điệu, nếu bạn muốn các nhãn hiển thị được đẹp hơn, bạn có thể tạo menu dọc cho nó, để tạo menu dọc các bạn phải dán code vào mã nguồn và một vào HTML/Javacrip.
Các bước như sau:
Đầu tiên, bạn đăng nhập Blog > chọn Thiết kế > Chỉnh sửa HTML, bấm đồng thời 2 phím Ctrl+F để mở hộp tìm kiếm, gõ vào khung lệnh ]]></b:skin>, sau đó dán code trong khung màu xanh vào phía trên nó và lưu lại. Tiếp theo bạn vào Thiết kế > Thêm tiện ích > Thêm HTML/Javacript và dán code trong khung màu tím vào, thay đổi các đường link của nhãn, viết tên hiển thị của nhãn, cuối cùng lưu lại là xong (Bạn có thể xem thêm chỉ dẫn chi tiết cách thức dán các code TẠI ĐÂY)
  
Mẫu 1:


Dán vào HTML/Javacript



Mẫu 2:


Dán vào HTML/Javacritp



Mẫu 3:


Dán vào HTML/Javacritp


Mẫu 4:


Dán vào HTML/Javacript




Mẫu 5:


Dán vào HTML/Javacript




Mẫu 6:


Dán vào HTML/Javacript




Mẫu 7:


Dán vào HTML/Javacript




Mẫu 8:


Dán vào HTML/Javacript




Mẫu 9:


Dán vào HTML/Javacript




Mẫu 10:


Dán vào HTML/Javacript




Mẫu 11:


Dán vào HTML/Javacript




Mẫu 12:


Dán vào HTML/Javacritpt




Mẫu 13:


Dán vào HTML/Javacript




Mẫu 14:


Dán vào HTML/Javacript




Mẫu 15:


Dán vào HTML/Javacript




Mẫu 16:


Dán vào HTML/Javacript




Mẫu 17:


Dán vào HTML/Javacript




Mẫu 18:



Dán vào HTML/Javacript




Mẫu 19:


Dán vào HTML/Javacript




Mẫu 20:


Dán vào HTML/Javacript




Mẫu 21:


Dán vào HTML/Javacript




Mẫu 22:


Dán vào HTML/Javacript




Mẫu 23:



Dán vào HTML/Javacript




Mẫu 24:


Dán vào HTML/Javacript




Mẫu 25:


Dán vào HTML/Javacript




CHÚC CÁC BẠN CÓ MỘT MENU DỌC ĐẸP CHO BLOG


More about →










vào lúc
01:02



{ Add nhận xét }
          







Nhãn:
,