Cách tạo tab nhiều tiện ích - widget cho blogspot

Share:
Cách tạo tab nhiều tiện ích - widget cho blogspot

Cách tạo tab nhiều tiện ích - widget cho blogspot

Fantasy đã đăng Friday, 8 May 2020
Hiện có lượt xem và 0 bình luận

  • Xem toàn trang
  • Nội Dung

    Bài Viết Liên quan

    Tác giả

    Đây là cách giúp bạn có thể thêm nhiều tiện ích mà vẫn tiết kiệm được không gian trên blog? Điều này rất cần thiết vì nó sẽ ảnh hưởng đến tốc độ load trang. Và một trong những cách tiết kiệm đó, bạn có thể làm theo hướng dẫn bên dưới.


    Bước 1: Đăng nhập vào blog ==> Chọn mẫu (template) ==> Chọn chỉnh sửa HTML

    Lời khuyên: Các bạn nên down toàn bộ code về rồi dùng Notepad ++ để chỉnh sửa cho dễ ,nhớ sao lưu 1 bản để phòng bị lỗi code.
    Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>
    .pageTabs {
    margin: 10px auto 0;
    font-size:11px;}
    ul.tabs {
    margin: 0;
    padding: 0 ;
    float: left;
    list-style: none;
    height: 32px;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    }
    ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px;
    line-height: 31px;
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px;
    background: #e0e0e0; /* màu nền của các Tabs*/
    overflow: hidden;
    position: relative;
    }
    ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff;
    outline: none;
    }
    ul.tabs li a:hover {
    background: #eff0f1;
    }
    html ul.tabs li.active, html ul.tabs li.active a:hover {
    background: #eff0f1;
    border-bottom: 1px solid #eff0f1;
    }
    .tab_container {
    border: 1px solid #999;
    border-top: none;
    clear: both;
    float: left;
    width: 100%; /* độ rộng của phần nội dung các Tabs*/
    color:#000;
    background: #eff0f1; /* màu nền của phần nội dung các Tabs*/
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    }
    .tab_content {
    padding: 5px;
    font-size: 1.2em;
    }
    .tab_content img {
    float: left;
    margin: 10px 20px 20px 0;
    border: 1px solid #ddd;
    padding: 5px;
    }
    .tab_content p{
    padding-bottom:10px;}

    Bước 2: Chèn tiếp code bên trên thẻ </head>

    <script src="https://dl.dropboxusercontent.com/u/95745796/Jquery1.3.2.js" type="text/javascript"> </script>
    <script type="text/javascript">
    $(document).ready(function(){$(".tab_content").hide();$("ul.tabs li:first").addClass("active").show();$(".tab_content:first").show();$("ul.tabs li").click(function(){$("ul.tabs li").removeClass("active");$(this).addClass("active");$(".tab_content").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn(1000)})});
    </script>

    Bước 3: Save template lại

    Bước 4: Trở về phần tử trang và thêm 1 HTML/Javascript

    Thêm vào phần tử HTML/Javascript code bên dưới
    <ul class="tabs"> <li><a href="#tab1">Tiêu đề TAB1</a></li> <li><a href="#tab2">Tiêu đề TAB1</a></li> <li><a href="#tab3">Tiêu đề TAB1</a></li> <li><a href="#tab4">Tiêu đề TAB1</a></li> <li><a href="#tab5">Tiêu đề TAB1</a></li>
    </ul>
    <div class="tab_container">
    <div id="tab1" class="tab_content">
    NỘI DUNG CỦA TAB 1
    </div>
    <div id="tab2" class="tab_content">
    NỘI DUNG CỦA TAB 2
    </div>
    <div id="tab3" class="tab_content">
    NỘI DUNG CỦA TAB 3
    </div>
    <div id="tab4" class="tab_content">
    NỘI DUNG CỦA TAB 4
    </div>
    <div id="tab5" class="tab_content">
    NỘI DUNG CỦA TAB 5
    </div>
    </div>
    Chúc các bạn thành công !
    Lưu ý:
    Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
    Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
    Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
    Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/iIEPcxC.png[/img]

    No comments:

    FSHARED