Tạo khung thông báo cho Blogspot (Blogger)

Thứ Bảy, 6 tháng 2, 2016

Tạo khung thông báo cho Blogspot (Blogger)

Nguyễn Đạt KhánhThứ Bảy, tháng 2 06, 2016 Facebook Comment Không có nhận xét nào

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.

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

Sticky Code By: http://www.bloggersentral.com/
Designed by: http://www.windows2it.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;
}

text-align: center;
.twistBlogger_NotificationBar label {

  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 {

  height: 40px;
position: relative;
  overflow: hidden;


  -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 {

/*--Change FontAwesome Icons Style Here--*/
display: none;
}

  font-size: 16px;
.twisteBlogger_ContentArea .fa {


  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;

  -webkit-transition: all 0.4s ease-in-out;
font-weight: normal;


  -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àydisplay: 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 @!

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..

Share:

LIKE and Share this article: :

Nguyễn Đạt Khánh | Thứ Bảy, tháng 2 06, 2016 | Code | Thủ thuật Blogger

Được viết bởi Khánh Nguyễn

Blog của tôi, Nguyễn Đạt Khánh là tên của tôi :
Nghề nghiệp: IT Computer Networking - Kỹ thuật viên Mạng máy tính Viễn thông
Bạn đang xem Blog của tôi. Đừng quên nhấn Like và Share để ủng hộ. Một điều tốt nhất mà tôi mong đợi, là những dòng Comments thiện chí với nhau. Xin chân thành cảm ơn tất cả các bạn.

Nơi truy cập vào Nick của Tôi trên mạng: