Hướng dẫn tạo khung thông báo cho Blogspot (Blogger)

Cập nhật ngày 23/07/2024 Bởi Legend Phim

Một khung thông báo được sử dụng để làm nổi bật một tin quan trọng hoặc muốn gây sự chú ý cho độc giả khi vào Blog của Bạn.

Hướng dẫn tạo khung thông báo cho Blogspot (Blogger)

Các Hello-Bar đi kèm với một loạt đầy đủ các tính năng tuyệt vời và bao gồm một nút hiển/ẩn cho phép người ẩn thanh thông báo nếu nó gây “kích thích” hoặc chỉ đơn giản là họ đã nhận thức điều quan trọng mà bạn muốn thông báo.

Tạo khung thông báo cho Blogspot cũng được rất nhiều Blogger Việt hướng dẫn…Nhưng Tôi vẫn không thấy nổi bật (ý kiến của riêng tôi) về tính năng, hiệu ứng cũng như bố cục của các khung thông báo. Chính vì vậy, hôm nay tôi hướng dẫn các bạn tạo khung thông báo cho Blogspot khá chuyên nghiệp…Và được rất nhiều Blogger nổi tiếng sử dụng chẳng hạn như: MyBloggerTricks.

☼ Đặc điểm khung thông báo mà Tôi sắp giới thiệu cho các bạn:

1. Tích hợp FontAwesome Icons.

2. Gọn gàng và thiết kế “sạch”.

3. Nút hiển/ ẩn bên phải thanh thông báo.

4. Dễ dàng tùy biến về màu sắc.

5. Dễ dàng cài đặt.

6. Tải rất nhanh.

7. Vẫn giữ trên đầu trang khi người dùng cuộn trang xuống dưới.

8. Tích hợp chức năng Responsive và không xuất hiện trên thiết bị điện thoại khi kích thước màng hình nhỏ hơn 497px vô hiệu hóa bằng CSS.

☼ Giờ bắt đầu thủ thuật cùng Windows2it.

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <head>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ <head>.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Bước 2: Tiếp đó nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </b:skin>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </b:skin>.

/*--------------------------------------------------------------
  Sticky Notification Bar For Blogger
  Designed by: http://m.Yingvn.com/
  Sticky Code By: http://www.bloggersentral.com/
--------------------------------------------------------------*/
#twistBlogger_NotificationBar_wrap {
  margin:0;
  padding:0;
  position:relative;
  width:100%;
  z-index:9999999;
}
.twistBlogger_NotificationBar {
  color: #fff;
  position: relative;
  background: #595959; /*--Change Background Color Here--*/
  width: 100%;
  padding: 0;
  text-align: center;
  font-family: Arial Black, sans-serif;
  text-shadow: 0px -1px 0px #000;
  margin: 0px auto;
  height: 40px;
  box-shadow: 0px 1px 5px #616161;
}
.twistBlogger_NotificationBar label:hover {
  cursor: pointer;
}
.twistBlogger_NotificationBar label {
  text-align: center;
  background: #FF5353; /*--Change Button Background Color Here--*/ 
  color: #FFF;
  border: 0;
  font-family: fontawesome;
  text-shadow: 0px -1px 0px #EC0000;
  font-size: 26px;
  -webkit-transition: 0.3s all ease-in-out;
  -moz-transition: 0.3s all ease-in-out;
  -ms-transition: 0.3s all ease-in-out;
  -o-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  position: relative;
  transition-delay: 0s;
  margin-top: 0;
  float: right;
  height: 35px !important;
  width: 30px;
  overflow: hidden !important;
  z-index: 9999;
  padding-top: 5px;
}
input.TwistBlogger_ShowHideButtonBar:checked + label {
  transform-origin: 12% 50% !important;
  transform: translateY(0px) rotateX(190deg);
  -webkit-transform: translateY(0px) rotateX(190deg);
  -moz-transform: translateY(0px) rotateX(190deg);
  -ms-transform: translateY(0px) rotateX(190deg);
  -o-transform: translateY(0px) rotateX(190deg);
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  -ms-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
  margin-top: 47px;
  border: 0;
}
input.TwistBlogger_ShowHideButtonBar ~ .twisteBlogger_ContentArea {
  position: relative;
  overflow: hidden;
  height: 40px;
  -webkit-transition: 0.5s all ease-in-out;
  -moz-transition: 0.5s all ease-in-out;
  -ms-transition: 0.5s all ease-in-out;
  -o-transition: 0.5s all ease-in-out;
  transition: 0.5s all ease-in-out;
}
input.TwistBlogger_ShowHideButtonBar:checked ~ .twisteBlogger_ContentArea {
  margin-top: -50px;
}
input.TwistBlogger_ShowHideButtonBar {
  display: none;
}
/*--Change FontAwesome Icons Style Here--*/
.twisteBlogger_ContentArea .fa {
  font-size: 16px;
  font-weight: normal;
  color: #FFFFFF;
  font-family: FontAwesome;
  border-bottom: 1px solid #FFFFFF;
  margin-right: 5px;
}
.twisteBlogger_ContentArea ul {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
  height: 100%;
}
.twisteBlogger_ContentArea ul > li {
  list-style: none;
  font-size: 14px;
  font-weight: bold;
  font-family: sans-serif;
  text-decoration: none;
  padding-top: 10px;
  margin-right: 10px;
  display: inline-block;
}
.twisteBlogger_ContentArea ul > li > a {
  color: #FFD946;   /*--Change Links Color Here--*/
  text-decoration: none;
  font-family: cursive;
  font-weight: normal;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.twisteBlogger_ContentArea ul > li > a:hover {
  color: #EFCB41 !important;  /*--Change Links Hover Color Here--*/
}
.bs_sticking {
  position:fixed !important;
  width: 100% !important;
}
@media only screen and (max-width:479px) {
#twistBlogger_NotificationBar_wrap, .twistBlogger_NotificationBar {
  display: none !important;
}
}

Bước 3: Tiếp tục nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <body>. Sau đó dán đoạn mã Code sau ở phía dưới thẻ <body>.

<div id='twistBlogger_NotificationBar_wrap'>
<div class='twistBlogger_NotificationBar'>
  <input class='TwistBlogger_ShowHideButtonBar' id='tbn' type='checkbox'/>
  <label for='tbn'><i class='fa fa-chevron-circle-up'/></label>
  <div class='twisteBlogger_ContentArea'>
  <ul>
  <li>
<i class='fa fa-signal'/> Trending: <a href='#Your-Link1'>Floating Social Media Buttons Bar</a>
</li>
  <li>
<i class='fa fa-fire'/> Hot: <a href='#Your-Link2'>Yingvn| Blogger Tutorisls</a>
</li>
  <li>
<i class='fa fa-rss'/> Rss: <a href='#Your-Link3'>Subscribe to RSS</a>
</li>
</ul>
  </div>
</div>
</div>

Bước 4: Tiếp tục nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </body>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </body>.

<script type='text/javascript'>
// Sticky widget by Bloggersentral.com
// Tutorial at http://www.bloggersentral.com/2013/04/how-to-make-any-widget-sticky.html
// Free to use or share, but please keep this notice intact.
//<![CDATA[
bs_makeSticky("twistBlogger_NotificationBar_wrap"); // enter your widget ID here
function bs_makeSticky(elem) {
    var bs_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
    var iniClass = bs_sticky.className + ' bs_sticky';
    window.addEventListener('scroll', bs_sticking, false);
    function bs_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            bs_sticky.className = iniClass + ' bs_sticking';
            bs_sticky.style.width = "100%";
        } else {
            bs_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

Bước 5: Lưu mẫu và xem kết quả.

☼ Tùy chỉnh:

· Màu xanh nước biển = Code biểu tượng FontAwesome.

· Màu xanh lá = Đoạn văn trước đoạn văn chứa liên kết.

· Màu đỏ = Link liên kết của bạn.

· Màu vàng = Đoạn văn mô tả chứa liên kết.

· Nếu bạn muốn nó hiện thị trên diện thoại có kịch thước nhỏ hơn 479px thì xóa đoạn CSS này display: none !important; đi

· Thêm thông báo khác bằng cấu trúc:

<li> <Font Awesome Icon Code/> Text String: <a href='Your-Link'>Anchor Text For Link</a></li>

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

Tham khảo: MyBloggerTricks.

Còn bạn muốn Support gì thì cứ để lại comment :)!

Hướng dẫn tạo khung thông báo cho Blogspot (Blogger)

Hướng dẫn tạo khung thông báo cho Blogspot (Blogger)

Một khung thông báo được sử dụng để làm nổi bật một tin quan trọng hoặc muốn gây sự chú ý cho độc giả khi vào Blog của Bạn.

Comments

Post a Comment

Liên quan