Tạo Tab Nội Dung đơn giản với HTML, CSS, jQuery cho Blogger, Wordpress

Lời đầu tiên thì xin độc giả thứ lỗi vì đã quá lâu rồi không đăng bài mới, để blog trống không lâu quá chắc nhiều người cũng quên mất mình luôn rồi. Đối với những độc giả thường xuyên của blog mình, về tương lai mình sẽ có gắng sắp xếp thời gian tiếp tục với các bài viết hướng dẫn mọi người về Blogger, lập trình, marketing, adsense,... cũng như giải đáp thắc mắc nhiều hơn cho mọi người nhé.

Chủ đề chính là gần đây có bạn hỏi mình về cách phân trang bài viết cho Blogspot. Thế tiện thể đây mình làm một bài hướng dẫn về vấn đề này. Thực chất thì thủ thuật này có tên gọi là Tab Nội Dung (Tabbed Content) rất nhiều trên mạng, đủ cách làm Javascript, jQuery ngay cả CSS3 không cũng làm được nữa. Và không chỉ dành riêng cho Blogspot mà bất cứ mã nguồn nào hỗ trợ những ngôn ngữ làm web cơ bản.

Bài viết này chúng ta sẽ cùng nhau làm các Tab mà trong mỗi Tab là những phần nội dung của chúng ta. Việc phân chia nội dung theo Tab có nghĩa là sao, toàn bộ phần nội dung sẽ không được hiển thị mà sẽ được chia ra từng phần nhỏ nằm trong từng Tab. Khi người dùng chọn vào một Tab bất kì thì website sẽ hiển thị lên nội dung tương ứng. Chúng ta bắt đầu vào làm nó nhé, lần này mình sẽ hướng dẫn bằng jQuery, bạn nào thích mình hướng dẫn bên CSS3 thì có thể cho mình biết nhé.

Cấu trúc HTML

Đối với cấu trúc cho việc làm Tab Nội dung thì khá đơn giản.

<ul id="tabs">
    <li class="active">Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
    <li>Tab 4</li>
    <li>Tab 5</li>
</ul>
<ul id="tab">
    <li class="active">
        <h2>Nội dung cho tab 1</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 2</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 3</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 4</h2>
    </li>
    <li>
        <h2>Nội dung cho tab 5</h2>
    </li>
</ul>

 Cấu trúc HTML bao gồm chỉ thẻ ul và li. Nhìn sơ qua thì mình chắc mọi người cũng có thể đoán được là thẻ ul có class là tabs dùng để chứa các thẻ li là các Tab mà người dùng sẽ nhắp chọn. Còn thẻ ul có class là tab chứa nội dung tương ứng với các tab đó.

Phần CSS

color: #fff;
    cursor: pointer;
}
ul#tabs li:hover {
    background-color: #238b68;
}
ul#tabs li.active {
    background-color: #238b68;
}
ul#tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#tab li {
    display: none;
}
ul#tab li.active {
    display: block;
}

Đoạn css trên thì có một số điểm nổi bật như này thôi, một là các thẻ li chứa các tab sử dụng CSS property là display: inline-block giúp cho toàn bộ các tab đứng trên cùng 1 hàng. Thứ 2 là toàn bộ các thẻ li chứa nội dung đều sẽ bị ẩn (display: none), và những thẻ li nào có class là active sẽ được hiển thị (display: block).

Tính năng với jQuery 

Đây chắc là đoạn code quan trọng nhất giúp toàn bộ mọi thứ hoạt động, nó khá đơn giản thôi cùng xem nhé.

$(document).ready(function(){
    $("ul#tabs li").click(function(e){
        if (!$(this).hasClass("active")) {
            var tabNum = $(this).index();
            var nthChild = tabNum+1;
            $("ul#tabs li.active").removeClass("active");
            $(this).addClass("active");
            $("ul#tab li.active").removeClass("active");
            $("ul#tab li:nth-child("+nthChild+")").addClass("active");
        }
    });
});

 Đầu tiên chúng ta sẽ lắng nghe mọi hoạt động của toàn bộ các phần tử trên web, khi mà người dùng nhắp chọn vào thẻ li bất kì trong cặp thẻ ul có class là tabs, nếu thẻ nhắp chọn vào đang được mở rồi (có class là active) thì thôi, ngược lại nếu nó không phải thì thêm class là active vào thẻ đó, và tiếp tục tìm đến thẻ li hiện tại đang có class là active và xóa nó đi.

Thế làm sao mà nó biết được nội dung nào tương ứng để thêm class active để hiển thị phần nội dung đó lên? Nó là như thế này, mặc định đầu tiên chúng ta đã dùng jQuery chọn vào tất cả những thẻ li của thẻ ul có class là tabs, trong đoạn mã trên bạn có thể thể thấy var tabNum = $(this).index(), hàm index() là hàm cho chúng ta biết được đó là thẻ li thứ mấy nằm trong thẻ ul mà chúng ta đang chọn, và trong lập trình đương nhiên là số bắt đầu là số 0 chứ không phải số 1, nên chúng ta tạo tiếp 1 biết khác nthChild = tabNum+1 để biết chính xác nó đang nằm ở vị trí nào để chọn vào phần li chứa nội dung tương ứng.

Chúng ta tiếp tục dùng jQuery kết hợp CSS3 để chọn vào đúng thẻ li với thứ tự tương ứng chứa nội dung, và chèn vào class active.

Sử dụng trong bài viết Blogger như thế nào

Mục này mình hướng dẫn cho những bàn nào ko rành chỉ muốn xài thôi cho Blogger, Blogspot nhé. Đầu tiên bạn phải chắc rằng trong template của mình có sử dụng jQuery. Tiếp tục là lúc soạn thảo bài viết các bạn chuyển qua soạn thảo ở chế độ HTML.

Các bạn cho toàn bộ css vào cặp thẻ
<style type="text/css">Phần CSS ở trên vào đây</style>
và toàn bộ jQuery vào cặp thẻ
<script type="text/javscript>Toàn bộ nội dung jQuery</script>.
Sửa phần HTML tương ứng với nội dung và tiêu đề các thẻ của bạn là được.

Lời kết
Việc phân chia nội dung theo tab này thì bạn có thể áp dụng để làm nhiều cái như, template cho Blogspot cũng như các mã nguồn khác, hoặc muốn phân chia phần nội dung của mình để người đọc tiếp cận một cách tốt hơn. Nếu bạn thích bài viết có thể +1, like hoặc comment, hoặc bạn nào không thích hoặc có thắc mắc có thể để lại comment ở dưới cho mình biết lý do hoặc thắc mắc nhé.

P/S: Nếu các bạn muốn mình viết về chủ đề gì tiếp theo có thể tiếp tục liên hệ với mình qua biểu mẫu liên hệ trên website hoặc giửi mail trực tiếp cho mình qua minhdudesign@gmail.com. Mình không trả lời inbox facebook nhé nên mọi người đừng nhắn bên đấy nữa T_T

 

Cách tạo trang dịch vụ bằng Bootstrap và CSS3 Transition

Chào các bạn hôn nay Dũ xin hướng dẫn các bạn tạo trang dịch vụ bằng Bootstrap và CSS3 Transition

Tạo MDF Megamenu - Bootstrap Responsive Megamenu

Chào các bạn hôm nay mình xin hướng dẫn các bạn cách tạo một menu với MDF Megamenu - Bootstrap Responsive Megamenu đẹp và nhiều chức năng.

Hướng dẫn tạo biểu mẫu cho trang web (bài 4)

Chào các bạn, hơm nay Minh Dũ xin hướng dẫn cho các bạn cách tạo ra một biểu mẫu cho trang web. Thường thì biểu mẫu chúng ta tao ra để làm trang đăng ký thành viên, trang liên hệ, đăng nhập,...

để tạo một biểu mẫu đầu tiên chúng ta mở Dw lên nhé! chúng ta bắt đầu tạo 1 trang mới. ví dụ ở đây Minh Dũ sẻ tạo ra một trang đăng ký thành viên dangky.html 

chúng ta bắt đầu chèn form vào ở chế độ design để cộng việc thiết kế web của mình sẻ nhanh hơn thay vì mình sẻ viết từng đoạn code nhé.
Đầu tiên chúng ta cần phải khai báo thẻ Form vào trong trang dangky.html của mình.

<body>
    <form>

<!-- viết code ở dây -->

    </form>
</body>

Tiếp theo là Form nhập username   

 <body>
        <form>
   <input type="text" size="25" />
        </form>
    </body>

Với type="text" là nhập các kí tự từ bàn phím, size="25" là độ dài khung bằng 25.

Form nhập password

 <body>
        <form>
   <input type="password" size="25" />
        </form>
    </body>

Với type="password" là các kí tự sẽ được thay thế bằng ***, size="25" là độ dài khung bằng 25.

Form textarea

 <body>
        <form>
   <textarea rows="8" cols="50"></textarea>
        </form>
  </body>

 Với rows="..." là chiều cao, cols="..." là chiều ngang.
Dạng form textarea này chúng ta có thể nhập đoạn văn dài vào đây.
Thường được dùng để tạo khung comment hoặc là khung đóng góp ý kiến.

Form select, option

 <body>
        <form>
         <select class="standardSelect">
                    <option>1990</option>
                    <option>1991</option>
                    <option>1992</option>
                    <option>1993</option>
                    <option>1994</option>
                </select>
        </form>
    </body>

 Dạng này thường được dùng chọn ngày tháng năm sinh...v.v

Form radio

 <body>
        <form>
          <input type="radio" Name="gender" Value="Nam" />Nam
                <input type="radio" Name="gender" Value="Nữ" />Nữ
        </form>
  </body>

Dạng này thường được dùng để tạo form lựa chọn giới tính.

Form checkbox

 <body>
        <form>
         <input type="checkbox"/> Tôi đồng ý qui định của website.
        </form>
  </body>

Dạng này chúng ta có thể check nhiều lựa chọn cùng lúc. Khác với form radio chỉ chọn được 1.

Form submit

 <body>
        <form>
     <input type="submit" value="Đăng ký" />
        </form>
 </body>

Với value="login" tức là button submit sẽ có tên hiển thị là "login".


Lời kết : Kết thúc bài hôm nay Minh Dũ nghĩ rằng bạn đã có thể nắm rõ cách tạo form đăng ký bằng ngôn ngữ HTML là như thế nào, việc nắm được những cú pháp cũng như các tag HTML tạo form như trên giúp bạn khi gặp những form phức tạp cũng cảm thấy nhẹ nhàng hơn.

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

Giới thiệu các thẻ HTML cơ bản (Bài 3) Phần 2

 Chức năng của một số thẻ HTML cơ bản:

Cú pháp của một: Link

    + Trong thẻ a có các thuộc tính thường dùng như:

          - href="URL": dùng để chỉ đường dẫn tới trang web hay địa chỉ website muốn liên kết đến.

          - title="Chú thích" : thuộc tính title dùng để tạo chú thích cho siêu liên kết này nói về cái chủ đề gì.

          - target="_blank | self" : thuộc tính target dùng chỉ định nội dung của trang web liên kết tới hiện ra ở đâu. 

Nó có các giá trị như:

                  _blank: dùng để mở ra cửa sổ mới.

                  _self:  dùng hiện cùng cửa sổ trình duyệt.

                  _top:  hiện cùng cửa sổ frame (thường dùng trong trang web dạng Frame)

                  _parent: hiện ở cửa sổ frame cha (thường dùng trong trang web dạng Frame)

Ví dụ: 

Minh Dũ Blog - Học HTML cơ bản

Cú Pháp của Email link:

<p align="center">

© Copyright 2015 by minhdublog.com<br>

Địa chỉ: Mỹ Tho, Tiền Giang<br>

Điện thoại: 0122.4080.212<br>

Email:<a href="mailto:minhdudesign@gmail.com">minhdudesign@gmail.com</a><br>

Website: www.minhdublog.com

</p>

Tạo hotpot link cho hình ảnh:
Ví dụ:

<img src="images/hinh.jpg" usemap="#Map">
<map name="Map">
    <area shape="rect" coords="97,119,220,175" href="linkA.html" alt="Chú thích cho link A">
    <area shape="circle" coords="221,313,29" href="linkbB.html" alt="Chú thích cho link B">
    <area shape="poly" coords="82,259,140,255,133,289,105,296,175,296,62,173" href="linkC.html" alt="Chú thích cho link C">
</map>  

+ Để tạo Hotpot link cho hình ảnh trong thẻ phải có thuộc tính usemap và thuộc tính này có giá trị là tên của bảng đồ hình ảnh.

+ Thẻ dùng để định nghĩa bảng đồ cho hình ảnh.

+ Thẻ dùng để tạo vùng chứa của hotpot.

+ Thuộc tính shape dùng tạo hình dáng của điểm Hotpot.

+ Thuộc tính coords dùng để chỉ toạ độ của hotpot.

+ Thuộc tính href dùng để chỉ đường dẫn tới trang web khi click vào Hotpot.

+ Thuộc tính alt dùng để tạo chú thích khi chuột đụng vào Hotpot.

+ Thuộc tính usemap chỉ định hình ảnh này có sử dụng bảng đồ hình ảnh.

Cách để tạo ra bookmark:

+ Dùng thẻ a với thuộc tính name để tạo điểm đánh dấu tại vị trí muốn nhảy tới trong cùng 1 trang.

Ví dụ: <a name="vedautrangchu"></a>

+ Tạo liên kết để nhảy tới bookmark này bằng thẻ a

Ví dụ: <a href="#vedautrangchu">Về đầu trang</a>

Các thành phần để tạo một bảng:
<table thuộc tính="giá trị" thuộc tính="giá trị"...></table>: Mở và đóng một bảng.
<tr thuộc tính="giá trị" thuộc tính="giá trị" ...></tr>: Mở và đóng một hàng.
<td thuộc tính="giá trị" thuộc tính="giá trị" ...></td>: Mở và đóng một ô.

Các thuộc tính của bảng (<table>)

align=
background=
height=
width=
bgcolor=
bordercolordark=
bordercolor =
border=
bordercolorlight=
cellpadding=
cellspacing=
rules=
frame=

Các thuộc tính của hàng (<tr>)

align=
valign
bgcolor=
background=

Các thuộc tính của ô (<td>)

align=
valign=
bgcolor=
background=
char=
colspan=
rowspan=
nowrap=
height =
width=

Ví dụ về 1 bảng table đơn giản nhất nhé:

<html>

<head>
<title>ví dụ về bản đơn giản đầu tiên của bạn</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
 <table>
  <tr>
   <td>Đây là bảng đầu tiên, bảng này chỉ có một hàng và một cột nhé!</td>
  </tr>
 </table>
</body>
</html>

Giới thiệu các thẻ HTML cơ bản (Bài 3) Phần 1

Chức năng của một số thẻ HTML cơ bản:

+ Thẻ <p> Dùng xuất ra một đoạn văn bản </p>
- Trong thẻ p có thuộc tính align dùng để canh lề cho đoạn văn bản với align=left|right|center|bottom
+ Thẻ <br> để tạo xuống dòng
cho văn bản và thẻ này là thẻ đặc biệt không có thẻ kết thúc
+ Thẻ <b>dùng để làm đậm văn bản</b>
+ Thẻ <strong>cũng để làm đậm văn bản</strong>
+ Thẻ <i>dùng để làm nghiêng văn bản</i>
+ Thẻ <em>cũng dùng để làm nghiêng văn bản</em>
+ Thẻ <u>Dùng để tạo gạch dưới cho văn bản</u>
+ Thẻ <s>Dùng để tạo gạch ngang cho văn bản</s>
+ Thẻ <strike>Cũng dùng để tạo gạch ngang cho văn bản</strike>
+ Thẻ <font>Dùng để định kích cỡ , màu, kiểu font cho văn bản</font> với 3 thuộc tính như:
- color="mau"
- size="kichco"
- face="kieu font"
+ Ví dụ: Cú pháp viết thẻ font như sau: <font size="20" color="#FF0000" face="Arial">Thẻ font dùng để định kích cỡ , màu, kiểu font cho văn bản</font>

Cách sử dụng thẻ tạo danh sách có thứ tự:

Cú pháp: <ol type="a" start="2">

                    <li>Học Làm Web Online</li>

                   <li>Thiết kế Giao Diện Website Online</li>

                   <li>Lập Trình PHP Online

                         <ol>

                                <li>Lập Trình PHP Cơ Bản Online</li>

                                 <li>Lập Trình PHP Nâng Cao Online</li>

                         </ol>

                    </li>

                    <lí>Lập Trình HTML5/CSS3/Javascript Online</li>

               </ol>

+ Trong đó type là kiểu có các giá trị như: a, A, I, i

+ Trong đó start là thứ tự của danh sách: start='n" với n là số nguyên dương.

Cách sử dụng thẻ tạo danh sách không có thứ tự: 

Cú pháp:

<ul type="square">

 <li>Dreamweaver

  <ul>

   <li>Minh Dũ</li>

   <li>Phương Thảo</li>

  </ul>

 </li>

 <li>Viết Blog</li>

 <li>Nghe Nhạc</li>

</ul>

+ Thuộc tính type có các giá trị sau: square, circle, disc

 Cú pháp viết thẻ tạo tiêu đề đoạn:

<h1> Tiêu đề đoạn cấp 1 </h1>

<h2> Tiêu đề đoạn cấp 2 </h2>

<h3> Tiêu đề đoạn cấp 3 </h3>

<h4> Tiêu đề đoạn cấp 4 </h4>

<h5> Tiêu đề đoạn cấp 5 </h5>

<h6> Tiêu đề đoạn cấp 6 </h6>

+ Thẻ <img> dùng để chèn hình ảnh vào trang web (chú ý đây là thẻ đặc biệt không có thẻ kết thúc </img>)

+ Thẻ <img> có các thuộc tính cơ bản như sau:

     - src: Dùng để chỉ đường dẫn tới hình ảnh

     - width: Dùng để định độ rộng cho hình ảnh

     - height: Dùng để định chiều cào cho hình ảnh

     - border=n: Dùng định đường viền cho hình ảnh

     - alt: Dùng để tạo chú thích cho hình ảnh

     - title: Dùng để tạo tooltip khi di chuyển qua hình ảnh

     - hspace: Dùng để định khoảng cách từ hình đế nội dung văn bản theo chiều ngang

     - align="left": Dùng để canh lề hình qua bên trái, nội dung mô tả cho hình sẽ nằm bên phải

Ví dụ: <img src="images/hocwebgiare.jpg" width="100" height="100" alt="Học Web Giá Rẻ" title="Học Thiết Kế Web Lành Nghề với giả rẻ nhất" border="0">