CSS3 Dropdown Menu kèm searchbox & social media icon cho blog

Trước đây mình đã từng giới thiệu cách tạo Dropdown Menu chuẩn CSS3 & HTML5 dành cho Blogger, bài viết này mình tiếp tục chia sẻ một style nữa để các bạn lựa chọn. Sau đây là các bước tạo menu cho blog:

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>:

#contact-links{text-shadow:0 -1px 0 rgba(0,0,0,0.3);margin:auto;position:relative;width:100%}
#contact-links a{color:#4C9FEB}
#contact-links a:hover{color:#3D85C6}
#my-links{float:right;font-size:12px;margin:4px 10px;overflow:hidden;text-shadow:0 1px 0 #FFF}
#my-links a{margin-left:7px;padding-left:8px;text-decoration:none}
#my-links a:first-child{border-width:0}
#menu-container{background:-webkit-linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent;background:-moz-linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent;background:linear-gradient(#f6f6f6,#e9eaea) repeat scroll 0 0 transparent;filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6',endColorstr='#e9eaea',GradientType=0 );border-radius:0 0 4px 4px;border:1px solid rgba(0,0,0,0.1);box-shadow:-1px 1px 0 rgba(255,255,255,0.8) inset;clear:both;height:46px;padding-top:1px}
#neat-menu{float:left}
#neat-menu a{text-decoration:none}
#neat-menu ul{list-style:none;margin:0;padding:0}
#neat-menu > ul > li{float:left;padding-bottom:12px}
#neat-menu ul li a{box-shadow:-1px 0 0 rgba(255,255,255,0.8) inset,1px 0 0 rgba(255,255,255,0.8) inset;border-color:#D1D1D1;border-image:none;border-style:solid;border-width:0 1px 0 0;color:#333;display:block;font-size:14px;height:25px;line-height:25px;padding:11px 15px 10px;text-shadow:0 1px 0 #FFF}
#neat-menu ul li a:hover{background:-webkit-linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent;background:-moz-linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent;background:linear-gradient(#efefef,#e9eaea) repeat scroll 0 0 transparent;filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef',endColorstr='#e9eaea',GradientType=0 )}
#neat-menu > ul > li.active > a{background:-webkit-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;background:-moz-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;background:linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1',endColorstr='#3F96E5',GradientType=0 );border-bottom:1px solid #2D81CC;border-top:1px solid #4791D6;box-shadow:-1px 0 0 #55A6F1 inset,1px 0 0 #55A6F1 inset;color:#FFF;margin:-1px 0 -1px -1px;text-shadow:0 -1px 0 rgba(0,0,0,0.3)}
#neat-menu > ul > li.active > a:hover{background:-webkit-linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent;background:-moz-linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent;background:linear-gradient(#499FEE,#3F96E5) repeat scroll 0 0 transparent;filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE',endColorstr='#3F96E5',GradientType=0 )}
#neat-menu > ul > li:first-child > a{border-radius:0 0 0 5px}
#neat-menu ul ul{background:-webkit-linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent;background:-moz-linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent;background:linear-gradient(#F7F7F7,#F4F4F4) repeat scroll 0 0 padding-box transparent;filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7',endColorstr='#F4F4F4',GradientType=0 );border-radius:5px;border:1px solid rgba(0,0,0,0.1);box-shadow:0 1px 0 #FFF inset;height:0;margin-top:1px;opacity:0;overflow:hidden;width:240px;padding:0;position:absolute;visibility:hidden;z-index:1;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s}
#neat-menu ul li:hover ul{margin-top:0\2;height:auto;opacity:1;visibility:visible}
#neat-menu ul ul a{border-right-width:0;border-top:1px solid #D1D1D1;box-shadow:0 1px 0 #FFF inset;color:#444;height:24px;line-height:24px;padding:7px 12px;text-shadow:0 1px 0 #FFF}
#neat-menu ul ul a:hover{background:-webkit-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;background:-moz-linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;background:linear-gradient(#55A6F1,#3F96E5) repeat scroll 0 0 transparent;filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1',endColorstr='#3F96E5',GradientType=0 );border-top:1px solid #4791D6;box-shadow:-1px 0 0 #55A6F1 inset,1px 0 0 #55A6F1 inset;color:#FFF;text-shadow:0 -1px 0 rgba(0,0,0,0.3)}
#neat-menu ul ul li:first-child a{border-top-width:0}
#menu-search{margin:8px 10px 0 0;float:right}
#menu-search form{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUktrQfM91AgbsfQhXnRbyBYO6aHjaDQVOkSkMBn_cHZ5IoLN0FAKy5GYZ43DM8e_w-qzmbruznCJdw9UVl91CXwOVh7yKeWlcPfcZbpEPON5CyhHfAwN0abz37M2RDFxVixR5sY3kk5k/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent;border:1px solid #CCC;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,0.05) inset,0 1px 0 #FFF;height:26px;padding:0 25px;position:relative;width:130px}
#menu-search form:hover{background-color:#F9F9F9}
#menu-search form input{color:#999;font-size:13px;height:26px;text-shadow:0 1px 0 #FFF;background:none repeat scroll 0 0 transparent;border:medium none;float:left;outline:medium none;padding:0;width:100%}
#menu-search form input.placeholder,#menu-search form input:-moz-placeholder{color:#C4C4C4}

Bước 2: Chèn đoạn code sau vào vị trí bạn muốn menu hiển thị:

<div id='contact-links'>
        <div id='my-links'>
            <a href='#'>About</a>
            <a href='#'>Contact</a>
                    <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE6Fit4cBu9xMYltg8P052bpWWqVq7MtT1sx0Eymj7qKmXVYn4i61fAwpSWcES5VonVaUfd1wodMNB7KXWdw1fTHysQS41-pfGgWhXnK_sZbOA61LGRCnf2figzbisSN_d2zCFJc3JaMs/s1600/facebook-icon.png' title='Facebook' width='18px'/></a>
    <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga2p9GI9N14ddIIrn77OAcP5uFcD9s3ebDgB9Q4ZfJphQfD7CulMTpQ-6FfleS5B-7IfPND7cICdlb6rqfiX0RyOvgLVxSWH2gngNGesJNtyOT5XuRSIEcaCqFFy6SPz-JHVcxay6yy64/s1600/twitter.png' title='Twitter' width='18px' /></a>
            <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgciY_gz4-oGqUPrjgCKEVWtyuwXChvQb1MzJ_l1JRo7XssRf1mNw0v-Ccqf-5U8fF7SXQyqpusbaKwTGbPiK6LHbQvxMblnWMk8-i-RV4EICcTK7bw5Ix_IqRQq8QMIg0mjcO4gy1f3Ns/s1600/google-plus-icon.png' title='Google' width='18px'/></a>
            <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioEHZyZHUug5RktJcesl9TfYan7S4G7WYq6rEO31ZSJ1M6GaYw9pF10aY5oLDJ1syl9wDfxJQYfQ9R62WhlksFUbyFxiWM6XaQsLTbOzlBcOnodJyFJ2pcvbdF-aV_LOPCAXT2DyfOB78/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a>
        </div>

        <div id='menu-container'>
            <nav id='neat-menu'>
                <ul>
                  <li class='active'><a href='/'>Home</a></li>
                    <li><a href='#'>Dropdown</a>
                        <ul>
                            <li><a href='#'>Menu element 1</a></li>
                            <li><a href='#'>Menu element 2</a></li>
                            <li><a href='#'>Menu element 3</a></li>
                            <li><a href='#'>Menu element 4</a></li>
                            <li><a href='#'>Menu element 5</a></li>
                        </ul>
                    </li>
                    <li><a href='#'>Dropdown</a>
                        <ul>
                            <li><a href='#'>Menu element 1</a></li>
                            <li><a href='#'>Menu element 2</a></li>
                            <li><a href='#'>Menu element 3</a></li>
                            <li><a href='#'>Menu element 4</a></li>
                            <li><a href='#'>Menu element 5</a></li>
                        </ul>
                    </li>
                    <li><a href='#'>Dropdown</a>
                        <ul>
                            <li><a href='#'>Menu element 1</a></li>
                            <li><a href='#'>Menu element 2</a></li>
                            <li><a href='#'>Menu element 3</a></li>
                            <li><a href='#'>Menu element 4</a></li>
                            <li><a href='#'>Menu element 5</a></li>
                        </ul>
                    </li>
                    <li><a href='#'>Single Menu</a></li>
                    <li><a href='#'>Single Menu</a></li>
                    <li><a href='#'>Dropdown</a>
                        <ul>
                            <li><a href='#'>Menu element 1</a></li>
                            <li><a href='#'>Menu element 2</a></li>
                            <li><a href='#'>Menu element 3</a></li>
                            <li><a href='#'>Menu element 4</a></li>
                            <li><a href='#'>Menu element 5</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>

            <!-- menu-search form -->
            <div id='menu-search'>
              <form method='get' action='/search'>
                    <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/>
                </form>
            </div>
        </div>
    </div>

Bước 3: Chỉnh sửa các link và tên menu theo ý của bạn rồi lưu template lại.

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