 |
| Demo slider ảnh blogspot kết hợp Bootstrap |
<script type="text/javascript">var FB_PUBLIC_LOAD_DATA_ = [null,[null,
[[694688120,"Họ và tên",null,0,[[1163305151,null,1]
]
]
,[1468232750,"Địa chỉ",null,0,[[907697464,null,1]
]
]
,[737430386,"Số điện thoại",null,0,[[1379117568,null,1]
]
]
,[1897205518,"Email",null,0,[[862252253,null,0]
]
]
,[292833533,"Sản phẩm cần mua",null,1,[[1906059869,null,0]
]
]
,[471265725,"Ghi chú",null,1,[[451854143,null,0]
]
]
]
,null,null,null,null,null,null,null,32,null,null,null,null,null,[2]
]
,"/forms","KH đặt hàng sản phẩm","",null,[[1,"https://docs.google.com/[domain]spreadsheet/ccc?key\u003d[key]\u0026usp\u003d[usp]#gid\u003dform"]
,[2,"//www.google.com/fusiontables/data?docid\u003d[key]"]
,[3,"https://docs.google.com/[domain]spreadsheets/d/[key]?usp\u003d[usp]#gid\u003d[grid]"]
]
,"0","",0,0,"","",0,"e/1FAIpQLSdQQK8oelcBPPmqTjiAdkMFKEY0lnRVHW-PQDEwqUYY0bu3-A",1]
;</script>
https://docs.google.com/forms/d/e/1FAIpQLSdQQK8oelcBPPmqTjiAdkMFKEY0lnRVHW-PQDEwqUYY0bu3-A/formResponse
<form action="https://docs.google.com/forms/d/e/1FAIpQLSc_oklobPt7EO05qTI4gVMOZXnRSaxeexyj7o8K-q7ak0nhig/formResponse?embedded=true" class="blockform" id="form_dathang" method="POST" onsubmit="return emptycart()" style="display: block;" target="hidden_iframe">
<div class="content-muangay">
<div class="col-md-7 left-muangay">
<div class="clear"> </div>
<div class="callout radius box_gio_hang">
<h3>
Thông tin giỏ hàng của bạn</h3>
<div class="simpleCart_items "> </div>
<ul class="pricing-table">
<li class="price"><span class="simpleCart_finalTotal" style="color: red;"></span> </li>
</ul>
</div>
<textarea aria-label="Thông Tin SP " class="ss-q-long valid" cols="0" dir="auto" id="entry_1366343006" name="entry_1366343006" rows="8"></textarea>
</div>
<div class="col-md-5 checkout"> <span class="tt-muangay"><label>Thông tin giao hàng</label></span>
<br />
<div class="node"> * Vui lòng nhập đầy đủ thông tin để chúng tôi giao hàng được chính xác, cảm ơn!</div>
<table cellpadding="0" cellspacing="0" class="muangay" style="width: 96%;">
<tbody>
<tr>
<td colspan="2">
<label for="entry_1054987373">
<input aria-label="Họ và tên" aria-required="true" class="ss-q-short" dir="auto" id="entry_1054987373" name="entry.1054987373" placeholder="Tên đầy đủ của bạn (*)" required="" title="" type="text" value="" /> </label>
</td>
</tr>
<tr>
<td colspan="2">
<div class="node"> * Địa chỉ nhận hàng</div>
<label for="entry_759686805">
<input aria-label="Số nhà, đường, (tòa nhà), phường/xã… (*)" aria-required="true" class="ss-q-short" dir="auto" id="entry_759686805" name="entry.759686805" placeholder="Số nhà, đường, (tòa nhà), phường/xã… (*)" required="" title="" type="text" value="" /> </label>
</td>
</tr>
<tr>
<td colspan="2">
<label for="entry_541202326">
<input aria-label="Số điện thoại (*)" aria-required="true" class="ss-q-short" dir="auto" id="entry_541202326" name="entry.541202326" placeholder="Số điện thoại (*)" required="" title="" type="text" value="" /> </label>
</td>
</tr>
<tr>
<td colspan="2">
<label for="entry_2042029242">
<input aria-label="Email (*)" aria-required="true" class="ss-q-short" dir="auto" id="entry_2042029242" name="entry.2042029242" placeholder="Email (*)" required="" title="" type="text" value="" /> </label>
</td>
</tr>
<tr>
<td colspan="2">
<div class="node"> * Tổng Đơn hàng</div>
<label for="entry_285795942">
<textarea aria-label="Tổng đơn hàng" class="ss-q-long" cols="0" dir="auto" id="entry_285795942" name="entry.285795942" placeholder="Tổng đơn hàng" rows="8"></textarea>
</label>
</td>
</tr>
<tr>
<td colspan="2">
<div class="node"> * Ghi chú</div>
<label for="entry_1964535027">
<textarea aria-label="Ghi chú" class="ss-q-long" cols="0" dir="auto" id="entry_1964535027" name="entry.1964535027" placeholder="Giao cho tôi vào giờ hành chính." rows="8"></textarea>
</label>
</td>
</tr>
<tr>
<td colspan="2">
<label>
<input class="button" id="ss-submit" name="submit" type="submit" value="Gửi" /> </label>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
Bạn thay các Trường thông tin và ID ở Bước 1 vào các trường thông tin trong form tương xứng
- Urlmuangay
- Urlgiohang
Thành link đằng sau thành link Giỏ hàng và Mua ngay của bạn: |
| Demo nút Call cho website (Nút call cho blogspot) |
 |
| Demo code Menu và Logo responsive đẹp cho website |
 |
| Hướng dẫn tạo đồng hồ đếm ngược blogspot |
 |
| Tạo Form liên hệ từ google biểu mẫu |
 |
| Demo popup quảng cáo ẩn hiện ở góc màn hình |
 |
| Hướng dẫn tạo slider ảnh có responsive đẹp load nhanh nhẹ |
 |
| Demo form đăng ký, form liên hệ bằng jotform.com |
 |
| Menu dọc cho blogspot dạng responsive đẹp và chuyên nghiệp |
<style type="text/css">
#cssmenu-doc,#cssmenu-doc ul,#cssmenu-doc ul li,#cssmenu-doc ul li a { margin:0; padding:0; border:0; list-style:none; line-height:1; display:block; position:relative; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#cssmenu-doc { width:200px; font-family:Helvetica,Arial,sans-serif; color:#ffffff; }
#cssmenu-doc ul ul { display:none; }
.align-right { float:right; }
#cssmenu-doc > ul > li > a { padding:15px 20px; border-left:1px solid #1682ba; border-right:1px solid #1682ba; border-top:1px solid #1682ba; cursor:pointer; z-index:2; font-size:14px; font-weight:bold; text-decoration:none; color:#ffffff; text-shadow:0 1px 1px rgba(0,0,0,0.35); background:#36aae7; background:-webkit-linear-gradient(#36aae7,#1fa0e4); background:-moz-linear-gradient(#36aae7,#1fa0e4); background:-o-linear-gradient(#36aae7,#1fa0e4); background:-ms-linear-gradient(#36aae7,#1fa0e4); background:linear-gradient(#36aae7,#1fa0e4); box-shadow:inset 0 1px 0 rgba(255,255,255,0.15); }
#cssmenu-doc > ul > li > a:hover,#cssmenu-doc > ul > li.active > a,#cssmenu-doc > ul > li.open > a { color:#eeeeee; background:#1fa0e4; background:-webkit-linear-gradient(#1fa0e4,#1992d1); background:-moz-linear-gradient(#1fa0e4,#1992d1); background:-o-linear-gradient(#1fa0e4,#1992d1); background:-ms-linear-gradient(#1fa0e4,#1992d1); background:linear-gradient(#1fa0e4,#1992d1); }
#cssmenu-doc > ul > li.open > a { box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 1px 1px rgba(0,0,0,0.15); border-bottom:1px solid #1682ba; }
#cssmenu-doc > ul > li:last-child > a,#cssmenu-doc > ul > li.last > a { border-bottom:1px solid #1682ba; }
.holder { width:0; height:0; position:absolute; top:0; right:0; }
.holder::after,.holder::before { display:block; position:absolute; content:""; width:6px; height:6px; right:20px; z-index:10; -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -ms-transform:rotate(-135deg); -o-transform:rotate(-135deg); transform:rotate(-135deg); }
.holder::after { top:17px; border-top:2px solid #ffffff; border-left:2px solid #ffffff; }
#cssmenu-doc > ul > li > a:hover > span::after,#cssmenu-doc > ul > li.active > a > span::after,#cssmenu-doc > ul > li.open > a > span::after { border-color:#eeeeee; }
.holder::before { top:18px; border-top:2px solid; border-left:2px solid; border-top-color:inherit; border-left-color:inherit; }
#cssmenu-doc ul ul li a { cursor:pointer; border-bottom:1px solid #32373e; border-left:1px solid #32373e; border-right:1px solid #32373e; padding:10px 20px; z-index:1; text-decoration:none; font-size:13px; color:#eeeeee; background:#49505a; box-shadow:inset 0 1px 0 rgba(255,255,255,0.1); }
#cssmenu-doc ul ul li:hover > a,#cssmenu-doc ul ul li.open > a,#cssmenu-doc ul ul li.active > a { background:#424852; color:#ffffff; }
#cssmenu-doc ul ul li:first-child > a { box-shadow:none; }
#cssmenu-doc ul ul ul li:first-child > a { box-shadow:inset 0 1px 0 rgba(255,255,255,0.1); }
#cssmenu-doc ul ul ul li a { padding-left:30px; }
#cssmenu-doc > ul > li > ul > li:last-child > a,#cssmenu-doc > ul > li > ul > li.last > a { border-bottom:0; }
#cssmenu-doc > ul > li > ul > li.open:last-child > a,#cssmenu-doc > ul > li > ul > li.last.open > a { border-bottom:1px solid #32373e; }
#cssmenu-doc > ul > li > ul > li.open:last-child > ul > li:last-child > a { border-bottom:0; }
#cssmenu-doc ul ul li.has-sub > a::after { display:block; position:absolute; content:""; width:5px; height:5px; right:20px; z-index:10; top:11.5px; border-top:2px solid #eeeeee; border-left:2px solid #eeeeee; -webkit-transform:rotate(-135deg); -moz-transform:rotate(-135deg); -ms-transform:rotate(-135deg); -o-transform:rotate(-135deg); transform:rotate(-135deg); }
#cssmenu-doc ul ul li.active > a::after,#cssmenu-doc ul ul li.open > a::after,#cssmenu-doc ul ul li > a:hover::after { border-color:#ffffff; }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
( function( $ ) {
$( document ).ready(function() {
$('#cssmenu-doc li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
}
else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});
$('#cssmenu-doc>ul>li.has-sub>a').append('<span class="holder"></span>');
(function getColor() {
var r, g, b;
var textColor = $('#cssmenu-doc').css('color');
textColor = textColor.slice(4);
r = textColor.slice(0, textColor.indexOf(','));
textColor = textColor.slice(textColor.indexOf(' ') + 1);
g = textColor.slice(0, textColor.indexOf(','));
textColor = textColor.slice(textColor.indexOf(' ') + 1);
b = textColor.slice(0, textColor.indexOf(')'));
var l = rgbToHsl(r, g, b);
if (l > 0.7) {
$('#cssmenu-doc>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
$('#cssmenu-doc>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
}
else
{
$('#cssmenu-doc>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
$('#cssmenu-doc>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
}
})();
function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0;
}
else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return l;
}
});
} )( jQuery );
//]]>
</script>
<div id='cssmenu-doc'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Product</span></a></li>
<li class='last'><a href='#'><span>Sub Product</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>Đó chưa phải tất cả ... Chúng tôi còn 100 mẫu blog đẹp khác. View all Mẫu Template Blogger
Hãy nhanh tay gọi điện ngay đến chúng tôi theo số 0988227905 hoặc đặt hàng thiết kế ngay hôm nay theo mẫu form bên dưới.
Chúng tôi sẽ hoàn thành trong thời gian sớm nhất cho quý khách
Hãy truy cập để trải nghiệm dịch vụ của chúng tôiSử dụng nội dung ở trang này và dịch vụ tại Share123.vn có nghĩa là bạn đồng ý với Thỏa thuận sử dụng và Chính sách phát triển của chúng tôi.
www.Share123.vn - Website chuyên thiết kế blogspot, zip blogger, thiết kế blog chuẩn seo, blogger responsive, Thủ thuật Blogspot, Free Template Blogspot, kho giao diện blog đẹp, premium template blogger, free template blogger, Với kinh nghiệm nhiều năm trong nghề thiết kế Temple, design skin web chúng tôi cam kết tạo ra những sản phẩm chất lượng, tối ưu đến tay người dùng, thiết kế theo yêu cầu của quý khách, cùng đội ngủ support chuyên nghiệp nhiệt tình, ...
Copyright 2013 © Share123.vn - Blogger Team. All right Reserved - Hotline: 0988.227.905 - Email: nguyenhuytap@gmail.com - website: www.share123.vn
X
