Một số vị trí quảng cáo thông dụng được làm sẵn để sử dụng nhanh chóng và tiện lợi hơn. Nếu bạn có nhu cầu gắn banner ảnh, bài viết này sẽ giúp bạn.

Một số vị trí quảng cáo thông dụng

Các loại banner này đều trượt theo trang web, vị trí cố định khá đơn giản nên mình không trình bày ở đây. Mình chia các quảng cáo thành 2 loại. PC, thiết bị có màn hình lớn:

  • Float Left + Right: 2 banner có kích thước 120×600 ở hai bên của trang web
  • Balloon Left + Right: 2 banner có kích thước 300×250 ở hai bên của trang web
  • PC Catfish: banner ở dưới chân trang

Mobile, thiết bị có màn hình nhỏ:

  • Mobile Catfish: banner trượt theo ở chân trang
  • Mobile Fixed Top: banner trượt theo ở đầu trang

Lưu ý: Một số tên các vị trí là do mình đặt.

I - Loại 1

CSS : trước ]]></b:skin>

Dưới đây là CSS mình làm sẵn, có thể đổi màu của các nút ở :root.

:root {
	--theme-color: #000;
}
body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	padding: 0;
	margin: 0;
}
.sticky-footer {
	cursor: pointer;
	width: 320px;
	left: calc(100% / 2 - 160px);
	position: fixed;
    bottom: 0;
    z-index: 999;
}
.sticky-top {
	bottom: auto;
	top: 0;
}
.sticky-x-button {
	position: absolute;
    left: 0;
    top: -10px;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    background: var(--theme-color);
    border-radius: 50%;
	width: 30px;
	height: 30px;
    line-height: 30px;
    text-align: center;
}
.sticky-top .sticky-x-button {
	top: auto;
	bottom: -10px;
}
.sticky-pc-footer-content {
	width: 728px;
	left: calc(100% / 2 - 364px);
}
.left-balloon {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999
}
.x-left-balloon {
	position: fixed;
	left: 0;
	bottom: 227px;
	display: block;
	background: var(--theme-color);
	color: #fff; cursor:
	pointer; padding: 5px 10px
}
.right-balloon {
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 999
}
.x-right-balloon {
	position: fixed;
	right: 0;
	bottom: 227px;
	display: block;
	background: var(--theme-color);
	color: #fff;
	cursor: pointer;
	padding: 5px 10px
}
.float-left {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999
}
.x-float-left {
	position: fixed;
	left: 0;
	top: 0;
	display: block;
	background: var(--theme-color);
	color: #fff;
	cursor: pointer;
	padding: 5px 10px
}
.float-right {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 999
}
.x-float-right {
	position: fixed;
	right: 0;
	top: 0;
	display: block;
	background: var(--theme-color);
	color: #fff;
	cursor: pointer;
	padding: 5px 10px
}

/*  Nếu sử dụng Bootstrap 3, không cần sử dụng đoạn này */

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
	display: none !important;
}
@media (max-width: 767px) {
	.visible-xs {
		display: block !important;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.visible-sm {
		display: block !important;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	.visible-md {
		display: block !important;
	}
}
@media (min-width: 1200px) {
	.visible-lg {
		display: block !important;
	}
}

HTML - Thường trên </body>

Các vị trí đều được đặt tên ở id, các bạn thay banner vào vị trí theo nhu cầu nhé.

<div id="pc-catfish" class="visible-lg visible-md sticky-footer sticky-pc-footer-content">
<a href="https://www.inithtml.com/#pc-catfish" target="_blank" rel="noopener"><img src="banners/768x90.jpg" alt="PC Catfish" width="768" height="90" loading="lazy"></a>
<span class="sticky-x-button" onclick="$('#pc-catfish').remove();">X</span>
</div>

<div id="mobile-fixed-top" class="visible-xs visible-sm sticky-footer sticky-top">
<div class="sticky-footer-content w-320-50">
<a href="https://www.inithtml.com/#mobile-fixed-top" target="_blank" rel="noopener"><img src="banners/320x50.jpg" alt="Mobile Fixed Top" width="320" height="50" loading="lazy"></a>
<span class="sticky-x-button" onclick="$('#mobile-fixed-top').remove();">X</span>
</div>
</div>

<div id="mobile-catfish" class="visible-xs visible-sm sticky-footer">
<div class="sticky-footer-content w-320-50">
<a href="https://www.inithtml.com/#mobile-catfish" target="_blank" rel="noopener"><img src="banners/320x50.jpg" alt="Mobile Catfish" width="320" height="50" loading="lazy"></a>
<span class="sticky-x-button" onclick="$('#mobile-catfish').remove();">X</span>
</div>
</div>

<div id="float-left" class="float-left visible-lg">
<a href="https://www.inithtml.com/#float-left" target="_blank" rel="noopener"><img src="banners/120x600.jpg" alt="Float Left" width="120" height="600" loading="lazy"></a>
<span class="x-float-left" onclick="$('#float-left').remove();">Đóng</span>
</div>

<div id="float-right" class="float-right visible-lg">
<a href="https://www.inithtml.com/#float-right" target="_blank" rel="noopener"><img src="banners/120x600.jpg" alt="Float Right" width="120" height="600" loading="lazy"></a>
<span class="x-float-right" onclick="$('#float-right').remove();">Đóng</span>
</div>

<div id="left-balloon" class="left-balloon visible-lg">
<a href="https://www.inithtml.com/#left-balloon" target="_blank" rel="noopener"><img src="banners/300x250.jpg" alt="Balloon Left" width="300" height="250" loading="lazy"></a>
<span class="x-left-balloon" onclick="$('#left-balloon').remove();">Đóng</span>
</div>

<div id="right-balloon" class="right-balloon visible-lg">
<a href="https://www.inithtml.com/#right-balloon" target="_blank" rel="noopener"><img src="banners/300x250.jpg" alt="Balloon Right" width="300" height="250" loading="lazy"></a>
<span class="x-right-balloon" onclick="$('#right-balloon').remove();">Đóng</span>
</div>

II - Loại 2



Hãy làm theo các bước dưới đây một cách cẩn thận để Thêm Quảng cáo cố định dưới cùng trong Blogger và làm cho blog blogger của bạn trông thật nổi bật, trước tiên hãy hiểu Quảng cáo cố định là gì và sự cần thiết của Quảng cáo cố định là gì?
{tocify} $title={Table of content}

Quảng cáo cố định (Sticky Ads)là gì

Chúng thường được sử dụng trong đầu trang, chân trang, thanh trái / phải, thanh bên trái và phải.

Sự cần thiết của Quảng cáo dính (Sticky Ads) là gì?

Quảng cáo cố định giúp bạn đặt và nhấn mạnh quảng cáo của mình bên trong và bên ngoài bố cục trang web của bạn. Với Quảng cáo cố định, bạn sẽ tạo quảng cáo cố định, quảng cáo này luôn hiển thị trong cửa sổ trình duyệt. Với sự trợ giúp của Quảng cáo cố định, bạn có thể hiển thị quảng cáo không cuộn với màn hình.

Làm cách nào để thêm quảng cáo dính (Sticky Ads) dưới cùng trong Blogger?

Tôi sẽ hướng dẫn bạn Thêm thanh tiến trình đọc trong Blogger, Ok, chúng ta hãy bắt đầu! 

Bước 1. Lúc đầu, bạn cần đi tới bảng điều khiển Blogger, tức là Blogger.com

Bước 2. Chuyển đến Phần Chủ đề và Nhấp vào Chỉnh sửa Nút HTML. 

Bước 3. Sao chép mã CSS được cung cấp bên dưới.

/* Sticky Ads */
.sticky-button{position:fixed;bottom:0;right:20px;width:50px;height:50px;border-radius:50px;background-color:#fdd929;box-shadow:0px 4px 12px 0 rgba(9,32,76,.05);z-index:20;overflow:hidden;-webkit-transition:all .2s ease;transition:all .2s ease;opacity:0;visibility:hidden}
.sticky-button.sticky{bottom:20px;opacity:1;visibility:visible}
.sticky-button > *{display:flex;align-items:center;height:100%}
.sticky-button > * svg{margin:auto;fill:inherit}
.sticky-ad{position:fixed;bottom:0;left:0;width:100%;min-height:70px;max-height:200px;padding:5px 0;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1);-webkit-transition:all .1s ease-in;transition:all .1s ease-in;display:flex;align-items:center;justify-content:center;background-color:#fefefe;z-index:20}
.sticky-ad .sticky-adClose{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:12px 0 0;position:absolute;right:0;top:-30px;background-color:#fefefe;box-shadow:0 -6px 18px 0 rgba(9,32,76,.08)}
.sticky-ad .sticky-adClose svg{fill:#767676}
.sticky-ad .sticky-adContent{flex-grow:1;overflow:hidden;display:block;position:relative}
.sticky-adInput:checked + .sticky-ad{padding:0;min-height:0}
.sticky-adInput:checked + .sticky-ad .sticky-adContent{display:none}{codeBox}

Bước 4 . Dán Mã CSS phía trên thẻ ]]></b: skin> 

Bước 5 . Sao chép mã HTML được cung cấp bên dưới.

<!--<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>-->
<input class='sticky-adInput hidden' id='sticky-adIn' type='checkbox'/>
<div class='sticky-ad' id='sticky-ad'>
<label class='sticky-adClose' for='sticky-adIn'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'></path></svg></label>
<div class='sticky-adContent'>
<!--<div class='ads-here' style='display:block;height:60px'/>-->
<ins class='adsbygoogle' data-ad-client='ca-pub-1234567891234567' data-ad-format='horizontal' data-ad-slot='3466897794' data-full-width-responsive='false' style='display:block;text-align:center'></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
</div>
<!--</b:if>-->{codeBox}

Bước 6 . Dán Mã HTML phía trên thẻ </body>

Bước 7 . Thay đổi phần được đánh dấu bằng ID nhà xuất bản AdSense và ID vùng quảng cáo AdSense của bạn.

Bước 8 . Nhấp vào Lưu! 

Vậy các bạn ơi, các bạn thích bài đăng này trên Add Bottom Sticky Ads trong Blogger như thế nào? Bây giờ bạn phải hiểu Cách thêm Quảng cáo cố định dưới cùng trong Blogger. Hãy cho chúng tôi biết cảm nhận của bạn về bài viết này về Cách thêm Quảng cáo cố định dưới cùng trong Blogger? bằng cách viết bình luận để chúng tôi cũng có thể có cơ hội học hỏi và cải thiện điều gì đó từ ý tưởng của bạn. 

III - Loại 3

Cách thực hiện

1Vào Chủ đề >> Chỉnh sửa HTML và dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>
.sticky_bottom{position:fixed;bottom:0;width:100%;max-width:1024px;z-index:999;background:#f2f2f2;padding:10px 5px 5px;text-align:center;box-sizing:border-box}
.button_sticky_bottom{position:absolute;width:40px;height:30px;background:#f2f2f2;top:-20px;padding:10px;border-radius:100%;z-index:888;left:50%;margin-left:-15px;text-align:center}
.ads_sticky_bottom{position:relative;z-index:999}

2Tìm đến thẻ </body> và dán đoạn code bên dưới vào trước thẻ đó
<div class="sticky_bottom">
<a href="javascript:;" class="button_sticky_bottom"><i class="fa fa-angle-down"></i> </a>
<div class="ads_sticky_bottom" style="display: block;">
//Đặt code quảng cáo của bạn tại đây    


</div>
</div>
<script type="text/javascript">
    $('.button_sticky_bottom').click(function(){
        $(".ads_sticky_bottom").slideToggle();
    })
</script>vu00
Vậy là xong rồi đấy, rất đơn giản phải không nào, việc cuối cùng là bạn hãy dán mã code quảng cáo của bạn vào đoạn HTML bên trên thôi. Kết quả sẽ hiện ra như hình bên dưới. Ngoài ra website của bạn cần sử dụng thêm Font-awesome để hiển thị mũi tên nhấp xuống nhé.