tháng 1 2018 ~ Làm website đơn giản với blogspot

Chèn đoạn CSS sau phía trên thẻ ]]></b:skin> trong template: Bạn nhấn Ctrl+F để tìm thẻ
#maincart a {padding:2px 10px; background:#ddd; border-radius:0 5px; box-shadow:1px 1px 2px 1px #666; }
#maincart ul {margin:10px 0 5px 0; text-align:center; }
#maincart ul li {display:inline}
.bag{position:fixed; top:0px; width:980px; display:none; background:#eee; padding:10px; box-shadow:1px 1px 2px 1px #666;}
.bag .itemrow{float:left; width:125px; padding:5px; border-radius:15px 0; box-shadow:1px 1px 2px 1px #999; margin:5px 5px 0 0}
.bag ul {float:right}
.bag ul li{display:inline;}
.bag ul li a{padding:2px 10px; background:#ddd; border-radius:5px 0; box-shadow:1px 1px 2px 1px #666; margin-left:10px}
.bag ul li a:hover {background:#666; box-shadow:1px 1px 2px 1px #333;}
.bag h2{text-align:center; border-bottom:1px solid #333; margin-bottom:5px; padding-bottom:5px}
.bag .line {border-bottom:1px solid #333; margin:5px 0; width:980px}
.bag .item-decrement, .bag .item-increment {display:none}
.bag .item-total {border-top:1px solid #333}
.item_add{border:none; background:#999; margin:0; height:20px; width:95px; line-height:20px; text-shadow: 0.5px 0.5px 1px #444; color: #333; font-family: georgia; margin-top:5px}
.item_add:hover {cursor:pointer; color:#eee; background:#333}
.item_add{border-radius:5px}

.item_price{font-size:16px; font-weight:bold;}

P2. Đoạn code của giỏ hàng gồm 2 phần:

Phần 1: Phần cố định trên blog. (Chèn vào sidebar) bằng cách. Vào Bố cục (Layout) => Chọn Thêm tiện ích (Add a widget) => Chọn HTML/Javarscip => Đến đây bạn hãy dán code bên dưới và dán vào widget HTML/Javarscip của bạn nha.

<p>

Hiện có <span class='simpleCart_quantity'/> sản phẩm<br/>

Tổng Số Tiền: <span class='simpleCart_total'/><br/></p>

<ul>

</ul>

</div>

Phần 2: Phần giỏ chứa các sản phẩm. Chèn vào template bằng các: Vào Mẫu (Template) => Chọn Chỉnh sửa HTML (Edit HTML) => Tiếp tục (Proceed) => Dán đoạn code bên dưới vào sau thẻ <body> : Bạn nhấn Ctrl+F để tìm thẻ nhé.

Số Lượng: <span class='simpleCart_quantity'/> sản phẩm<br/>

Tổng Cộng: <span class='simpleCart_grandTotal' id='simpleCart_grandTotal'/>

<ul>

<li><a class='simpleCart_checkout' href='javascript:;'>Thanh Toán</a></li>

</ul>

</div>

P3. Phần code của sản phẩm

Phần này khi viết bài bạn check vào phần HTML và chèn code bên dưới vào.

Tên Sản Phẩm</h2>

P4. Phần Script của code Add to card

Chèn vào Template bằng các: Vào Mẫu (Template) => Chọn Chỉnh sửa HTML (Edit HTML) => Tiếp tục (Proceed) => Dán đoạn code bên dưới vào phía trên thẻ </head>

PhucNguyenIT xin chào tất cả mọi người, hôm nay blogs PhucNguyenIT sẽ hướng dẫn mọi người một hướng dẫn về làm thế nào để tạo ra một cửa sổ Login / Register Form Panel trên Blogspot với jQuery. Đăng nhập và đăng ký thường được sử dụng trên một blog hoặc trang web diễn đàn có nhiều thành viên. Ví dụ về các hình thức đăng nhập / đăng ký này có thể được tìm thấy nếu bạn đăng nhập vào Blogger, Facebook, Twitter hoặc các trang web cung cấp dịch vụ cộng đồng mạng. Ví dụ, bạn bè của tôi có thể nhìn thấy trong hình dưới đây,
làm thế nào để tạo được khung đăng nhập và đăng ký trên blogger
làm thế nào để tạo được khung đăng nhập và đăng ký trên blogger

làm thế nào để tạo ra một cửa sổ Login / Register Form Panel trên Blogspot với jQuery
Các bạn làm theo hướng dẫn bên dưới:
Đầu tiên, bạn phải đăng nhập vào blogger .
Sau đó nhấp vào Thiết kế ( mẫu)
Sau đó nhấp vào Edit Html
Đừng quên kiểm tra Expand Widget Templates (hãy lưu 1 bản mẫu để dự phòng)
Sau đó tìm mã sau </ head>
Tiếp theo đặt đoạn code Javascript bên dưới trên </ head>

view plainprint?
<script src='<span style="color: #990000;">http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js</span>' type='text/javascript'/><script style='display:none' type='text/javascript'>$(document).ready(function() {

// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});

// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});

// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});

});
</script>
sau đó bạn tìm trong code đoạn thẻ ]]> </ b: skin> , Sau đó bạn dán đoạn code CSS bên dưới vào trước thẻ
]]> </ b: skin>
Buka
/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */
.tab {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_b.png) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}

.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: white;
font-size: 80%;
text-align: center;
}

.tab ul.login li.left {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_l.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li.right {
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_r.png) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}

.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_m.png) repeat-x 0 0;
}

.tab ul.login li a {
color: #15ADFF;
}

.tab ul.login li a:hover {
color: white;
}

.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left 0;}
.tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left 0;}
.tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/css/../images/bt_close.png) no-repeat left -19px;}

/* sliding panel */
#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}

#panel {
width: 100%;
height: 270px;
color: #999999;
background: #272727;
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}

#panel h1 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: white;
}

#panel h2{
font-size: 1.2em;
padding: 10px 0 5px;
margin: 0;
color: white;
}

#panel p {
margin: 5px 0;
padding: 0;
}

#panel a {
text-decoration: none;
color: #15ADFF;
}

#panel a:hover {
color: white;
}

#panel a-lost-pwd {
display: block;
float: left;
}

#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}

#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px solid #333;
}

#panel .content .right {
border-right: 1px solid #333;
}

#panel .content form {
margin: 0 0 10px 0;
}

#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}

#panel .content input.field {
border: 1px #1A1A1A solid;
background: #414141;
margin-right: 5px;
margin-top: 4px;
width: 200px;
color: white;
height: 16px;
}

#panel .content input:focus.field {
background: #545454;
}

/* BUTTONS */
/* Login and Register buttons */
#panel .content input.bt_login,
#panel .content input.bt_register {
display: block;
float: left;
clear: left;
height: 24px;
text-align: center;
cursor: pointer;
border: none;
font-weight: bold;
margin: 10px 0;
}

#panel .content input.bt_login {
width: 74px;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_login.png) no-repeat 0 0;
}

#panel .content input.bt_register {
width: 94px;
color: white;
background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_register.png) no-repeat 0 0;
}

#panel .lost-pwd {
display: block;
float:left;
clear: right;
padding: 15px 5px 0;
font-size: 0.95em;
text-decoration: underline;
}
Sau khi tất cả mọi thứ mà bạn đã nhập vào, các bước tiếp theo là tìm mã </ body> và đặt đoạn mã sau đây bên trên
</ body>:

<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<div class='left'>
<h1>Chào mừng bạn đến với Blog PhucNguyenIT</h1>
<h2>Tạo cửa sổ Login Với JQuery</h2>
<p class='grey'>Bên cạnh đó, đây là một ví dụ trượt Login sử dụng JQuery. Đăng nhập Form Ngoài ra chỉ dụ và không thể được sử dụng như một Login Form FB, Vì Blog này là mở cửa cho công chúng mà không cần phải đăng ký làm thành viên</p>
<h2>Tutorial Blog</h2>
<p class='grey'>Untuk membuatnya Silahkan : <a href='http://creatingwebsite-maskolis.blogspot.com/2011/02/membuat-sliding-loginregister-form.html' title='Download'>Pencet Sini</a></p>
</div>

<div class='left'>
<form action='#' class='clearfix' method='post'>
<h1 class='padlock'>Member Login</h1>
<label class='grey' for='log'>Username:</label>
<input class='field' id='log' name='log' size='23' type='text' value=''/>
<label class='grey' for='pwd'>Password:</label>
<input class='field' id='pwd' name='pwd' size='23' type='password'/>
<label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Remember me</label>
<div class='clear'/>
<input class='bt_login' name='submit' type='submit' value='Login'/>
<a class='lost-pwd' href='#'>Lost your password?</a>

</form>
</div>
<div class='left right'>
<form action='#' method='post'>
<h1>Not a member yet? Sign Up!</h1>
<label class='grey' for='signup'>Username:</label>
<input class='field' id='signup' name='signup' size='23' type='text' value=''/>
<label class='grey' for='email'>Email:</label>
<input class='field' id='email' name='email' size='23' type='text'/>
<label>A password will be e-mailed to you.</label>
<input class='bt_register' name='submit' type='submit' value='Register'/>
</form>
</div>

</div>
</div>


<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>Xin chào Tất cả mọi người</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Đăng nhập | Đăng</a>
<a class='close' href='#' id='close' style='display: none;'>Tutup Panel</a>
</li>

<li class='right'/>
</ul>
</div>

</div>

Trong đoạn mã trên, đối với văn bản màu vàng có thể được thay đổi với các văn bản mà bạn muốn, cũng như g màu đỏ , bạn có thể thay đổi Đăng ký và đăng ký cho ví dụ. Sau đó nhấn Save Template bạn và xem kết quả.
tạo ra cửa sổ đăng nhập / đăng ký trên blogger
Thành công rồi đó ! các bạn save lại và xem thành quả nhé..
Tool hướng dẫn làm thế nào để tạo được khung đăng nhập và đăng ký trên blogger, làm thế nào để tạo ra một cửa sổ Login / Register Form Panel trên Blogspot chúc các bạn thành công
Hãy share nếu tin có ích với bạn và commnet bên dưới nếu bạn chưa rõ

Làm website đơn giản với blogspot.

Thứ Năm, 18 tháng 1, 2018

Cách thêm gio hàng và thanh toán và blogspot

Chủ Nhật, 14 tháng 1, 2018

Cách tạo khung đăng nhập đăng lý tài khoản

Giới thiệu về tôi

baner

Labels

Popular Posts

Follow on Facebook

Blog Archive