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.

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.

Đọc thêm:

● Thêm nút share trượt dọc cho Blogspot Pro Version 2.

● Tạo bình luận mới nhất (Recent comments) cho Blogspot.

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://www.windows2it.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'>Windows2it | 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.

Backlink: Giải pháp phát triển bền vững khu công nghiệp

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

About Quang Mến :

Tôi là Quang Mến. Tôi viết blog theo phong cách chuyên nghiệp. ^^! Dựa trên niềm đam mê học hỏi và mong muốn chia sẽ với mọi người @@!

Theo dõi tôi trên:

Trả lời

Hoàng Nhân Khôilúc 22:44 13 tháng 6, 2016

Xóa

Nhân Huỳnhlúc 03:13 14 tháng 6, 2016

mà bác cho em hỏi cái blog của em nó mặc định số bài viết trên trang chủ ở trong template rồi giờ em muốn có nhiều bài viết hơn thì tìm chỗ nào để sửa ạ . tks bác

myblog: https://kcit-nhanhuynh.blogspot.com/

Hoàng Nhân Khôilúc 08:38 14 tháng 6, 2016

Trước tiên bạn đọc bài này : Khắc phục lỗi không phân trang cho Blogspot (Blogger) ... Nếu ko làm được (hay ko hiểu chỗ nào) thì cứ để lại comment mình sẽ giúp... :)

About Quang Mến :

THỦ THUẬT LIÊN QUAN

7 nhận xét: