Chào bạn! có phải bạn muốn tìm mẫu thiết kế template blogspot Code Header Menu Bán Hàng, Chuẩn Responsive Cho Blogspot, code chỉ mang tính tham khảo, nếu bạn muốn dùng mẫu này để thiết kế các mẫu template bán hàng blogger, thì cứ thế mà dùng thui...
Code thiết kế khung header bán hàng
- Nếu bạn muốn chuyển đổi code này thành code của blogspot thì bạn chỉ cần thay khung code của blogger, code sử dụng đơn giản chỉ cần dùng CSS và HTML...
1. Code HTML
<!-- Toolbar -->
<nav class="navbar navbar-default" role="navigation" style="margin-bottom:0">
<div class="container-fluid">
<div class="navbar-header cart-header">
<a class="navbar-brand" href="#">
<img src="http://dev7.quik-web.net/images/logo.png" alt="" />
</a>
</div>
<form class="navbar-form navbar-left hidden-xs">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
<ul class="nav navbar-nav navbar-right login-nav">
<li><a href="#"><i class="fa fa-user-circle"></i> <span class="hidden-xs">Sign In</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs">My cart</span> <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-cart" role="menu">
<li>
<span class="item">
<span class="item-left">
<img src="http://lorempixel.com/50/50/" alt="" />
<span class="item-info">
<span>Item name</span>
<span>23$</span>
</span>
</span>
<span class="item-right">
<button class="btn btn-xs btn-danger pull-right"><i class="fa fa-times"></i></button>
</span>
</span>
</li>
<li>
<span class="item">
<span class="item-left">
<img src="http://lorempixel.com/50/50/" alt="" />
<span class="item-info">
<span>Item name</span>
<span>23$</span>
</span>
</span>
<span class="item-right">
<button class="btn btn-xs btn-danger pull-right"><i class="fa fa-times"></i></button>
</span>
</span>
</li>
<li class="divider"></li>
<li><a class="text-center" href="">View Cart</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Header 002 -->
<nav class="navbar navbar-default">
<div class="row">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Gallery <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more</a></li>
</ul>
</li>
<li>
<a href="#">Standards</a>
</li>
<li>
<a href="#">Resources</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right social-bar">
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#"><i class="fa fa-google"></i></a></li>
</ul>
</div>
</div>
</div>
</nav>
2. Code CSS
.navbar-default {
background-color: #fff;
border:none;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
color: #fff;
background-color: #337eb7;
}
.navbar-brand {
max-width: 230px;
height: 60px;
max-height: 60px;
padding-top: 5px;
padding-bottom: 5px;
img {
max-width: 100%;
}
}
.navbar-toggle {
margin-top: 13px
}
.navbar-form {
margin-top: 13px
}
/*==== navbar-xs =====*/
.navbar-xs {
background-color: #337eb7;
margin-bottom: 0;
border: none;
min-height: 30px;
.navbar-nav>li>a {
padding: 5px 10px;
color:#fff;
}
}
/*===== Mini Cart =====*/
.dropdown-cart{
min-width:250px;
position: absolute!important;
}
.dropdown-cart li .item{
display: block;
padding: 3px 10px;
margin: 3px 0;
}
.dropdown-cart li .item:hover{
background-color: #f3f3f3;
}
.dropdown-cart li .item:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.dropdown-cart li .item-left{
float:left;
}
.dropdown-cart li .item-left img,
.dropdown-cart li .item-left span.item-info{
float:left;
}
ul.dropdown-cart li .item-left span.item-info{
margin-left:10px;
}
.dropdown-cart li .item-left span.item-info span{
display:block;
}
.dropdown-cart li .item-right{
float:right;
}
.dropdown-cart li .item-right button{
margin-top:14px;
}
.cart-header {
float: left
}
.login-nav {
float: right;
> li {
display: inline-block;
}
}
@media (min-width: 768px){
.navbar-nav > li > a {
padding: 20px 13px;
}
/*.dropdown:hover .dropdown-menu {
display: block;
}*/
}
@media(max-width: 767px){
.social-bar li {
display: inline-block;
}
}
- Trên đây là bộ code mà có thể tham khảo để thiết kế các mẫu giao diện template chuẩn seo, đẹp, tải nhanh... đừng quên để lại comments ở bên dưới để cùng góp ý với VeoSpot nhé!
- Tham khảo: Chia Sẻ Code CSS Grid Card List Dạng Lưới Chuẩn Respondsive
1 Nhận xét