Hướng dẫn tạo khung thông báo cho Blogspot (Blogger)
Cập nhật ngày
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.
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 :)!
Post a Comment