Tạo Thanh Menu Top Cực Đẹp Cho Blogspot

Hôm Nay Mình Xin Chia Sẽ Thanh Menu Top Mình Đang Dùng đã responsive Cực Đẹp

Bước 1. Bạn Chỉ Cần Chèn Đoạn Code này Vào Chỗ Bạn Muốn Đặt Là Được

<style>
.wrap_pluskienthuc_menu {background:linear-gradient(50deg,#55579e 0%,#474988 35%,#55579e 0%,#55579e 30%,#55579e 100%);padding:0;width: 100%; z-index:10;-webkit-user-select: none;-moz-user-select:none;-o-user-select:none;transition:1s}
.menu_ngang {width:1080px; margin:0 auto}
.logo_menungang {display:inline-flex;align-items:center;height:50px;padding:5px 0}
.logo_menungang span {padding: 11px 25px; margin: 0 10px 0 0; background: rgba(0,0,0,.12);transition:.5s}
.logo_menungang span:hover {background-color:rgba(0,0,0,.25)}
.logo_menungang a {color: #fff; font-size: 30px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; font-family: "Roboto Condensed",sans-serif}
.search_menungang {display:inline}
.chuyenmuc_menungang {float:none;clear:both;display:inline}
.chuyenmucmenungang {display: inline; height: 50px; position: relative; top: -3px; left: 42px}
.chuyenmucmenungang li {list-style:none;display:inline;text-align:center}
.chuyenmucmenungang a{color: #fff; text-decoration: none; font-size: 18px; transition: .3s; padding: 5px 15px;border:2px solid transparent;border-radius:0;font-family:"Roboto Condensed",sans-serif;margin: 0; text-transform: uppercase; font-weight: 700; letter-spacing:0}
.chuyenmucmenungang a:hover{color:white;border:2px solid;border-radius:50px}
.chuyenmucmenungang a:focus{color:#55579e;background:#FFF;border:2px solid white;border-radius:50px}
@media screen and (max-width:1200px){
.logo_wrap_pluskienthuc_menu{margin-left:0}
.logo_wrap_pluskienthuc_menu span{visibility:hidden;margin:0!important}
.wrap_pluskienthuc_menu{background:#7174a2!important}
#pluskienthuc-popup-vt{display:none!important}
.logo_menungang a{font-size: 25px;}
.menu_ngang{width:68%!important}
.chuyenmuc_menungang{display:none!important}
.search_menungang{display:none!important}
}
</style>
<div class='wrap_pluskienthuc_menu'>
<div class='menu_ngang'>
<div class='logo_menungang'>
<a href='/' title='Trang chủ'><span>H</span>Hồng Hải Blog</a>
</div>
<div class='chuyenmuc_menungang'>
<div class='chuyenmucmenungang'>
<li><a href='/search/label/Thủ%20Thuật%20Windows' title='Thủ Thuật Windows'>Windows</a></li>
<li><a href='/search/label/Thủ%20Thuật%20Facebook' title='Facebook'>Facebook</a></li>
<li><a href='/search/label/Thủ%20Thuật%20Blogspot' title='Blog'>Blog</a></li>
<li><a href='/search/label/PSD%20Ảnh%20bìa' title='Ảnh Bìa'>Ảnh Bìa</a></li>
</div>
</div>
<div class='search_menungang'>
<style>#searchform{float:right;margin:0;padding:0}#searchform fieldset{padding:0;border:none;margin:0}#searchform input[type="text"]{outline:0;background:rgba(0,0,0,.15) url(http://sv1.upsieutoc.com/2017/09/02/icon8aa3b.png) left no-repeat;border:none;background-size:30px 30px;background-position:97% 50%;float:left;padding:0 25px 0 15px;height:60px;margin:0;width:280px;color:#fff;letter-spacing:-.5px;font:400 16px "Roboto",sans-serif;transition:.65s;border-radius:0;cursor:pointer}#searchform input:focus{outline:0;background:rgba(0,0,0,.245) url(http://sv1.upsieutoc.com/2017/09/02/icon8aa3b.png) left no-repeat;border:none;background-size:30px 30px;background-position:2% 50%;float:left;padding:0 10px 0 40px;margin:0;width:270px;color:#fff;letter-spacing:-.5px;font:400 16px "Roboto",sans-serif;border-radius:0;cursor:text}#searchform ::-webkit-input-placeholder{color:#eee}</style>
<form action='/search' id='searchform' method='get' title='Tìm kiếm'>
<fieldset>
<input class='text_input' id='s' name='q' onblur='if(this.value==''){this.value='Tìm kiếm thủ thuật, phần mềm,...';}' onfocus='if(this.value =='Tìm kiếm thủ thuật, phần mềm,...') {this.value=''; }' placeholder='Tìm kiếm thủ thuật, phần mềm,...' type='text' value='Tìm kiếm thủ thuật, phần mềm,...'/>
</fieldset>
</form>
</div>
</div>
</div>

Bước 2. Chỉnh sửa lại sao cho phù hợp và lưu mẫu.

Chúc Các Bạn Thành Công!!