Box thông báo ở trang chủ chuyên nghiệp dành cho blogspot phong cách Material

Xin chào các bạn ,ở bài viết này mình sẽ hướng dẫn các bạn tạo popup thông báo phong cách Material, popup này chỉ hiển thị ở trang chủ và cố định tại vị trí góc phải màn hình ,bạn có thể tùy biến cũng như thay đổi vị trí popup bằng cách chỉnh sửa CSS.

Thông tin về Popup

Ngôn ngữ : CSS, HTML, Jquery
Phong cách : Material
Hiển thị ở : Trang chủ PC/ không hiển thị ở Mobile
Responsive : Không

Hướng dẫn chèn Popup vào blogspot

- Bạn tiến hành cho toàn bộ code sau vào trước thẻ đóng </body> sau đó chỉnh sửa cho vừa ý và khớp với blog của bạn cuối cùng bạn lưu lại :

<b:if cond='data:blog.isMobile'>


<b:else/>
<b:if cond='data:blog.pageType != "item"'><b:if cond='data:blog.pageType != "static_page"'>

Artikel Terkait
Trang trí Tết 2019 cho Blogspot bằng hình ảnh câu đối, cành mai treo hai bên
Hướng dẫn cài đặt comment của DISQUS cho Blogger
Tạo sitemap (sơ đồ) cho blogspot theo phong cách chuyên nghiệp
Get Link Video Google Drive Đơn Giãn Mới Nhất 2019
Hướng Dẫn Tạo Link Động Ở Trang Chủ Chuyên Nghiệp Trên Blogspot


<style>
.hidden {
visibility: hidden;
opacity: 0;
}

.top-notif {
z-index: 999;
background: #FFF;
width: 500px;
padding: 24px 24px 0 24px;
color: #212121;
border-radius: 2px;
box-shadow: 0 0 14px rgba(0, 0, 0, 0.24);
position: fixed;
bottom: 24px;
right: 24px;
transition: .3s;
}
.cta a{color: #fff;}
.top-notif h3 {
font: 1.1em Roboto;
margin-bottom: 24px;
}
.top-notif h3 span.close {
float: right;
height: 12px;
width: 12px;
margin: 3px;
position: relative;
cursor: pointer;
}
.top-notif h3 span.close:before, .top-notif h3 span.close:after {
content: '';
background: #212121;
width: 2px;
height: 115%;
position: absolute;
left: 50%;
transform: rotate(-45deg);
}
.top-notif h3 span.close:before {
transform: rotate(45deg);
}
.top-notif p {
font: .85em/1.7em Roboto;
margin-bottom: 24px;
}
button {
background: transparent;
padding: 0 16px;
margin: 0 0 16px 8px;
border: none;
border-radius: 2px;
outline: none;
text-transform: uppercase;
font: 500 .9em/2.5 Roboto;
white-space: nowrap;
cursor: pointer;
float: right;
transition: .2s;
}
button.cta {
background: #4285F4;
color: #FFF;
box-shadow: 0 0 2px rgba(66, 133, 244, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24);
}
button.cta.show {
margin: 0;
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
button.cta:hover {
background: #2a75f3;
box-shadow: 0 0 4px rgba(66, 133, 244, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}
button.ghost {
color: #3367D6;
color: #4285F4;
}
button.ghost:hover {
background: rgba(153, 153, 153, 0.2);
}
button a {
display: inline-block;
width: calc(100% + 32px);
color: inherit;
text-decoration: none;
transform: translateX(-16px);
}</style>
<div class='top-notif ripple'>
<h3>Thông báo từ Blogspot247<span class='close' title='Close'/></h3>
<p>Blog thành lập chưa lâu nên hiện tại cần một số các liên kết từ blog khác. Nếu các bạn có blog hãy cùng mình liên kết cùng nhau phát triển nhé. </p>
<button class='cta ripple' type='button'><a href='/lien-ket' target='_blank'>Đặt liên kết</a></button>
<button class='ghost ripple' type='button'>Để sau</button>
</div>
<script>$('.close, .ghost, .cta:not(.show)').on('click', function () {
$('.top-notif, .cta.show').toggleClass('hidden');
});
$('.cta.show').on('click', function () {
$('.top-notif, .cta.show').toggleClass('hidden');
});
</script>
</b:if></b:if></b:if>

- Sau khi lưu xong thì bạn có thể ra trang chủ của blog để kiểm chứng nhé. Bài viết đến đây là kết thúc nếu các bạn có thắc mắc cần giải đáp hoặc góp ý cho bài viết thì hãy để lại một bình luận bên dưới bài viết nhé !!!