Showing posts with label tao-blogspot-ban-hang. Show all posts
Showing posts with label tao-blogspot-ban-hang. Show all posts

Thursday, July 28, 2016

Hướng dẫn tạo Floating Social Bookmark trượt đẹp cho Blogspot

Hôm nay Sơn Nguyễn sẽ hướng dẫn tạo Floating Social Bookmark trượt đẹp cho Blogspot của bạn. 

Bộ này sẽ bao gồm các nút: Facebook, Twitter, G+, Pinterest, YouTube .... đều là các trang mạng xã hội rất nổi tiếng hiện nay. 


Ngoài ra sẽ có thêm 1 liên kết RSS Feed giúp độc giả theo dõi các bài viết của bạn.


Cách tạo Floating Social Bookmark trượt đẹp cho Blogspot

Truy cập vào Blogger --> Đăng nhập --> Chọn Blogspot bạn cần thực hiện --> Vào phần quản trị của Blogspot đó 

Trong phần quản trị Blogspot --> Mẫu --> Chỉnh sửa HTML 

Trong phần code HTML, bấm Ctr+F tìm phần tử  ]]></b:skin>

Copy đoạn code bên dưới và paste vào sau thẻ ]]></b:skin>

social-buttons {
position: fixed;
top: 130px;
width: 45px;
z-index: 9999;
}
.button-left {
left: 0;
}
.button-right {
right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
background-color: #33353B;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUGKN-5dWRQLgv6GcaESf0zJUTDsiZp-koZEcF32vQrHPcW43mKDuTbbCUyabUZfMyTZklB0zX23pnY23YhOg19nl3_vDS1Zx_EHsysCc0N6-cHQxTxSGIjT-CSCTrCNpA94HqKbHkahaS/s1600/mas-icons-namkna-blogspot-com.png);
}
.button-left #facebook-btn span {
background-position: right 10px;
}
.button-left #twitter-btn span {
background-position: right -35px;
}
.button-left #google-btn span {
background-position: right -127px;
}
.button-left #rss-btn span {
background-position: right -80px;
}
.button-left #pinterest-btn span {
background-position: 11px -177px;
}
.button-left #youtube-btn span {
background-position: 11px -223px;
}
.button-right #facebook-btn span {
background-position: 12px 10px;
}
.button-right #twitter-btn span {
background-position: 11px -35px;
}
.button-right #google-btn span {
background-position: 10px -127px;
}
.button-right #rss-btn span {
background-position: 11px -80px;
}
.button-right #pinterest-btn span {
background-position: 11px -177px;
}
.button-right #youtube-btn span {
background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
background-color: #C4302B;
}
.social-buttons a:hover .social-text {
display: block;
}
.button-left .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: left;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-left .social-text {
display: none;
float: right;
font-size: 1em;
font-weight: bold;
margin: 11px 40px 11px 0px;
white-space: nowrap;
}
.button-right .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: right;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-right .social-text {
display: none;
float: left;
font-size: 80%;
font-weight: bold;
margin: 11px 0 11px 40px;
white-space: nowrap;
}
.social-buttons .social-text {
color: #FFFFFF;
}

Trong ô tìm kiếm (bấm Ctr+F) bạn tìm thẻ đóng </head> 

Copy đoạn code bên dưới và Paste vào trước thẻ </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
$(window).load(function(){
$(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
$(this).stop();
$(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});

});
$(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
$(this).stop();
$(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
});
});
</script>

Lưu ý: nếu trang Blogspot của bạn đã có thư viện Jquery rồi thì hãy xóa dòng <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> đi nhé ^^

Tiếp tục, trong ô tìm kiếm (bấm Ctr+F) bạn tìm thẻ đóng </body> 

Copy đoạn code bên dưới và Paste vào trước thẻ đóng </body>

<div class='social-buttons button-right hidden-phone hidden-tablet'><a class='itemsocial' href='https://www.facebook.com/nguyentruongson.org' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a><a class='itemsocial' href='https://twitter.com/SonNguyen83' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a><a class='itemsocial' href='https://plus.google.com/+NguyễnTrườngSơn' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a><a class='itemsocial' href='http://pinterest.com/sontruongnguyen' id='pinterest-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Pinterest</span></span></a><a class='itemsocial' href='https://www.youtube.com/user/truongson83' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a><a class='itemsocial' href='http://feeds.feedburner.com/nguyentruongson/SsQL' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a></div>

P/s: Thay các thông số màu vàng tương ứng phù hợp với bạn nhé
Bấm Lưu mẫu để hoàn tất

Các bạn tự chiêm ngưỡng thành quả của mình nhé ^^

Để xem thêm các thủ thuật Blogger bạn bấm vào "Blogger" trên thanh menu nhé!

P/s: các đoạn code trong bài viết này được sưu tầm trên mạng


Tuesday, July 26, 2016

Hướng dẫn thiết kế website bán hàng miễn phí bằng Template Blogspot CatalogSpot

Hướng dẫn thiết kế website bán hàng miễn phí bằng Template Blogspot CatalogSpot

Đây là Template Blogspot bán hàng cực đẹp và miễn phí


Hôm nay Sơn Nguyễn sẽ hướng dẫn các bạn thiết kế website bán hàng miễn phí bằng Template Blogspot CatalogSpot

CatalogSpot là mẫu giao diện Blogger Template Blogspot bán hàng miễn phí thích hợp cho những bạn bán hàng online có tích hợp chức năng nhận thanh toán qua PayPal, tức là khi khách hàng khi đặt hàng và thanh toán trên website bán hàng của bạn thì bạn sẽ nhận được tiền qua tài khoản Paypal của bạn

Mẫu website bán hàng Template Blogspot CatalogSpot


 

Các tính năng nổi bật của Template Blogspot CatalogSpot
  • Có các Slideshow chuyên nghiệp.
  • Phần Menu giúp bạn tạo các Category sản phẩm
  • Giao diện trang chủ thân thiện với khách hàng.
  • Sản phẩm được trưng bày theo dạng lưới rất bắt mắt và chuyên nghiệp.
  • Tích hợp nút Add to Cart và hỗ trợ thanh toán bằng PayPal.

Video Hướng dẫn thiết kế website bán hàng miễn phí bằng Template Blogspot CatalogSpot




  • Các bạn hãy bấm ĐĂNG KÝ (Subscribe) Kênh để ủng hộ và nhận được video mới nhất nhé
  • Link: https://youtu.be/5-tNEoWX5V0

Hướng dẫn thiết kế website bán hàng miễn phí bằng Template Blogspot CatalogSpot


Bước 1: tạo 1 trang Blogspot cơ bản
Bước 2: download Template Blogspot CatalogSpot (bạn vào BTemplate.com và vào ô Search để tìm nhé)
Bước 3: trong phần quản trị Blogspot --> Mẫu --> Sao lưu/Khôi phục
Bước 3: Up file Template Blogspot CatalogSpot lên (nhớ phải Extract Here... trước nhé)
Bước 4: vào Chỉnh sửa HTML để tiến hành cài đặt, chỉnh sửa mẫu Template Blogspot CatalogSpot

Cách đăng bài viết

Cách đăng bài viết giới thiệu sản phẩm của mẫu Template Blogspot CatalogSpot ko giống với cách đăng bài viết thông thường. Các bài viết đã được định dạng theo mẫu của Template . Vì vậy các bạn dùng đoạn code dưới đây để đăng bài viết giới thiệu sản phẩm nhé

<div class="item_image"><img border="0" class="item_thumb" src="đường-link-hình-ảnh-sản-phẩm-của-bạn" />
<span class="item_price">$00.90</span></div>
<div class="item_Description">Some text for item description</div>

Bạn thay các dòng màu vàng cho phù hợp nhé

Chú ý: 
Hình ảnh có chiều rộng lớn hơn 700px
Giá: bạn có thể để là: 300.000 VNĐ. Tuy nhiên khi thanh toán nó sẽ mặc định thanh toán qua tiền tệ $$$. Vì vậy bạn hãy quy đổi giá sản phẩm của bạn qua $$$ nhé. Hoặc bạn tạo 1 trang Hướng dẫn mua hàng, Hướng dẫn thanh toán theo cách mà bạn muốn


Cài đặt thanh toán cho Website bán hàng
Để cài đặt thanh toán qua Paypal bạn cần có 1 tài khoản trên PayPal (đăng ký cũng đơn giản thôi, các bạn tự làm nhé. Nếu gặp vấn đề gì thì hãy comment phía dưới mình sẽ hỗ trợ thêm).

Phần cài đặt thanh toán như sau:

Trong phần quản trị Blogspot --> Mẫu --> chọn Edit HTML

Bấm Ctr+F để tìm  phần tử "CART SETTING" 

<script type='text/javascript'>
//<![CDATA[
/*----------------------------
CART SETTING
-----------------------------*/
$(function(){
simpleCart
({checkout:
{type: "PayPal" ,
email: "sontruongnguyen.....@gmail.com"
}
});
/*----------------------------
SHIPPING RATE SETTING
-----------------------------*/
simpleCart.shipping(function(){
if( simpleCart.quantity() > 20 )
{
return 0; }
else { return 10; }
});
});
//]]>
</script>

Thay thế địa chỉ email "sontruongnguyen.....@gmail.combằng đia chỉ Email Paypal của bạn

SHIPPING RATE SETTING: phí vận chuyển. Cụ thể:  là $10 nếu khách hàng mua ít hơn 20 sản phẩm và miễn phí nếu mua trên 20 sản phẩm (hoặc các bạn có thể bỏ qua nó, thay số 20 và số 10 thành số 0).


Tạo trang giỏ hàng

Để tạo trang giỏ hàng các bạn làm như sau:

Bước 1: Trong phần quản trị Blogspot --> Trang (Page)

Bước 2: tạo Trang mới (New Page)

Bước 3: chuyển nội dung soạn thảo sang chế độ HTML 

Bước 4: Copy và paste đoạn code bên dưới vào là xong

<div class="cart-view left">
<div class="simpleCart_items"></div>
</div>
<div class="cart-info right">
Shipping rate : <span class="simpleCart_shipping"></span>
<br/>
Total : <span class="simpleCart_grandTotal"></span><br/>
<br/>
<br/>
<div class="ck-btn">
<a href="javascript:;" class="simpleCart_checkout">Ready Checkout</a>
</div>
</div>

Bước 5: Xuất bản Trang giỏ hàng

Bước 6: nhớ khai báo với Google nhé (Submit Url)

Như vậy là xong rồi đấy ^^

Vậy là bạn đã tự mình tạo Blogspot bán hàng miễn phí bằng Template CatalogSpot rồi.

Hãy chia sẽ cảm nhận của bạn khi sử dụng Template Blogspot CatalogSpot trong việc bán hàng của bạn nhé.

Nếu trong quá trình thực hành bạn gặp vấn đề gì thì hãy comment phía dưới mình sẽ hỗ trợ thêm.

Việc tiếp theo là gắn tên miền cho Blogspot nữa là quá ok luôn, tránh trường hợp trang blogspot của bạn bị chặn bởi các nhà mạng ở Việt Nam

Nếu bạn chưa có tên miền thì có thể tham khảo cách mua tên miền giá rẻ , hoặc bấm vào "Khuyến mãi" hoặc "Domain" trên thanh menu.
Chúc các bạn thành công!!!

Tuesday, June 14, 2016

Hướng dẫn thêm/thay đổi Email quản trị tài khoản Blogspot

Hướng dẫn thêm/thay đổi Email quản trị tài khoản Blogspot

Thêm cộng tác viên viết bài cho Blogspot của bạn


Sau khi bạn đã tự thiết kế website bằng blogspot chuyên nghiệp rồi và bạn có nhu cầu đổi qua địa chỉ Email khác mà bạn thường xuyên dùng để tiện cho việc quản trị blog; hoặc thêm người khác đóng góp viết bài cho blog của bạn nếu bạn ko có nhiều thời gian để viết bài. 

Hôm nay Nguyễn Trường Sơn sẽ hướng dẫn các bạn cách thêm Cộng tác viên viết bài đóng góp cho blog của bạn, hoặc hướng dẫn thay quyền quản trị blog bằng 1 địa chỉ email khác.



Cũng đơn giản thôi ^^ Tiêu chí của blog này là vậy mà :D

Video Hướng dẫn thêm/thay đổi Email quản trị tài khoản Blogspot


  • Các bạn hãy bấm ĐĂNG KÝ (Subscribe) Kênh để ủng hộ và nhận được video mới nhất nhé
  • Link: https://youtu.be/6NQL4e8v1vs

Các bước thực hiện thêm/thay đổi Email quản trị tài khoản Blogspot như sau:

  • B1: bạn đăng nhập vào Blogspot bằng tài khoản Gmail mà bạn dùng để đăng ký blog lúc đầu. 
  • B2: Chọn blog mà bạn muốn thêm tác giả viết bài, hoặc bạn muốn thay quyền quản trị --> vào phần quản trị của blog đó
  • B3: Trong phần Quản trị blog, bạn chọn mục Cài đặt ---> Cơ bản
  • B4: Bạn kéo xuống phần chuyên mục Quyền , Trong phần Tác giả blog, bạn bấm + Thêm tác giả 
  • B5: Điền các tài khoản email của những người muốn tham gia đóng góp viết bài cho blog, hoặc bạn thêm 1 hoặc nhiều tài khoản email khác của bạn vào để thay quyền quản trị (các địa chỉ email cách nhau bởi dấu phẩy) - Lưu ý: Chỉ dùng Gmail thôi nhé. 
  • B6: bấm Mời tác giả để hoản tất

  • B7: người được mời sẽ nhận 1 email thông báo. bạn chỉ cần mở email và xác nhận lời mời
  • B8: tiến hành đăng nhập vào blogger/blogspot bằng địa chỉ mail mới 

  • B9: Xác nhận lời mời tham gia đóng góp cho blog (lời mời có giá trị trong 1 tháng)
Sau khi bạn xác nhận lời mời thì trong phần Blog của bạn sẽ xuất hiện trang blog mà bạn vừa được xét duyệt làm thành viên

Tại phần quản trị blog với Email cũ, bạn có thể phân quyền cho từng tài khoản email mới thêm vào.
  • Quyền tác giả: tài khoản có quyền này chỉ được phép đăng bài viết lên blog và chỉnh sửa hoặc xóa bài viết của chính họ. Điều này sẽ làm cho những tác giả khác của blog ko phải lo sợ bài viết của mình bị tác giả khác vào chỉnh sủa hay xóa mất
  • Quyền quản trị viên: khi tài khoản được set quyền này thì đồng nghĩa tài khoản này được phép làm mọi thứ :D, kể cả xóa tài khoản của bạn. Vì vậy, nếu bạn muốn thay đổi tài khoản email quản trị blogspot thì bạn biết phải làm gì rồi đấy :D Tuy nhiên, Sơn Nguyễn có lời khuyên với các bạn: dù có thay đổi quyền quản trị viên cho blogspot thì cũng ko nhất thiết xóa tài khoản email cũ, đề phòng trường hợp khẩn cấp cần lấy lại quyền quản trị blog thì vẫn còn cơ hội để làm lại

Nếu bạn muốn xóa tài khoản nào thì chỉ việc bấm vào dấu x cuối tài khoản đó (chỉ tài khoản Quản trị viên mới làm được)
Hoặc bạn Tự xóa mình khỏi blog này (nếu bạn đang tham gia đóng góp cho 1 blog khác)


Như vậy là bạn đã biết cách để thêm tác giả đóng góp cho blog của bạn, hoặc thay quyền quản trị blog cho địa chỉ email mới. Hj vọng bạn sẽ hài lòng với bài viết này. 


Monday, June 6, 2016

Hướng dẫn tạo Popup quảng cáo hiện giữa màn hình Website/Blogspot

Hướng dẫn tạo Popup cho Blogspot

Hình thức quảng cáo hiện giữa màn hình của trang Blogspot



Popup quảng cáo hiện giữa màn hình Blogspot là dạng popup quảng cáo tạo được sự chú ý nhất cho người dùng khi họ truy cập vào trang Blogspot của bạn. Hôm nay Nguyễn Trường Sơn sẽ hướng dẫn các bạn cách tạo Popup cho Blogspot Popup quảng cáo hiện giữa màn hình 

Cũng như các cách tạo popup cho Blogspot đã được hướng dẫn trước đó, bài hướng dẫn này cũng sử dụng 1 đoạn code để tạo Popup quảng cáo. Đoạn code này đã được tùy chỉnh tối ưu về tốc độ load trang Blogspot, Popup quảng cáo chỉ xuất hiện 1 lần nên ko gây phiền hà cho người dùng truy cập vào trang Blogspot của bạn.









Để tạo Popup quảng cáo xuất hiện giữa màn hình cho Blogspot các bạn chỉ cần chuẩn bị trước 1 banner làm hình nền cho Popup quảng cáo, rồi thực hiện theo các bước sau:

Bước 1: Truy cập vào trang Blogger.com
Bước 2: Đăng nhập vào Blogger bằng tài khoản Gmail của bạn
Bước 3: Ở phần quản trị Blog: chọn Blog cần tạo popup quảng cáo
Bước 4: Vào phần Bố cục --> Chọn Thêm tiện ích --> Chọn HTML/Javascript.
Bước 5: Copy đoạn code phía dưới và Paste vào phần nội dung của HTML/Javascript (Phần tiêu đề các bạn để trống)

<style type="text/css">
/* Huong dan boi huongdanblogspotchitiet.blogspot.com */
#mbt-counter {
padding: 10px;
font-family: oswald, verdana;
background-color: rgba(0, 0, 0, 0)!important;
color: #FFF!important;
position: absolute;
left: 59%;
top: 12%;
font-size: 15px;
}
.reveal-modal h2 {
position: absolute;
top: 5%;
font-family: oswald, arial;
font-size: 1.7em;
text-shadow: 2px 4px 10px #000;
color: #FF9D0F;
left: 4%;
}
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
left: 50%;
top:170px;
margin: -200px -200px -200px -600px;
width: 550px;
height: 305px;
background: rgba(51, 51, 51, 0) url(link hình ảnh nền quảng cáo) no-repeat -17px 0px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
color: #FFF;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 32px;
line-height: 0.5;
position: absolute;
right: 25px;
font-weight: bold;
cursor: pointer;
bottom: 25px;
color: #9C6417;
}
.reveal-modal .close-reveal-modal:hover {
color:#2d2d2f;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="https://fileitviet360.googlecode.com/svn/trunk/vuvanphong-popup.js"></script>
<script type='text/javascript'>
//<![CDATA[
//Setting Time
TargetDate = "12/25/2013 12:00 AM";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% days: %%H%% hrs: %%M%% mins: %%S%% secs";
FinishMessage = "Chúc các bạn thành công!";
//Hiding snowfall
$(document).ready(function()
{
$('a.close-reveal-modal').click(function() {$(document).snowfall('clear');});
//Setting cookie
if(sessionStorage.getItem("Hide-MBT-Popup") == 1) {
$(document).snowfall('clear');
$(document).snowfall.hide();
$("#myModal").hide();
}
sessionStorage.setItem("Hide-MBT-Popup", 1);
});
$(function() {
// Setting Animation
$('#myModal').reveal({
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: false, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
});
//Revealing Snowfall
<!-- $(document).snowfall({deviceorientation : true, round : true, minSize: 1, maxSize:8, flakeCount : 250}); -->
});
//]]>
</script>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<div id="myModal" class="reveal-modal" >
<h2><a href="https://huongdanblogspotchitiet.blogspot.com" target="_blank">Hướng Dẫn Blogspot Chi Tiết</a></h2>
<script type='text/javascript' src="https://fileitviet360.googlecode.com/svn/trunk/popup-counter.js"></script>
<a class="close-reveal-modal">&#215;</a>
</div>

Chú ý:

1- Phần được tô đỏ: phía cuối đoạn code là mã HTML hiển thị nội dung của quảng cáo, các bạn thay phần chữ màu xanh cho phù hợp với nhu cầu của các bạn
2- Dòng chữ "Chúc các bạn thành công!": các bạn có thể thay bằng 1 câu khác của bạn cho phù hợp, hoặc bạn có thể xóa nó đi (nếu muốn)
3- link hình ảnh nền quảng cáo: Các bạn thêm hình ảnh nền cho popup quảng cáo

Như vậy là Nguyễn Trường Sơn đã hướng dẫn xong cách tạo Popup cho Blogspot quảng cáo hiện giữa màn hình. Nếu có câu hỏi nào các bạn hãy comment xuống phía dưới nhé

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

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 11: Hướng dẫn tạo banner quảng cáo trượt dọc 2 bên website/Blogspot
Bài 12: Hướng dẫn tạo Popup quảng cáo nhỏ gọn ở góc dưới màn hình
Bài sau >>>

Friday, June 3, 2016

Hướng dẫn tạo Popup quảng cáo nhỏ gọn ở góc dưới màn hình

Hướng dẫn tạo Popup cho Blogspot

Quảng cáo cho khách vào website, kích thước nhỏ gọn ở góc dưới màn hình



Hôm nay Nguyễn Trường Sơn sẽ hướng dẫn các bạn cách tạo Popup quảng cáo nhỏ gọn ở góc dưới màn hình dành cho Blogspot. Khi người dùng/khách hàng truy cập vào trang Website/Blogspot của bạn thì popup quảng cáo sẽ tự động trượt lên và mở 1 cửa sổ quảng cáo nhỏ gọn ở phía dưới góc phải màn hình và có thể ẩn hiện tùy ý, rất thiện cảm với người dùng.






Popup quảng cáo nhỏ gọn ở góc dưới màn hình

Hướng dẫn tạo Popup quảng cáo nhỏ gọn ở góc dưới màn hình


Cũng đơn giản thôi. Ko có gì phức tạp cả :D

Để tạo popup quảng cáo góc dưới màn hình cho Blogspot các bạn chỉ cần thực hiện theo các bước sau:
  1. Bước 1: Truy cập vào trang Blogger.com 
  2. Bước 2: Đăng nhập vào Blogger bằng tài khoản Gmail của bạn
  3. Bước 3: Ở phần quản trị Blog: chọn Blog cần tạo popup quảng cáo 
  4. Bước 4: Vào phần Bố cục --> Chọn Thêm tiện ích --> Chọn HTML/Javascript.
  5. Bước 5: Copy đoạn code phía dưới và Paste vào phần nội dung của HTML/Javascript (Phần tiêu đề các bạn để trống)
<style type="text/css">
* html div#fl813691 {position: absolute; overflow:hidden;
top:expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop
+(documentElement.clientHeight-this.clientHeight)
: document.body.scrollTop
+(document.body.clientHeight-this.clientHeight));}
#fl813691{font: 12px Arial, Helvetica, sans-serif; color:#666; position:fixed; _position: absolute; right:0; bottom:0; height:150px; }
#eb951855{ width:279px; padding-right:7px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBTuc8uOP_uC-KLBbN4HhAYxlGxS_fNc48JNqqpZII674MfPd9B-vEUI9G6AaBkyJxPlx4H_p1YGOlrMsAJeMesAM1Xad8pQAqkMnBkO5U50Xp1idpE-bBHrt_uP8f5AQCGnB7SJBrcA2v/w15-h150-no/cuocsongmuonmau.info_bg_right.gif) no-repeat right top;}
#cob263512{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBqu-wFKz71HunbR5JdVcneeWv9bIojgjYcYkgFcNdx36vbR6_FUPZ7vErhM4oKDkay01yUkNLCAXwNiCnSbYZabwdRq2NR4zi3i5R5R0qxkSCiil0ksa8EQIln3td-XJfsiKmehhzLidn/w501-h150-no/cuocsongmuonmau.info_bg.gif) no-repeat left top; height:150px; padding-left:7px;}
#coh963846{color:#690;display:block; height:20px; line-height:20px; font-size:11px; width:277px;}
#coh963846 a{color:#690;text-decoration:none;}
#coc67178{float:right; padding:0; margin:0; list-style:none; overflow:hidden; height:15px;}
#coc67178 li{display:inline;}
#coc67178 li a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMPY-9qsh7FEZSlX7lfcgkKwLkL36KYYvfCTR-eV3ixD4qWKmcr7ktjWxy5B7esg5zaSd9385-FkWlhrdcHpEEen9v30DnkezQI9ByK7kUOkDEv4pStZ1A4kUQZyXbsyT38POhEi6OF6h7/w90-h30-no/cuocsongmuonmau.info_button.gif); background-repeat:no-repeat; width:30px; height:0; padding-top:15px; overflow:hidden; float:left;}
#coc67178 li a.close{background-position: 0 0;}
#coc67178 li a.close:hover{background-position: 0 -15px;}
#coc67178 li a.min{background-position: -30px 0;}
#coc67178 li a.min:hover{background-position: -30px -15px;}
#coc67178 li a.max{background-position: -60px 0;}
#coc67178 li a.max:hover{background-position: -60px -15px;}
#co453569{display:block; margin:0; padding:0; height:123px; border-style:solid; border-width:1px; border-color:#111 #999 #999 #111; line-height:1.6em; overflow:hidden;}
</style>
<div id="fl813691" style="height: 152px;">
<div id="eb951855">
<div id="cob263512">
<div id="coh963846">
<ul id="coc67178">
<li id="pf204652hide"><a class="min" href="javascript:pf204652clickhide();" title="Ẩn đi">Ẩn</a></li>
<li id="pf204652show" style="display: none;"><a class="max" href="javascript:pf204652clickshow();" title="Hiện lại">Xem </a></li>
</ul>
&nbsp;Hot: Hướng dẫn Blogspot Chi tiết
</div>
<div id="co453569">
<!-- code ads -->
<a target="_blank" href="
https://huongdanblogspotchitiet.blogspot.com"> <img style="margin:3px 1px 1px 3px;" border="0" width="264" src="Link-hình-ảnh-quảng-cáo" height="115" title="Hướng dẫn chi tiết | Từ cơ bản đến nâng cao"></a>
<!-- code ads -->

</div>
</div></div></div>
<script>
pf204652bottomLayer = document.getElementById('fl813691');
var pf204652IntervalId = 0;
var pf204652maxHeight = 150;//Chieu cao khung quang cao
var pf204652minHeight = 20;
var pf204652curHeight = 0;
function pf204652show( ){
pf204652curHeight += 2;
if (pf204652curHeight > pf204652maxHeight){
clearInterval ( pf204652IntervalId );
}
pf204652bottomLayer.style.height = pf204652curHeight+'px';
}
function pf204652hide( ){
pf204652curHeight -= 3;
if (pf204652curHeight < pf204652minHeight){
clearInterval ( pf204652IntervalId );
}
pf204652bottomLayer.style.height = pf204652curHeight+'px';
}
pf204652IntervalId = setInterval ( 'pf204652show()', 5 );
function pf204652clickhide(){
document.getElementById('pf204652hide').style.display='none';
document.getElementById('pf204652show').style.display='inline';
pf204652IntervalId = setInterval ( 'pf204652hide()', 5 );
}
function pf204652clickshow(){
document.getElementById('pf204652hide').style.display='inline';
document.getElementById('pf204652show').style.display='none';
pf204652IntervalId = setInterval ( 'pf204652show()', 5 );
}
function pf204652clickclose(){
document.body.style.marginBottom = '0px';
pf204652bottomLayer.style.display = 'none';
}
</script>

Các bạn thay 2 dòng màu đỏ và 2 dòng màu xanh cho phù hợp với Blogspot/Website của các bạn nhé.

Như vậy là Nguyễn Trường Sơn đã hướng dẫn xong cách tạo Popup cho Blogspot rồi nhé. Hi vọng nó có ích với bạn

Nếu bạn có câu hỏi nào thì hãy comment xuống phía dưới nhé

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

Để tìm các bài viết trên Google nhanh nhất, hãy tìm theo cú pháp: "từ khóa tìm kiếm + nguyentruongson.info"

<<< Bài trước
Bài 10: Hướng dẫn khắc phục lỗi không hiển thị hình ảnh của Blogspot
Bài 11: Hướng dẫn tạo banner quảng cáo trượt dọc 2 bên website/Blogspot
Bài sau >>>