BLOGSPOT MENUTHIẾT KẾTHỦ THUẬT BLOGGER

CSS Dropdown Menu cho Blogger

Menu xổ dọc nhiều cấp sử dụng css với hiệu ứng đẹp cho blospot, CSS Dropdown Menu for Blogger

Chia sẻ:

Chia sẻ

Dropdown Menu hiện vẫn đang rất phổ biến đối với các Blogger vì nó mang tính chuyên nghiệp, rất phù hợp cho các blog có nhiều chuyên mục mẹ và chuyên mục con, hơn nữa lại không ảnh hưởng tới tốc độ load trang (vì là CSS). Hôm nay mình tiếp tục chia sẻ một style CSS Dropdown Menu cho các bạn tham khảo. Sau đây là các bước tạo menu cho Blogger:

Ảnh minh hoạ

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu > Chỉnh sửa HTML, chèn đoạn code sau vào trước thẻ ]]></b:skin>:

/* CSS Dropdown Menu by kjmagic.blogspot.com */
nav ul
{
    list-style: none;
    position: relative;
    display: inline-table;
}
nav ul li a
{
    display: block;
    padding: 25px 40px;
    text-decoration: none;
}
nav ul li
{
    float: left;
}
nav ul ul li
{
    position: relative;
    float: none;
}

/*Third Step*/

nav ul ul
{
    position: absolute;
    top: 100%;
}
nav ul ul ul
{
    position: absolute;
    left: 100%;
    top: 0;
}
/*Colors*/

nav ul
{
    background: #0052a4;
    background: linear-gradient(top, #0052a4 0%, #0052a4 100%);
    background: -moz-linear-gradient(top, #0052a4 0%, #0052a4 100%);
    background: -webkit-linear-gradient(top, #0052a4 0%,#0052a4 100%);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    border-radius: 10px;
}
nav ul li:hover
{
    background: #C0C0C0;
    background: linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
    background: -moz-linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
    background: -webkit-linear-gradient(top, #C0C0C0 0%,#C0C0C0 40%);
}
nav ul ul
{
    background: #C0C0C0;
    background: linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
    background: -moz-linear-gradient(top, #C0C0C0 0%, #C0C0C0 40%);
    background: -webkit-linear-gradient(top, #C0C0C0 0%,#C0C0C0 40%);
    border-radius: 0px;
    padding: 0;
}
nav ul ul li
{
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
nav ul li a
{
    color: #FFF;
}
nav ul li:hover a
{
    color: #000;
}

nav ul ul li a
{
    color: #fff;
}
nav ul ul li a:hover
{
    color: #fff;
    background: #0052a4;
}

Bước 2: Chèn đoạn code sau vào vị trí muốn hiển thị menu rồi lưu template lại:

<!--CSS Dropdown Menu by kjmagic.blogspot.com--> 
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Articles</a>
            <ul>
                
                <li><a href="#">Fun</a></li>
                <li><a href="#">freebies</a></li>
                <li><a href="#">Web Design</a>
                     <ul>
                         <li><a href="#">HTML</a></li>
                         <li><a href="#">CSS</a></li>
                     </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Archives</a>
            <ul>
                <li><a href="#">January</a></li>
                <li><a href="#">February</a></li>
            </ul>
        </li>
        <li><a href="#">AboutMe</a></li>
    </ul>
</nav>
<!--/CSS Dropdown Menu by kjmagic.blogspot.com-->

Chỉnh sửa lại các link và tên link cho phù hợp với blog của bạn.

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

 MỌI THÔNG TIN VUI LÒNG LIÊN HỆ NGAY VỚI CHÚNG TÔI :   

TRUNG TÂM NGHIÊN CỨU PHÁT TRIỂN CÔNG NGHỆ THẾ KỶ   

Phụ trách thiết kế : Mr.Mika 

Call me : 0926.340.479 - 0927.927.000 - Email :  Lienhe365@gmail.com 

Phụ trách kỹ thuật và kinh doanh : Mr. Sơn

Call me : 0919.083.000 - 0927.927.000   Email :   Setup247@Gmail.Com 
Hỗ trợ ZALO 24/24 :   Nhập số 0927.927.000 và zalo kết bạn và liên hệ nhé!