Tạo tabs đơn đầy màu sắc cho blogger

Đăng bởi Admin | 11/12/13 | 0 nhận xét

Sau khi đã được công bố và được thiết kế trên 100 + Danh mục thực đơn cho Blogger, cả hai đều ngang và dọc xem danh sách, hôm nay chúng tôi muốn chia sẻ một menu đẹp đã vẫn là sự lựa chọn yêu thích của tất cả các khách hàng MBT cho đến nay. Menu này thay đổi màu sắc cho mỗi tab trên chuột di chuột. Nó sử dụng các chức năng JavaScript đơn giản để sản xuất các hiệu ứng chuyển gọn gàng và sạch sẽ. Thay vì hiển thị các mục trình đơn phụ trong danh sách thả xuống dọc truyền thống, chúng tôi liên kết chúng với nhau để phù hợp với một dòng đơn. Không giống như các trình đơn khác, tiện ích này sẽ dễ dàng phù hợp với bất kỳ mẫu Blogspot không có xung đột thiết kế. Nó được đặt ở phần trên cùng của hầu hết các blog của bạn để thu hút độc giả nhiều nhất. Các bước cài đặt được vui vẻ để cố gắng và rất dễ dàng. Menu hoạt động tốt trên tất cả các trình duyệt chính, tức là: IE7 +, Safari, Chrome, Mozilla và Opera. Cho phép thêm nó vào blog của bạn và để loại bỏ bất kỳ đơn cồng kềnh hiện tại đã chứng minh không ít hơn một rắc rối.

Live Demo

Nếu bạn quan tâm để tìm hiểu làm thế nào để tạo ra một trình đơn từ đầu và thêm các hiệu ứng Jquery với nó sau đó đọc các phần trước của loạt bài này.

Menu Hướng dẫn

1. Làm thế nào để tạo một Drop Down Menu?

2. Chuyển đổi bất kỳ Danh sách menu ngang vào một Drop Down Menu

3. Thêm chuyển tiếp CSS3 Để một Drop Down Menu

. 4 Tạo hoạt hình Drop Down Menu với CSS3 chuyển tiếp - Coming Soon ..

5. Thêm jquery slide Chuyển đổi có hiệu lực Để một Drop Down Menu

. 6 Tabs màu sắc: Một đơn JQuery Đối với Blogger

Thêm nó vào blogger

Đi Blogger> Template
Sao lưu mẫu của bạn
Nhấp vào Edit HTML > Proceed
Tìm kiếm Đối với <head> và ngay bên dưới nó dán các kịch bản:

<script src='http://downloads.mybloggertricks.com/jquery-pack-colourful.js' type='text/javascript'></script>
<script src='http://downloads.mybloggertricks.com/jcarousel-colourful.js' type='text/javascript'> </script>
<script src='http://downloads.mybloggertricks.com/files/mt-colourful.js' type='text/javascript'></script>

5. Bây giờ tìm kiếm các lớp học cơ thể. ví dụ: Có vẻ tương tự như với một số mã bên trong nó

body {
----
---
)

Bên trong lớp này dán các giá trị sau:

body {
margin:0px
padding:0px;
---
---
}

6. Tìm kiếm kế tiếp cho:

<body>

hay mã này:

<body expr:class='"loading" + data:blog.mobileClass'>

7. Ngay bên dưới dán mã nén sau:

<style>
/*------- Colourful Tabs Menu by www.MyBloggerTricks.com -------*/
.MBT-Nav-container {
border: 1px solid #cfcfcf;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeTQRHUVTkPVZrUzgo7hbNQ2UnSrO20T4ICXl5fs2Mca2FliXhf6O20HPmBMiq1Q0EffmdGNgYLCyh3ZEd_6YIqleu2IHZLJ3tot02BB0KwLrtznPNCwZKOGUu0Dw7oP0IuFqY8JUnp5o/s400/menu-bgd.png) bottom left repeat-x;
    position: relative;
      margin: 0; padding: 0;
border: 1px solid #cfcfcf;
}
ul#nav {
    border-left: 1px solid #cfcfcf;
        border-right: 0px solid #cfcfcf;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeTQRHUVTkPVZrUzgo7hbNQ2UnSrO20T4ICXl5fs2Mca2FliXhf6O20HPmBMiq1Q0EffmdGNgYLCyh3ZEd_6YIqleu2IHZLJ3tot02BB0KwLrtznPNCwZKOGUu0Dw7oP0IuFqY8JUnp5o/s400/menu-bgd.png) bottom left repeat-x;
    position: relative;
    font-size: 12px; font-family: helvetica, arial, sans-serif;
    list-style: none; margin: 0 auto; padding: 0;
    width: 960px;
}
#nav ul {
     margin: 0;

}
:focus {
    outline: 0;
}
*html ul#nav { clear: both; height: 1%; }
ul#nav li a {
    display: block;
    float: left;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 33px;
    padding: 0 13px 0 10px;
    color: #333;
    text-decoration: none;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwrChYUBQThoUoFQRIURA0W6gxqgRjKlhWPh1i1Gadr3NgBdBobDqAvvBlckAPC0ZInED8K4tb0vUsCVfDfUbMhpZ07vvvNO3TLSxxqozPZukEPOIsNMWaEd2nF8vq3-tOWBZX5U4wgZ0/s400/menu-rule.png) right 2px no-repeat;
}
*html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
*:first-child+html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
ul#nav li a:hover, ul#nav li a.open { color: #fff; }
ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; }
ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; }
ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; }
ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; }
ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; }
ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; }
ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; }
ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; }
ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; }
ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; }

ul#nav li#link-home a {
    padding: 0 33px 0 10px;
    text-indent: -9999px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLu2zXV2HcIJWJxGT0A4tz_mJL57Ze6sa8GSClyypaQzKoLhJpuQULLkW6VQMQXAWCbsxkYmkr5FODIjIb0W4mz_oduoRZRZYljj9EpiR1pbQVm_7eP09gUuZm_nXT3WsD_dtK6fbmoU8/s400/home-icon.png) right 0px no-repeat;
}
*html ul#nav li#link-home a { padding: 0; width: 43px; }
ul#nav li#link-home a:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLu2zXV2HcIJWJxGT0A4tz_mJL57Ze6sa8GSClyypaQzKoLhJpuQULLkW6VQMQXAWCbsxkYmkr5FODIjIb0W4mz_oduoRZRZYljj9EpiR1pbQVm_7eP09gUuZm_nXT3WsD_dtK6fbmoU8/s400/home-icon.png) right -33px no-repeat; }
/* Sub-Vertical Navigation */
ul.sub-nav {
    position: absolute;
    top: 33px;
    left: -1px;
    overflow: hidden;
    width: 960px;
    display: none;
    z-index: 999;
list-style: none;
padding-left:0px;
}
ul#nav li#mbt ul.sub-nav { background: #6f7987 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyOUYjf4xqn_25Q89JwqZOOKV1qhk1qEe5x7tqAj9k6kFo5kJD1f1V6DKELHEKJSALum5pFn3jkiUTHd4BJpg8Tynu6B5OwoDmbJmsFwvQHfs8gmpKYHrKFMsNnk8fdOMtUkcsi-G4rlY/s400/business-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4QLTQ3RbxeglZuc9QBnY0u5n_N1xQnmACMmAySQrThbGwIjvyFf3o6XOnQ3T-nTBILvc-TighJqLwDLkN0CO7toftll06RWN9We_PT09Y5bZ8YN-E-qCO4RVCuVzVa-d5KYuxds6j60g/s400/entertainment-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-news ul.sub-nav { background: #e28a67 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvU8YgdxPQ5jV1ikulvD6nUGPy60WU7HW4DcMwVtHzTBMDbKFEUbSBbTM5gP081RDy3ltIW0pAtkDgpH0bXPMehh_YqPahwrHTgcj2LVw1K5L8qYZd-O4_4GPxjk9kQlYBdEmDpLwBq3A/s400/news-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-life ul.sub-nav { background: #aa8eac url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF4JfoQCPl5FoRT53L4uv-iugA4s7K9Ns4-4zXCPL8Q8lNJOSCHLtfsgaYvC9POVtMWAOl14Qs2sKNKg08T2AZrkBdHw-TcCOj-9QgeM8xhi93aSAlg4bK513LuaPC0n2uT1wOH3sD698/s400/life-subnav-bgd.png) top left repeat-x; }
ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimzvLUav8baDaGKgtw9h2KsZfsgToBbyYKeXgAdageuq5HvDsCO3kDMxVVz5UPqwLLc3YsfjyVPRPGjN4FebCMQ2zur51pOjYTSMxLBiGmh2gAA0JWrydw6FurJONS1NtyJL3XWjtMqV4/s400/technology-subnav-bgd.png) top left repeat-x; }
ul#nav li ul.sub-nav li { float: left;   }
ul#nav li ul.sub-nav li a {
    float: none;
    background: none;
    font-size: 11px;
    text-transform: none;
    color: #fff;
    line-height: 25px;
}
ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; }
ul#nav li#link-entertainment ul.sub-nav li a:hover, ul#nav li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 !important; }
ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; }
ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; }
ul#nav li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology ul.sub-nav li a.active-cat { background: #02b0cf !important; }
</style>
<div class='MBT-Nav-container'>
<ul id='nav'>

               <li class='non-vertical-link top-link' id='link-home'><a class='open' href='#'>Home</a></li>

                <li class='top-link' id='mbt'><a href='#'>TAB 1</a>
                    <ul class='sub-nav'>
                    <li><a href='#'>SUB TAB 1.1</a></li>
                    <li><a href='#'>SUB TAB 1.2</a></li>
                    <li><a href='#'>SUB TAB 1.3</a></li>
                    <li><a href='#'>SUB TAB 1.4</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-entertainment'><a href='#'>TAB 2</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='#'>SUB TAB 2.1</a></li>
                    <li><a href='#'>SUB TAB 2.2</a></li>
                    <li><a href='#'>SUB TAB 2.3</a></li>
                    <li><a href='#'>SUB TAB 2.4</a></li>
                    <li><a href='#'>SUB TAB 2.5</a></li>
                    </ul>                 </li>

                <li class='top-link' id='link-news'><a href='#'>TAB 3</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='#'>SUB TAB 3.1</a></li>
                    <li><a href='#'>SUB TAB 3.2</a></li>
                    <li><a href='#'>SUB TAB 3.3</a></li>
                    <li><a href='#'>SUB TAB 3.4</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-life'><a href='#'>TAB 4</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='#'>SUB TAB 4.1</a></li>
                    <li><a href='#'>SUB TAB 4.2</a></li>
                    <li><a href='#'>SUB TAB 4.3</a></li>
                    <li><a href='#'>SUB TAB 4.4</a></li>
                    <li><a href='#'>SUB TAB 4.5</a></li>
                    <li><a href='#'>SUB TAB 4.6</a></li>
                    <li><a href='#'>SUB TAB 4.7</a></li>
                    </ul>
                </li>

                <li class='top-link' id='link-technology'><a href='#'>TAB 5</a>
                    <ul class='sub-nav' style='display: none;'>
                    <li><a href='#'>SUB TAB 5.1</a></li>
                    <li><a href='#'>SUB TAB 5.2</a></li>
                    <li><a href='#'>SUB TAB 5.3</a></li>
                    <li><a href='#'>SUB TAB 5.4</a></li>
                    <li><a href='#'>SUB TAB 5.5</a></li>
                    </ul>                 </li>

<li class='non-vertical-link top-link' id='link-top10'><a href='#'>TAB 6</a></li>







                  <li style='clear: both;'/>
            </ul>
</div>

8. Nhấn Save và làm tất cả! Chơi blog của bạn để xem một sự thay đổi hoàn toàn mới để bố trí trang web. Menu sẽ được pha trộn cả hai chủ đề ánh sáng và bóng tối. Vui chơi. :)

Hướng dẫn tùy chỉnh:

Mã này được viết trong một cách gọn gàng để cho bất kỳ ai có thể dễ dàng thay đổi, thêm hoặc xóa các tab.

Thay thế # với URL của trang và thay thế TAB tên với tiêu đề trang
Để thay đổi độ rộng của trình đơn chỉnh sửa chiều rộng: 960px
Để tạo ra một tab mới trong bất kỳ trình đơn phụ đơn giản dán mã này trên </ ul>

<li><a href='#'>SUB TAB</a></li>

Tab 7 đến 10 Tab bị vô hiệu hóa. Nếu bạn muốn kích hoạt bất kỳ một trong số đó thì chỉ cần loại bỏ các thẻ bình luận qua nó. tức là <- trước khi nó và -> sau đó
Cho thêm lời khuyên tuỳ biến, chỉ cần gửi cho tôi một lời nhận xét!

Là nó thân thiện với SEO?

Đơn giản CSS và HTML đơn là cách tốt hơn so với các menu flash vì họ sử dụng các từ khóa liên kết cùng với neo văn bản. Công cụ tìm kiếm thu thập thông tin họ tốt hơn và chúng xuất hiện rõ ràng trong LIÊN KẾT SITE. Menu này có mọi thứ mà robot sẽ yêu. Nó có cấu trúc rõ ràng và sử dụng không có chức năng jquery ưa thích mà có thể dẫn đến thời gian tải cao.

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

Theo: mybloggertricks.com

Không có nhận xét nào:

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

11/12/13