Chia sẻ Popup, intro hiển thị Mã Giảm Giá, Voucher, Khuyến Mãi, Coupon, Săn Deal mua sắm cho Blogspot tiếp thị liên kết
🔥 Hot Topics :
🏷️
Thớt Gỗ Teak
🏷️
Xưởng Thớt Gỗ Xuất Khẩu
🏷️
Xưởng Xẻ Sấy Gỗ Tràm
🏷️
Xưởng Gỗ Ghép
🏷️
Xả Kho Gỗ Ghép Giá Rẻ
🏷️
Nhật Ký Chuyên Đề
🏷️
Thương Hiệu Cá Nhân
🏷️
Điện Thoại Thông Minh Chính Hãng
🏷️
Tư Vấn Xe Đạp
🏷️
Đồ Dùng Nhỏ - Lợi Ích To
🏷️
Mẹ Và Bé
🏷️
Gia Bảo TikTok Shop
Code đăng bài viết dạng Popup giữa màn hình chia sẻ hiển thị Mã Giảm Giá, Voucher, Khuyến Mãi, Coupon, Săn Deal mua sắm :
Thông thường code Popup & Intro được sử dụng hiển thị khi vào trang chủ hoặc hiển thị sau 1 thời gian nào đó ở trang bất kỳ với mục tiêu quảng cáo, hiển thị form đăng ký, thông báo,....
Hôm nay Gia Bảo Blog giới thiệu kiểu đăng bài viết BlogSpot dàng cho Blogger viết lách kiếm tiền online theo mô hình tiếp thị liên kết ( Affiliate Marketing ) cách kiếm tiền trực tuyến hấp dẫn & hiệu quả từ nội dung Website.
Xem thêm bài viết : https://www.digitalnomad.vn/2021/03/mmo-kiem-tien-online-tu-website-khong-kho-nhung-phai-biet-cachVoi297.html
Danh sách nội dung bài viết liên quan đến code thiết kế làm đẹp nội dung & giao diện blogspot :
➠ Nên cài cái gì vào BlogSpot của bạn
➠ Series thẻ Html / Class, Id & thuộc tính trong Css
➠ Ký tự đặc biệt chèn vào nội dung Blog/Web Content
➠ Danh sách template blogger đẹp dùng viết blog content marketing & kiếm tiền trên mạng
➠ Tổng hợp thẻ xml, code html, css, javascript dùng chỉnh sửa template blogspot
➠ Tìm hiểu trang quản trị blogspot bao gồm chủ đề, bố cục, trang, cài đặt, bài đăng,... giúp người dùng chỉnh sửa nội dung bài viết & chỉnh sửa giao diện trang blog/web.
➠ Làm việc với ngôn ngữ lập trình (XML, HTML, CSS, Javascript,...) & ứng dụng dùng thiết kế web bằng blogspot.
➠ Chia sẻ Popup, intro hiển thị Mã Giảm Giá, Voucher, Khuyến Mãi, Coupon, Săn Deal mua sắm cho Blogspot tiếp thị liên kết
➠ Xây dựng Blog Content + UX + Internal link dùng làm nơi chia sẻ & viết quảng cáo Top 10 Google & cách viết Slogan Top Of Mind
➠ Danh sách template blogger đẹp dùng viết blog content marketing & kiếm tiền trên mạng
➠ Danh sách tiêu đề bài viết tuyển chọn sắp xếp theo từng chuyên mục
➠ Next
Code 1 - Kiểu đăng bài viết dạng Popup kết hợp Intro - Css sử dụng chung cho tất cả các bài viết trên trang Blogspot :
Phần 1 Code Css Chèn trên </head> :
<!--Css JavaScript mo rong -->
<!--Css Post Intro - mau 1 dang bai viet-->
<!--
position: Inherit;
position: relative;
-->
<b:if cond='data:blog.isMobileRequest'>
<!-- hiển thị trên Mobile -->
<style>
#intro_homepage{ position: Inherit;
display: table;
width: 80%;
height: 300px;
margin: 0!important;
padding: 0!important;
z-index: 999;
background-size: cover!important;
background: #3c3c3c;}
.intro_homepage_content{position:relative;z-index:3}
.intro_label h2{animation:zoomInUp 6s;font-size:25px;font-weight:700;color:rgba(255,255,255,.85);letter-spacinggg:0;margin:0 0 0;padding:0;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase}
.intro_label p{animation: zoomInDown 4s; text-transform: uppercase; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); margin: 0; padding: 0; letter-spacing: 2px}
.intro_label{margin:0 auto;text-align:center;padding:0}
.intro_buttondown a{position:absolute;bottom:2%;left:50%;z-index:2;display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color:#fff;font:normal 400 20px/1 'Josefin Sans',sans-serif;letter-spacinggg:.1em;text-decoration:none;transition:opacity .3s}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
@-webkit-keyframes slideUpso {
from {-webkit-transform: translate(-700px, 0)}
to { -webkit-transform: translate(0px, 0px)}
}
.intro_label h2{
-webkit-animation: slideUpso 3s;
-moz-animation: slideUpso 3s;
-ms-animation: slideUpso 3s;
-o-animation: slideUpso 3s;
animation: slideUpso 3s;
}
@-webkit-keyframes slideUpsos {
from {-webkit-transform: translate(0, 1000px)}
to { -webkit-transform: translate(0px, 0px)}
}
.intro_label p{
-webkit-animation: slideUpsos 3s;
-moz-animation: slideUpsos 3s;
-ms-animation: slideUpsos 3s;
-o-animation: slideUpsos 3s;
animation: slideUpsos 3s;
}
</style>
<b:else/>
<!-- hiển thị trên PC -->
<style>
#intro_homepage{ position: Inherit;
display: table;
width: 30%;
height: 300px;
margin: 0!important;
padding: 0!important;
z-index: 999;
background-size: cover!important;
background: #3c3c3c;}
.intro_homepage_content{position:relative;z-index:3}
.intro_label h2{animation:zoomInUp 6s;font-size:25px;font-weight:700;color:rgba(255,255,255,.85);letter-spacinggg:0;margin:0 0 0;padding:0;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase}
.intro_label p{animation: zoomInDown 4s; text-transform: uppercase; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); margin: 0; padding: 0; letter-spacing: 2px}
.intro_label{margin:0 auto;text-align:center;padding:0}
.intro_buttondown a{position:absolute;bottom:2%;left:50%;z-index:2;display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color:#fff;font:normal 400 20px/1 'Josefin Sans',sans-serif;letter-spacinggg:.1em;text-decoration:none;transition:opacity .3s}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
@-webkit-keyframes slideUpso {
from {-webkit-transform: translate(-700px, 0)}
to { -webkit-transform: translate(0px, 0px)}
}
.intro_label h2{
-webkit-animation: slideUpso 3s;
-moz-animation: slideUpso 3s;
-ms-animation: slideUpso 3s;
-o-animation: slideUpso 3s;
animation: slideUpso 3s;
}
@-webkit-keyframes slideUpsos {
from {-webkit-transform: translate(0, 1000px)}
to { -webkit-transform: translate(0px, 0px)}
}
.intro_label p{
-webkit-animation: slideUpsos 3s;
-moz-animation: slideUpsos 3s;
-ms-animation: slideUpsos 3s;
-o-animation: slideUpsos 3s;
animation: slideUpsos 3s;
}
</style>
</b:if>
<!--End Css Post Intro - mau 1 dang bai viet-->
<!--End Css JavaScript mo rong -->
<!--Css Post Intro - mau 1 dang bai viet-->
<!--
position: Inherit;
position: relative;
-->
<b:if cond='data:blog.isMobileRequest'>
<!-- hiển thị trên Mobile -->
<style>
#intro_homepage{ position: Inherit;
display: table;
width: 80%;
height: 300px;
margin: 0!important;
padding: 0!important;
z-index: 999;
background-size: cover!important;
background: #3c3c3c;}
.intro_homepage_content{position:relative;z-index:3}
.intro_label h2{animation:zoomInUp 6s;font-size:25px;font-weight:700;color:rgba(255,255,255,.85);letter-spacinggg:0;margin:0 0 0;padding:0;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase}
.intro_label p{animation: zoomInDown 4s; text-transform: uppercase; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); margin: 0; padding: 0; letter-spacing: 2px}
.intro_label{margin:0 auto;text-align:center;padding:0}
.intro_buttondown a{position:absolute;bottom:2%;left:50%;z-index:2;display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color:#fff;font:normal 400 20px/1 'Josefin Sans',sans-serif;letter-spacinggg:.1em;text-decoration:none;transition:opacity .3s}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
@-webkit-keyframes slideUpso {
from {-webkit-transform: translate(-700px, 0)}
to { -webkit-transform: translate(0px, 0px)}
}
.intro_label h2{
-webkit-animation: slideUpso 3s;
-moz-animation: slideUpso 3s;
-ms-animation: slideUpso 3s;
-o-animation: slideUpso 3s;
animation: slideUpso 3s;
}
@-webkit-keyframes slideUpsos {
from {-webkit-transform: translate(0, 1000px)}
to { -webkit-transform: translate(0px, 0px)}
}
.intro_label p{
-webkit-animation: slideUpsos 3s;
-moz-animation: slideUpsos 3s;
-ms-animation: slideUpsos 3s;
-o-animation: slideUpsos 3s;
animation: slideUpsos 3s;
}
</style>
<b:else/>
<!-- hiển thị trên PC -->
<style>
#intro_homepage{ position: Inherit;
display: table;
width: 30%;
height: 300px;
margin: 0!important;
padding: 0!important;
z-index: 999;
background-size: cover!important;
background: #3c3c3c;}
.intro_homepage_content{position:relative;z-index:3}
.intro_label h2{animation:zoomInUp 6s;font-size:25px;font-weight:700;color:rgba(255,255,255,.85);letter-spacinggg:0;margin:0 0 0;padding:0;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase}
.intro_label p{animation: zoomInDown 4s; text-transform: uppercase; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); margin: 0; padding: 0; letter-spacing: 2px}
.intro_label{margin:0 auto;text-align:center;padding:0}
.intro_buttondown a{position:absolute;bottom:2%;left:50%;z-index:2;display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color:#fff;font:normal 400 20px/1 'Josefin Sans',sans-serif;letter-spacinggg:.1em;text-decoration:none;transition:opacity .3s}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
@-webkit-keyframes slideUpso {
from {-webkit-transform: translate(-700px, 0)}
to { -webkit-transform: translate(0px, 0px)}
}
.intro_label h2{
-webkit-animation: slideUpso 3s;
-moz-animation: slideUpso 3s;
-ms-animation: slideUpso 3s;
-o-animation: slideUpso 3s;
animation: slideUpso 3s;
}
@-webkit-keyframes slideUpsos {
from {-webkit-transform: translate(0, 1000px)}
to { -webkit-transform: translate(0px, 0px)}
}
.intro_label p{
-webkit-animation: slideUpsos 3s;
-moz-animation: slideUpsos 3s;
-ms-animation: slideUpsos 3s;
-o-animation: slideUpsos 3s;
animation: slideUpsos 3s;
}
</style>
</b:if>
<!--End Css Post Intro - mau 1 dang bai viet-->
<!--End Css JavaScript mo rong -->
Phần 2 Code html, css & javascript dùng chèn trực tiếp vào trang chỉnh sửa & đăng bài viết Blogspot
ở chế độ Html
:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
#popup-giua-man-hinh .headerContainer,#popup-giua-man-hinh .bodyContainer,#popup-giua-man-hinh .footerContainer{max-width:300px;margin:0 auto;background:#FFF}
#popup-giua-man-hinh .padding{padding:0px}
#popup-giua-man-hinh .bodyContainer{min-height:600px}
#popup-giua-man-hinh .popUpBannerBox{position:fixed;background:rgba(0,0,0,0.9);width:100%;height:100%;top:0;left:0;
color:#FFF;z-index:999999;display:none}
#popup-giua-man-hinh .popUpBannerInner{max-width:300px;margin:0 auto}
#popup-giua-man-hinh .popUpBannerContent{position:fixed;top:-40px}
#popup-giua-man-hinh .closeButton{color:red;text-decoration:none;font-size:18px}
#popup-giua-man-hinh a.closeButton{float:right}
</style>
<div id="popup-giua-man-hinh">
<div class="popUpBannerBox">
<div class="popUpBannerInner">
<div class="popUpBannerContent">
<p><a href="#" class="closeButton"></a></p>
<!-- ==================== CODE HIỂN THỊ QUẢNG CÁO ====================-->
<!--intro-->
<div id='intro_homepage'>
<div class='meta_'>
<div class='intro_homepage_content'>
<div class='intro_label'>
<h2 class='_title'>
<i aria-hidden='true' class='fa fa-gg' style=' display:none; font-weight: 900;margin:0 20px 0 0'>
</i>Đọc Vị Bất Kỳ Ai
<i aria-hidden='true' class='fa fa-gg' style=' display:none; font-weight: 900;margin:0 0 0 20px'></i>
<aa style='padding: 0 10px; background: #52537d; border-radius: 10px;'>
Sách hay</aa>
</h2>
<!-- <p>Blog chia sẽ thủ thuật Miễn Phí</p>-->
<!--QC Ads-->
<div class="separator" style="clear: both; text-align: center;">
<center>
<a href="https://go.isclix.com/deep_link/4442979790914282835?url=https://tiki.vn/doc-vi-bat-ky-ai-de-khong-bi-lua-doi-va-loi-dung-p335501.html" style="margin-left: 0em; margin-right: 0em;"><img border="0" data-original-width="300" src="https://salt.tikicdn.com/cache/w1200/media/catalog/product/d/o/docvi.u3059.d20170716.t121650.343912.jpg" /></a>
</center>
</div>
<!-- <br /><p></p>-->
<div style="border: 5px outset #FF2904;text-align: center;padding:5px;font-family: Impact,Charcoal,sans-serif;font-size: 25px;letter-spacing: 2px;word-spacing: 2px;color: #18023B;font-weight: normal;text-decoration: overline;font-style: normal;font-variant: normal;text-transform: uppercase;">
<a href="https://go.isclix.com/deep_link/4442979790914282835?url=https://tiki.vn/doc-vi-bat-ky-ai-de-khong-bi-lua-doi-va-loi-dung-p335501.html">
Xem nơi bán
</a>
</div>
<!--End QC Ads-->
</div>
</div></div>
<div class='meta_'>
</div>
</div>
<!--End intro-->
<!-- ==================== END HIỂN THỊ QUẢNG CÁO ====================-->
</div>
</div>
</div>
<script type="text/javascript">
function showPopUpBanner() {
$('.popUpBannerBox').fadeIn("2000");
}
setTimeout(showPopUpBanner, 1000); //thời gian popup bắt đầu hiển thị
$('.popUpBannerBox').click(function(e) {
if ( !$(e.target).is('.popUpBannerContent, .popUpBannerContent *' ) ) {
$('.popUpBannerBox').fadeOut("2000");
return false;
}
});
$('.closeButton').click(function() {
$('.popUpBannerBox').fadeOut("2000");
return false;
});
</script>
</div>
<style type="text/css">
#popup-giua-man-hinh .headerContainer,#popup-giua-man-hinh .bodyContainer,#popup-giua-man-hinh .footerContainer{max-width:300px;margin:0 auto;background:#FFF}
#popup-giua-man-hinh .padding{padding:0px}
#popup-giua-man-hinh .bodyContainer{min-height:600px}
#popup-giua-man-hinh .popUpBannerBox{position:fixed;background:rgba(0,0,0,0.9);width:100%;height:100%;top:0;left:0;
color:#FFF;z-index:999999;display:none}
#popup-giua-man-hinh .popUpBannerInner{max-width:300px;margin:0 auto}
#popup-giua-man-hinh .popUpBannerContent{position:fixed;top:-40px}
#popup-giua-man-hinh .closeButton{color:red;text-decoration:none;font-size:18px}
#popup-giua-man-hinh a.closeButton{float:right}
</style>
<div id="popup-giua-man-hinh">
<div class="popUpBannerBox">
<div class="popUpBannerInner">
<div class="popUpBannerContent">
<p><a href="#" class="closeButton"></a></p>
<!-- ==================== CODE HIỂN THỊ QUẢNG CÁO ====================-->
<!--intro-->
<div id='intro_homepage'>
<div class='meta_'>
<div class='intro_homepage_content'>
<div class='intro_label'>
<h2 class='_title'>
<i aria-hidden='true' class='fa fa-gg' style=' display:none; font-weight: 900;margin:0 20px 0 0'>
</i>Đọc Vị Bất Kỳ Ai
<i aria-hidden='true' class='fa fa-gg' style=' display:none; font-weight: 900;margin:0 0 0 20px'></i>
<aa style='padding: 0 10px; background: #52537d; border-radius: 10px;'>
Sách hay</aa>
</h2>
<!-- <p>Blog chia sẽ thủ thuật Miễn Phí</p>-->
<!--QC Ads-->
<div class="separator" style="clear: both; text-align: center;">
<center>
<a href="https://go.isclix.com/deep_link/4442979790914282835?url=https://tiki.vn/doc-vi-bat-ky-ai-de-khong-bi-lua-doi-va-loi-dung-p335501.html" style="margin-left: 0em; margin-right: 0em;"><img border="0" data-original-width="300" src="https://salt.tikicdn.com/cache/w1200/media/catalog/product/d/o/docvi.u3059.d20170716.t121650.343912.jpg" /></a>
</center>
</div>
<!-- <br /><p></p>-->
<div style="border: 5px outset #FF2904;text-align: center;padding:5px;font-family: Impact,Charcoal,sans-serif;font-size: 25px;letter-spacing: 2px;word-spacing: 2px;color: #18023B;font-weight: normal;text-decoration: overline;font-style: normal;font-variant: normal;text-transform: uppercase;">
<a href="https://go.isclix.com/deep_link/4442979790914282835?url=https://tiki.vn/doc-vi-bat-ky-ai-de-khong-bi-lua-doi-va-loi-dung-p335501.html">
Xem nơi bán
</a>
</div>
<!--End QC Ads-->
</div>
</div></div>
<div class='meta_'>
</div>
</div>
<!--End intro-->
<!-- ==================== END HIỂN THỊ QUẢNG CÁO ====================-->
</div>
</div>
</div>
<script type="text/javascript">
function showPopUpBanner() {
$('.popUpBannerBox').fadeIn("2000");
}
setTimeout(showPopUpBanner, 1000); //thời gian popup bắt đầu hiển thị
$('.popUpBannerBox').click(function(e) {
if ( !$(e.target).is('.popUpBannerContent, .popUpBannerContent *' ) ) {
$('.popUpBannerBox').fadeOut("2000");
return false;
}
});
$('.closeButton').click(function() {
$('.popUpBannerBox').fadeOut("2000");
return false;
});
</script>
</div>
Code 2 chèn trực tiếp vào trang chỉnh sửa & đăng bài viết Blogspot
ở chế độ Html :
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
#popup-giua-man-hinh .headerContainer,#popup-giua-man-hinh .bodyContainer,#popup-giua-man-hinh .footerContainer{max-width:960px;margin:0 auto;background:#FFF}
#popup-giua-man-hinh .padding{padding:20px}
#popup-giua-man-hinh .bodyContainer{min-height:500px}
#popup-giua-man-hinh .popUpBannerBox{position:fixed;background:rgba(0,0,0,0.9);width:100%;height:100%;top:0;left:0;
color:#FFF;z-index:999999;display:none}
#popup-giua-man-hinh .popUpBannerInner{max-width:300px;margin:0 auto}
#popup-giua-man-hinh .popUpBannerContent{position:fixed;top:150px}
#popup-giua-man-hinh .closeButton{color:red;text-decoration:none;font-size:18px}
#popup-giua-man-hinh a.closeButton{float:right}
</style>
<div id="popup-giua-man-hinh">
<div class="popUpBannerBox">
<div class="popUpBannerInner">
<div class="popUpBannerContent">
<p><a href="#" class="closeButton"></a></p>
<!-- ==================== CODE HIỂN THỊ QUẢNG CÁO ====================-->
<a href="https://go.isclix.com/deep_link/4442979790914282835?url=https://hoanghamobile.com/dien-thoai-di-dong/oppo-reno5-5g-chinh-hang"><img src="https://hoanghamobile.com/i/productlist/dsp/Uploads/2021/02/20/22222.png"/></a>
<!-- ==================== END HIỂN THỊ QUẢNG CÁO ====================-->
</div>
</div>
</div>
<script type="text/javascript">
function showPopUpBanner() {
$('.popUpBannerBox').fadeIn("2000");
}
setTimeout(showPopUpBanner, 1000); //thời gian popup bắt đầu hiển thị
$('.popUpBannerBox').click(function(e) {
if ( !$(e.target).is('.popUpBannerContent, .popUpBannerContent *' ) ) {
$('.popUpBannerBox').fadeOut("2000");
return false;
}
});
$('.closeButton').click(function() {
$('.popUpBannerBox').fadeOut("2000");
return false;
});
</script>
</div>
<style type="text/css">
#popup-giua-man-hinh .headerContainer,#popup-giua-man-hinh .bodyContainer,#popup-giua-man-hinh .footerContainer{max-width:960px;margin:0 auto;background:#FFF}
#popup-giua-man-hinh .padding{padding:20px}
#popup-giua-man-hinh .bodyContainer{min-height:500px}
#popup-giua-man-hinh .popUpBannerBox{position:fixed;background:rgba(0,0,0,0.9);width:100%;height:100%;top:0;left:0;
color:#FFF;z-index:999999;display:none}
#popup-giua-man-hinh .popUpBannerInner{max-width:300px;margin:0 auto}
#popup-giua-man-hinh .popUpBannerContent{position:fixed;top:150px}
#popup-giua-man-hinh .closeButton{color:red;text-decoration:none;font-size:18px}
#popup-giua-man-hinh a.closeButton{float:right}
</style>
<div id="popup-giua-man-hinh">
<div class="popUpBannerBox">
<div class="popUpBannerInner">
<div class="popUpBannerContent">
<p><a href="#" class="closeButton"></a></p>
<!-- ==================== CODE HIỂN THỊ QUẢNG CÁO ====================-->
<a href="https://go.isclix.com/deep_link/4442979790914282835?url=https://hoanghamobile.com/dien-thoai-di-dong/oppo-reno5-5g-chinh-hang"><img src="https://hoanghamobile.com/i/productlist/dsp/Uploads/2021/02/20/22222.png"/></a>
<!-- ==================== END HIỂN THỊ QUẢNG CÁO ====================-->
</div>
</div>
</div>
<script type="text/javascript">
function showPopUpBanner() {
$('.popUpBannerBox').fadeIn("2000");
}
setTimeout(showPopUpBanner, 1000); //thời gian popup bắt đầu hiển thị
$('.popUpBannerBox').click(function(e) {
if ( !$(e.target).is('.popUpBannerContent, .popUpBannerContent *' ) ) {
$('.popUpBannerBox').fadeOut("2000");
return false;
}
});
$('.closeButton').click(function() {
$('.popUpBannerBox').fadeOut("2000");
return false;
});
</script>
</div>
Code Intro đẹp hiển thị sản phẩm tiếp thị liên kết giữa trang
( mẫu 1 ) :
<style>
#intro_homepage{position:relative;display:table;width:100%;height:60vh;margin:0!important;padding:0!important;z-index:999;background:url(hinh-nen) no-repeat center center!important;background-size:cover!important}
#intro_homepage:before{content: ''; opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(transparent, #050a18)}
#intro_homepage:after{content:'';z-index:0;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(transparent,rgba(51, 51, 51, 0.15) 0%,rgba(12,23,36,0.4))}
.intro_homepage_content{position:relative;z-index:3}
.intro_label h2{animation:zoomInUp 6s;font-size:45px;font-weight:700;color:rgba(255,255,255,.85);letter-spacinggg:0;margin:0 0 .25em;padding:0;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase}
.intro_label p{animation: zoomInDown 4s; text-transform: uppercase; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); margin: 0; padding: 0; letter-spacing: 2px}
.intro_label{margin:0 auto;text-align:center;padding:0}
.intro_buttondown a{position:absolute;bottom:10%;left:50%;z-index:2;display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color:#fff;font:normal 400 20px/1 'Josefin Sans',sans-serif;letter-spacinggg:.1em;text-decoration:none;transition:opacity .3s}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
#intro_buttondown a span{position:absolute;top:-45px;left:50%;width:22px;height:22px;margin-left:-12px;border-left:1px solid #FFF;border-bottom:1px solid #fff;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:sdb05 2s infinite;animation:sdb05 2s infinite;box-sizing:border-box}
#intro_buttondown a{animation:zoomInDownn 8s}
@-webkit-keyframes sdb05{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes sdb05{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
#intro_buttondown a span:nth-of-type(1){-webkit-animation-delay:0s;animation-delay:0s}
#intro_buttondown a span:nth-of-type(2){-webkit-animation-delay:.2s;animation-delay:.2s}
#intro_buttondown a span:nth-of-type(3){-webkit-animation-delay:.4s;animation-delay:.4s}
.xem-hd{text-align:right;width:1080px;font-size:16px;color:#fff;text-transform:uppercase;letter-spacinggg:0;font-weight:300;position:absolute;bottom:20px;right:30px;z-index:9999}
.xem-hd a{color:rgba(255,255,255,.5);animation:slideToLeft 2s}
.xem-hd a:hover{color:#fff}
</style>
<div id='intro_homepage'>
<div class='meta_'>
<div class='intro_homepage_content'>
<div class='intro_label'>
<h2 class='_title'>
<i aria-hidden='true' class='fa fa-gg' style='margin:0 20px 0 0'/>
OPPO Reno5 5G chính hãng giá tốt
<i aria-hidden='true' class='fa fa-gg' style='margin:0 0 0 20px'/></h2>
<!--<p>An Khang Thịnh Vương - Vạn Sự Như Ý - Bác Sĩ Windows</p>-->
<!--QC Ads-->
<div class="separator" style="clear: both; text-align: center;"><a href="https://hoanghamobile.com/i/productlist/dsp/Uploads/2021/02/20/22222.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="370" data-original-width="370" src="https://hoanghamobile.com/i/productlist/dsp/Uploads/2021/02/20/22222.png" /></a></div><br /><p></p>
<div style="border: 5px outset #FF2904;text-align: center;padding:10px;font-family: Impact,Charcoal,sans-serif;font-size: 25px;letter-spacing: 2px;word-spacing: 2px;color: #18023B;font-weight: normal;text-decoration: overline;font-style: normal;font-variant: normal;text-transform: uppercase;">
<a href="https://go.isclix.com/deep_link/4442979790914282835?url=https://hoanghamobile.com/dien-thoai-di-dong/oppo-reno5-5g-chinh-hang">
Xem nơi bán
</a>
</div>
<!--End QC Ads-->
</div>
</div></div>
<div class='xem-hd'>
<!--
<a href='/' target='blank' title='Xem hướng dẫn'>Xem hd <i class='fa fa-angle-right'/>
</a>
-->
</div>
<section class='intro_buttondown' id='intro_buttondown'>
<a href='#continue'><span/><span style='margin-top: 10px'/><span style='margin-top: 20px'/></a>
</section>
<div class='meta_'>
</div>
</div>
<div id='continue'/>
#intro_homepage{position:relative;display:table;width:100%;height:60vh;margin:0!important;padding:0!important;z-index:999;background:url(hinh-nen) no-repeat center center!important;background-size:cover!important}
#intro_homepage:before{content: ''; opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: linear-gradient(transparent, #050a18)}
#intro_homepage:after{content:'';z-index:0;position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(transparent,rgba(51, 51, 51, 0.15) 0%,rgba(12,23,36,0.4))}
.intro_homepage_content{position:relative;z-index:3}
.intro_label h2{animation:zoomInUp 6s;font-size:45px;font-weight:700;color:rgba(255,255,255,.85);letter-spacinggg:0;margin:0 0 .25em;padding:0;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase}
.intro_label p{animation: zoomInDown 4s; text-transform: uppercase; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); margin: 0; padding: 0; letter-spacing: 2px}
.intro_label{margin:0 auto;text-align:center;padding:0}
.intro_buttondown a{position:absolute;bottom:10%;left:50%;z-index:2;display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color:#fff;font:normal 400 20px/1 'Josefin Sans',sans-serif;letter-spacinggg:.1em;text-decoration:none;transition:opacity .3s}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
#intro_buttondown a span{position:absolute;top:-45px;left:50%;width:22px;height:22px;margin-left:-12px;border-left:1px solid #FFF;border-bottom:1px solid #fff;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:sdb05 2s infinite;animation:sdb05 2s infinite;box-sizing:border-box}
#intro_buttondown a{animation:zoomInDownn 8s}
@-webkit-keyframes sdb05{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes sdb05{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
#intro_buttondown a span:nth-of-type(1){-webkit-animation-delay:0s;animation-delay:0s}
#intro_buttondown a span:nth-of-type(2){-webkit-animation-delay:.2s;animation-delay:.2s}
#intro_buttondown a span:nth-of-type(3){-webkit-animation-delay:.4s;animation-delay:.4s}
.xem-hd{text-align:right;width:1080px;font-size:16px;color:#fff;text-transform:uppercase;letter-spacinggg:0;font-weight:300;position:absolute;bottom:20px;right:30px;z-index:9999}
.xem-hd a{color:rgba(255,255,255,.5);animation:slideToLeft 2s}
.xem-hd a:hover{color:#fff}
</style>
<div id='intro_homepage'>
<div class='meta_'>
<div class='intro_homepage_content'>
<div class='intro_label'>
<h2 class='_title'>
<i aria-hidden='true' class='fa fa-gg' style='margin:0 20px 0 0'/>
OPPO Reno5 5G chính hãng giá tốt
<i aria-hidden='true' class='fa fa-gg' style='margin:0 0 0 20px'/></h2>
<!--<p>An Khang Thịnh Vương - Vạn Sự Như Ý - Bác Sĩ Windows</p>-->
<!--QC Ads-->
<div class="separator" style="clear: both; text-align: center;"><a href="https://hoanghamobile.com/i/productlist/dsp/Uploads/2021/02/20/22222.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="370" data-original-width="370" src="https://hoanghamobile.com/i/productlist/dsp/Uploads/2021/02/20/22222.png" /></a></div><br /><p></p>
<div style="border: 5px outset #FF2904;text-align: center;padding:10px;font-family: Impact,Charcoal,sans-serif;font-size: 25px;letter-spacing: 2px;word-spacing: 2px;color: #18023B;font-weight: normal;text-decoration: overline;font-style: normal;font-variant: normal;text-transform: uppercase;">
<a href="https://go.isclix.com/deep_link/4442979790914282835?url=https://hoanghamobile.com/dien-thoai-di-dong/oppo-reno5-5g-chinh-hang">
Xem nơi bán
</a>
</div>
<!--End QC Ads-->
</div>
</div></div>
<div class='xem-hd'>
<!--
<a href='/' target='blank' title='Xem hướng dẫn'>Xem hd <i class='fa fa-angle-right'/>
</a>
-->
</div>
<section class='intro_buttondown' id='intro_buttondown'>
<a href='#continue'><span/><span style='margin-top: 10px'/><span style='margin-top: 20px'/></a>
</section>
<div class='meta_'>
</div>
</div>
<div id='continue'/>
Code Intro đẹp hiển thị sản phẩm tiếp thị liên kết giữa trang
( mẫu 2 ) :
<style>
#intro_homepage{ position: relative;
display: table;
width: 100%;
height: 200px;
margin: 0!important;
padding: 0!important;
z-index: 999;
background-size: cover!important;
background: #3c3c3c;}
.intro_homepage_content{position:relative;z-index:3}
.intro_label h2{animation:zoomInUp 6s;font-size:45px;font-weight:700;color:rgba(255,255,255,.85);letter-spacinggg:0;margin:0 0 0;padding:0;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase}
.intro_label p{animation: zoomInDown 4s; text-transform: uppercase; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); margin: 0; padding: 0; letter-spacing: 2px}
.intro_label{margin:0 auto;text-align:center;padding:0}
.intro_buttondown a{position:absolute;bottom:10%;left:50%;z-index:2;display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color:#fff;font:normal 400 20px/1 'Josefin Sans',sans-serif;letter-spacinggg:.1em;text-decoration:none;transition:opacity .3s}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
@-webkit-keyframes slideUpso {
from {-webkit-transform: translate(-700px, 0)}
to { -webkit-transform: translate(0px, 0px)}
}
.intro_label h2{
-webkit-animation: slideUpso 3s;
-moz-animation: slideUpso 3s;
-ms-animation: slideUpso 3s;
-o-animation: slideUpso 3s;
animation: slideUpso 3s;
}
@-webkit-keyframes slideUpsos {
from {-webkit-transform: translate(0, 1000px)}
to { -webkit-transform: translate(0px, 0px)}
}
.intro_label p{
-webkit-animation: slideUpsos 3s;
-moz-animation: slideUpsos 3s;
-ms-animation: slideUpsos 3s;
-o-animation: slideUpsos 3s;
animation: slideUpsos 3s;
}
</style>
<div id='intro_homepage'>
<div class='meta_'>
<div class='intro_homepage_content'>
<div class='intro_label'>
<h2 class='_title'>
<i aria-hidden='true' class='fa fa-gg' style=' display:none; font-weight: 900;margin:0 20px 0 0'>
</i>OPPO Reno5 5G chính hãng
<i aria-hidden='true' class='fa fa-gg' style=' display:none; font-weight: 900;margin:0 0 0 20px'></i>
<aa style='padding: 0 10px; background: #52537d; border-radius: 10px;'>
giá tốt</aa>
</h2>
<!-- <p>Blog chia sẽ thủ thuật Miễn Phí</p>-->
<!--QC Ads-->
<div class="separator" style="clear: both; text-align: center;"><a href="https://hoanghamobile.com/i/productlist/dsp/Uploads/2021/02/20/22222.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="370" data-original-width="370" src="https://hoanghamobile.com/i/productlist/dsp/Uploads/2021/02/20/22222.png" /></a></div><br /><p></p>
<div style="border: 5px outset #FF2904;text-align: center;padding:10px;font-family: Impact,Charcoal,sans-serif;font-size: 25px;letter-spacing: 2px;word-spacing: 2px;color: #18023B;font-weight: normal;text-decoration: overline;font-style: normal;font-variant: normal;text-transform: uppercase;">
<a href="https://go.isclix.com/deep_link/4442979790914282835?url=https://hoanghamobile.com/dien-thoai-di-dong/oppo-reno5-5g-chinh-hang">
Xem nơi bán
</a>
</div>
<!--End QC Ads-->
</div>
</div></div>
<div class='meta_'>
</div>
</div>
#intro_homepage{ position: relative;
display: table;
width: 100%;
height: 200px;
margin: 0!important;
padding: 0!important;
z-index: 999;
background-size: cover!important;
background: #3c3c3c;}
.intro_homepage_content{position:relative;z-index:3}
.intro_label h2{animation:zoomInUp 6s;font-size:45px;font-weight:700;color:rgba(255,255,255,.85);letter-spacinggg:0;margin:0 0 0;padding:0;font-family:"Roboto Condensed",sans-serif;text-transform:uppercase}
.intro_label p{animation: zoomInDown 4s; text-transform: uppercase; font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.7); margin: 0; padding: 0; letter-spacing: 2px}
.intro_label{margin:0 auto;text-align:center;padding:0}
.intro_buttondown a{position:absolute;bottom:10%;left:50%;z-index:2;display:inline-block;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);color:#fff;font:normal 400 20px/1 'Josefin Sans',sans-serif;letter-spacinggg:.1em;text-decoration:none;transition:opacity .3s}
.meta_{display:table-cell;vertical-align:middle;text-align:center}
@-webkit-keyframes slideUpso {
from {-webkit-transform: translate(-700px, 0)}
to { -webkit-transform: translate(0px, 0px)}
}
.intro_label h2{
-webkit-animation: slideUpso 3s;
-moz-animation: slideUpso 3s;
-ms-animation: slideUpso 3s;
-o-animation: slideUpso 3s;
animation: slideUpso 3s;
}
@-webkit-keyframes slideUpsos {
from {-webkit-transform: translate(0, 1000px)}
to { -webkit-transform: translate(0px, 0px)}
}
.intro_label p{
-webkit-animation: slideUpsos 3s;
-moz-animation: slideUpsos 3s;
-ms-animation: slideUpsos 3s;
-o-animation: slideUpsos 3s;
animation: slideUpsos 3s;
}
</style>
<div id='intro_homepage'>
<div class='meta_'>
<div class='intro_homepage_content'>
<div class='intro_label'>
<h2 class='_title'>
<i aria-hidden='true' class='fa fa-gg' style=' display:none; font-weight: 900;margin:0 20px 0 0'>
</i>OPPO Reno5 5G chính hãng
<i aria-hidden='true' class='fa fa-gg' style=' display:none; font-weight: 900;margin:0 0 0 20px'></i>
<aa style='padding: 0 10px; background: #52537d; border-radius: 10px;'>
giá tốt</aa>
</h2>
<!-- <p>Blog chia sẽ thủ thuật Miễn Phí</p>-->
<!--QC Ads-->
<div class="separator" style="clear: both; text-align: center;"><a href="https://hoanghamobile.com/i/productlist/dsp/Uploads/2021/02/20/22222.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="370" data-original-width="370" src="https://hoanghamobile.com/i/productlist/dsp/Uploads/2021/02/20/22222.png" /></a></div><br /><p></p>
<div style="border: 5px outset #FF2904;text-align: center;padding:10px;font-family: Impact,Charcoal,sans-serif;font-size: 25px;letter-spacing: 2px;word-spacing: 2px;color: #18023B;font-weight: normal;text-decoration: overline;font-style: normal;font-variant: normal;text-transform: uppercase;">
<a href="https://go.isclix.com/deep_link/4442979790914282835?url=https://hoanghamobile.com/dien-thoai-di-dong/oppo-reno5-5g-chinh-hang">
Xem nơi bán
</a>
</div>
<!--End QC Ads-->
</div>
</div></div>
<div class='meta_'>
</div>
</div>
Các code trên thích hợp dùng đăng bài tiếp thị liên kết - cách kiếm tiền online hiệu quả dành cho các blogger viết lách.
Tham khảo :
- https://www.dichvumaytinhhcm.com/vn/thu-thuat/details/huong-dan-tao-popup-quang-cao-giua-man-hinh-website-blog-250
- https://www.sharetemplateseo.com/2016/11/popup-quang-cao-giua-man-hinh-cho-blogspot.html
- https://megacode.vn/files/view/huong-dan-tao-popup-quang-cao-giua-man-hinh-website-blog-4642.html
- https://www.nguyentruongson.info/2016/06/huong-dan-tao-popup-quang-cao-hien-giua-man-hinh-website-blogspot.html
- https://www.share123.vn/2013/12/huong-dan-tao-popup-quang-cao-giua-man.html
- https://www.zubicloud.com/thu-thuat-tao-popup-quang-cao-hien-thi-giua-trang-cho-website-blogspot
- [Popup đăng ký] https://www.bacsiwindows.com/2017/12/tao-popup-dang-ky-nhan-bai-viet-qua-email-tuyet-dep-cho-blogspot.html
- [Popup thông báo] https://www.giaodien.blog/2020/11/tao-thong-bao-popup-giua-ma-hinh-blog.html
- https://chiase78.blogspot.com/2017/12/tao-popup-quang-cao-giua-man-hinh.html
- [Intro] https://www.bacsiwindows.com/2017/11/tao-intro-tuyet-dep-cho-blogspot-chi-tu-css-va-html.html
- [Intro] https://www.honghaiblog.tech/2018/07/share-intro-hieu-ung-tuyet-ep-cho.html
- [Intro menu ] https://tempbacsiwindows.blogspot.com/2018/05/tao-menu-kem-intro-ep-cho-blogspot.html
