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'>
<!-- hiển thị trên Mobile -->
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<!--Popup Style By Blogspot247-->
  <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: &#39;&#39;;
  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>$(&#39;.close, .ghost, .cta:not(.show)&#39;).on(&#39;click&#39;, function () {
  $(&#39;.top-notif, .cta.show&#39;).toggleClass(&#39;hidden&#39;);
});
$(&#39;.cta.show&#39;).on(&#39;click&#39;, function () {
  $(&#39;.top-notif, .cta.show&#39;).toggleClass(&#39;hidden&#39;);
});
</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é !!! 

views