Tạo Quick Menu, Menu Mục Lục Tổng Hợp Bài Viết cho Blog

+Bước 1 :

      Các bạn vô 1 web làm button mình chọn trang web http://cooltext.com.

      Sau khi trang này bạn  đăng ký cho mình 1 tài khoản rồi sau đó click vào Cool Text  để xem các kiểu chữ nha.

       Xuống dưới cùng  Choose a Button Design chọn cho mình 1 cái button ưng ý click vô nó.

      Sau đó là trang thiết kế cho button nào là font, bóng, viền, dạng buttom, …. Các bạn tự tìm hiểu nha nếu thấy ưng ý rồi thì các bạn nhấp vào Render Button để xem thành quả của mình.

      Đến đây các bạn click vào Get HTML Code để lấy code ảnh rồi up lên host, còn riêng tôi thì tôi click chuột phải chọn Copy Image Location lấy link rồi up lên host luôn cho nhanh.

Tương tự các bạn làm cho các button khác, đơn giản quá phải không.

+Bước 2 : Chèn Code vô:

Code:

<a href="(Link Ảnh)"><img style="width: Apx; height: Bpx;" src="(Đường link cần dẫn đến)"></a>

 

      Đơn giản quá phải không, nhớ phải thay kích thước và chiều cao vào nha. Nếu muốn xuống dòng thì thêm thẻ lệnh <br>, code sẽ là

 

<a href="(Link Ảnh)"><img style="width: Apx; height: Bpx;" src="(Đường link cần dẫn đến)"></a> <br>

      Và muốn mấy cái button thì cứ copy code rồi chèn hình vô.

      Ví dụ như Menu của mình 3 cái đầu Code như thế này :

 

<a href="http://vn.myblog.yahoo.com/jesuloveyou85/"><img style="width: 135px; height: 35px;" src="http://i430.photobucket.com/albums/qq29/khanhmytho/Menu%20jesus/cooltext426160419.png"></a> <br> <a href="http://vn.myblog.yahoo.com/Duc-Tin/index?l=f&id=4"><img style="width: 135px; height: 35px;" src="http://i430.photobucket.com/albums/qq29/khanhmytho/Menu%20jesus/cooltext426160770.png"></a> <br> <a href="http://vn.myblog.yahoo.com/Duc-Tin/index?l=f&id=5"><img style="width: 135px; height: 35px;" src="http://i430.photobucket.com/albums/qq29/khanhmytho/Menu%20jesus/cooltext426160246.png"></a> <br>

 

+Bước 1 :

      Các bạn hãy tìm cho mình 1 cái nền menu thật ưng ý hay thấy ở blog nào đẹp Copy cũng được , như cái của mình là Copy của blog khác (hì, cái nào chôm là cứ công nhận chôm).

      Mình cũng chôm được mấy cái dành cho các bạn đây.

     http://i430.photobucket.com/albums/qq29/khanhmytho/Menu%20jesus/bar-menu.png

      Còn bạn nào giỏi Photoshop thì tự thiết kế cho mình nhá

      Sau khi đã chọn cái nền ưng ý rồi thì các bạn dùng Code này vào Entry soạn thảo bật thẻ HTML lên và đánh code vào:

<table style="width: Apx; height: Bpx;" bgcolor="#ffffff" border="0"><tbody><tr><td background="(Link Ảnh)" height="100"><font size="2"><strong style="color: rgb(0, 255, 255);"><a href="(Link cần dẫn đến)">(Nội dung)</a> </strong></font> </td></tr></tbody>

Ví dụ như hình dưới:

Code:

<DIV id=tabl1>
<TABLE height=20 cellSpacing=0 cellPadding=4 width=150 align=center border=0>

<TBODY>

<TR>

<TD id=td1 vAlign=top align=left width=150 background="(link nền cho module)" height=20>

<span><img src="(link hình icon)" border="0"></span><span><font face="Times New Roman" color="#000000" size="2"><a href="(link liên kết đến bài viết)" target="_blank">Nội dung tiêu đề bài viết</a></font></span><span><br></span>

---Muốn chèn thêm bài viết bạn lại copy code này và lại dán tiếp sau nó Và cuối cùng là kết thúc bằng code sau </TD></TR></TBODY></TABLE></DIV>

 

Xong rồi nếu muốn thêm thì cứ Copy thêm ra nha

      Dạng 2: dạng ngang (Cột)

Code:

<DIV id=tabl1>

<TABLE height=20 cellSpacing=0 cellPadding=4 width=500 align=center border=0>

<TBODY>

<TR>

<TD id=td1 vAlign=top align=left width=250 background="(Link nền cho cột một)" height=20>
<span><img src="(link hình trước tiêu đề bài viết)" border="0"></span> <span><font face="Arial" color="#000000" size="2"><a href="(link liên kết đến bài viết)" target="_blank"> Tiêu đề bài viết </a></font></span> <span><br></span>

--Muốn chèn thêm bài viết bạn lại copy code này và lại dán tiếp sau .kết thúc cột một chuyển sang cột hai bằng thẻ;</td>

<TD id=td1 vAlign=top align=left width=250 background="(link nền cho cột hai)"