Chào mừng các bạn đến với web thiết bị mầm non Hà Vũ: Chúc Quý Khách Thành Đạt Trong Cuộc Sống. mọi thông tin vui lòng liên hệ trên.

Browse » » » Xem Tab trên Blogspot

Xem Tab trên Blogspot



Để tiết kiệm không gian, tab menu rất hiệu quả. Kích thước tương đối nhỏ nhưng có thể mang theo rất nhiều không gian. Nó đã từng yêu cầu của bạn blogger trên cột hộp hét lên một vài tuần trước về việc làm thế nào để tạo ra một thực đơn mà có thể mang nhiều danh hiệu, có lẽ điều này xem menu tab là có. 
Tạo một menu với các tab xem mã HTML mà đòi hỏi khá dài và khá phức tạp, do đó, bạn sẽ thấy một hướng dẫn tốt và quan trọng nhất là đừng quên để sao lưu các mẫu andaterlebih 1.

Nếu sau khi sau menu chiều rộng hoặc chiều cao không phù hợp, xin vui lòng tự điều chỉnh với các nội dung của menu mà bạn đang sử dụng. Bởi vì nếu bạn không hiểu được lộn xộn hoặc trông xấu xí. Vâng, bây giờ chúng ta đến với các vấn đề
  1. Các khóa học đầu tiên phải đăng nhập vào Blogger với tài khoản của bạn. 
  2. Layout . 
  3. Nhấp chuột vào Edit HTML . 
  4. Đừng quên sao lưu ANSA mẫu bằng cách nhấn vào Tải về Template Full . 
  5. Sau đó đặt các mã javascript sau đây trước khi mã </ head> 
  1. <script type='text/javascript'>
    //<![CDATA[
    function tabview_aux(TabViewId, id)
    {
      var TabView = document.getElementById(TabViewId);
      // ----- Tabs -----
      var Tabs = TabView.firstChild;
      while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
      var Tab = Tabs.firstChild;
      var i   = 0;
      do
      {
        if (Tab.tagName == "A")
        {
          i++;
          Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
          Tab.className = (i == id) ? "Active" : "";
          Tab.blur();
        }
      }
      while (Tab = Tab.nextSibling);
      // ----- Pages -----
      var Pages = TabView.firstChild;
      while (Pages.className != 'Pages') Pages = Pages.nextSibling;
      var Page = Pages.firstChild;
      var i    = 0;
      do
      {
        if (Page.className == 'Page')
        {
          i++;
          if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
          Page.style.overflow = "auto";
          Page.style.display  = (i == id) ? 'block' : 'none';
        }
      }
      while (Page = Page.nextSibling);
    }
    // ----- Functions -------------------------------------------------------------
    function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
    function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
    //]]>
    </script>
  2. Setelah itu letakkan kode berikut di atas kode ]]></b:skin>
    div.TabView div.Tabs
    {
    height: 30px;
    overflow: hidden;
    }
    div.TabView div.Tabs một
    {
    float: left;
    display: block;
    width: 98px; / Chiều rộng trình đơn chính hàng đầu * /
    text-align: center;
    height: 30px; / * Chiều cao trên menu chính * /
    padding-top: 3px;
    dọc-align: middle;
    border: 1px solid # BDBDBD; / * Menu biên giới màu * /
    biên giới-bottom-width: 0;
    text-decoration: none;
    font-family: "Verdana", serif; / * Font trên menu chính * /
    font-weight: bold;
    color: # 000; / * Màu chữ trên menu chính * /
    -Moz biên giới-bán kính-topleft: 10px;
    -Moz biên giới-bán kính-topright: 10px;
    }
    div.TabView div.Tabs a: hover, div.TabView div.Tabs a.Active
    {
    background-color: # E6E6E6; / * màu nền menu chính hàng đầu * /
    }
    div.TabView div.Pages
    {
    rõ ràng: cả hai;
    border: 1px solid # BDBDBD / * Màu đường viền * /
    overflow: hidden;
    background-color: # E6E6E6; / * màu nền Box chính * /
    }
    div.TabView div.Pages div.Page
    {
    chiều cao: 100%;
    padding: 0px;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    { 
    padding: 3px 5px; 
    }
  3. Sau đó Save Template .
  4. Bước tiếp theo, hãy nhấp vào Layout .
  5. Nhấp vào Page Elements và thêm tiện ích .
  6. Chọn HTML / Javascript , và thêm đoạn mã sau vào nó. 
  7. <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 300px;">
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>
    </div>
    <div class="Pages" style="width: 300px; height: 250px;">
    <div class="Page">
    <div class="Pad">
    Tab 1.1 <br />
    Tab 1.2 <br />
    Tab 1.3 <br />     </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Tab 2.1 <br />
    Tab 2.2 <br />
    Tab 2.3 <br />
    </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Tab 3.1 <br />
    Tab 3.2 <br />
    Tab 3.3 <br />     </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>
  8. Sau đó, Lưu .
    9. Mô tả: 
    • Đối với các mã màu đỏ là chiều rộng và chiều cao của menu , điều chỉnh nội dung. 
    • Mã màu xanh pal xin vui lòng điền trong tiêu đề - tiêu đề của trình đơn . 
    • Và màu tím , là nội dung của trình đơn . Bạn có thể thêm các liên kết, hình ảnh, biểu ngữ, vv .
    Đó là hướng dẫn đầu tiên ngày hôm nay, nếu không có ai muốn hỏi, bạn bè của tôi có thể điền vào hộp bình luận dưới đây. Chúc may mắn và hy vọng hữu ích.

Tag:

Chia sẻ bài viết : like hay g+ Các Bạn Nhé :


Bạn Đã Xem Chưa ?