Tạo thanh thông báo đơn giản cho Blogger



Có rất nhiều thanh Thông báo có sẵn cho blogspot nhưng chúng đi kèm với các khoản tín dụng cố định có thuộc tính không thể tháo rời. Vì vậy, hôm nay tại sorabloggingtips, chúng tôi sẽ chia sẻ một tiện ích tìm kiếm tuyệt vời, phong cách và cao cấp mà không có bất kỳ tín dụng thương hiệu và ẩn nào. Trong những ngày này, nó trở thành xu hướng để thực hiện loại thanh Thông báo nổi này trong các blog và điều quan trọng nhất là nó trông rất tuyệt. Ngoài ra nhiều blog phổ biến đang sử dụng loại thanh này để thông báo cho độc giả của họ hoặc hiển thị một số nội dung quan trọng ở top.it trông đẹp và phong cách ở đầu blog của bạn. Bạn có thể đặt thông báo về bài đăng mới nhất hoặc phổ biến của mình để khách truy cập blog của bạn có thể dễ dàng liên lạc với chủ đề hoặc bài viết đó. Thanh thông báo có thể dễ dàng đóng và mở bằng một nút duy nhất ở bên phải của thanh . Các widget hoạt động rất trơn tru vì nó được hỗ trợ bởi mã jquery và được tạo kiểu bởi css. Tùy chỉnh tiện ích này rất dễ dàng, bạn có thể dễ dàng thay đổi nền, màu đường viền và màu văn bản. Hãy có bản demo của thanh thông báo trông tuyệt vời này. Bạn có thể kiểm tra bản demo ở trên trong trang web này.

Cách cài đặt tiện ích này: -

Các bước này rất đơn giản và dễ dàng đến nỗi bất kỳ blogger mới nào cũng sẽ không gặp phải bất kỳ vấn đề nào để cài đặt nó trong blog của họ. 
Truy cập Blogger.com >> Blog của bạn >> Mẫu 
ngay Sao lưu mẫu của bạn. 
Sau đó chọn Chỉnh sửa HTML >> Tiếp tục 
Đừng quên Nhấp / Đánh dấu vào ô Mở rộng tiện ích mẫu. 
Tìm kiếm <head> và ngay bên dưới nó dán mã CSS sau.
    <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Bây giờ chúng tôi phải thêm mã jQuery và CSS trong mẫu của bạn, nó sẽ chịu trách nhiệm về chức năng của thanh.

  • Chuyển đến Blogger> Mẫu
  • Sao lưu mẫu của bạn
  • Nhấp vào Chỉnh sửa HTML
  • Tìm kiếm </ head>
  • Dán các đoạn script sau ngay phía trên nó:
 <style>
.tybar{width: 100%;
margin: 0;
height: 50px;
display: table;
font-size: 17px;
line-height: 50px;
font-weight: 600;
-webkit-font-smoothing: antialiased;
color: rgb(255, 255, 255);
    font-family: Ruda;
border-color: rgb(255, 255, 255);
background-color: #0e1032;
box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15); 
text-align: center;}
.tybar .bar-but{font-size: 17px;
font-weight: bold;
margin-left: 25px;
background: #fff;
padding: 5px;
color: #fff;
background-color: #f2132d;
line-height: 1.05;
padding: 4px 15px;
cursor: pointer;
text-decoration: none;
border-radius: 3px;}
.tybar .bar-but a{color:#fff;    text-decoration: none;}
.tybar i {
float: right;
padding-right: 40px;
cursor: pointer;
line-height: 50px;
}
body{margin-top:-49.33px;}
body{margin-top:49.33px ;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;}
.toggleclose{top:-75px!important;}
.togglebody{margin-top:0!important;}
.fa-arrow-down {
position: fixed;
right: 30px;
top: -2px;
background:#00BE98;
color: #FFFFFF;
width: 40px;
height: 30px;
border-radius: 3px;
line-height: 26px!important;
padding-top: 10px;
padding-right: 0!important;
}
.tybar{z-index:99999;top:0;transition:600ms;-webkit-transition:600ms;-moz-transition:600ms;-o-transition:600ms;position:fixed}
.blink_me {
color:#f2132d;
margin-right:10px;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
 
    -moz-animation-name: blinker;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
 
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@-webkit-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}
@media screen and (max-width:800px) {
.tybar{display:none;}
body {
    margin-top: 0;
    }
}
</style>
<script>
//<![CDATA[
jQuery(document).ready(function(){
  jQuery( '.tybar i' ).click(function() {
  jQuery( '.tybar' ).toggleClass( 'toggleclose' );
  jQuery( 'body' ).toggleClass( 'togglebody' );
  jQuery( '.tybar i' ).toggleClass( 'fa-times' );
  jQuery( '.tybar i' ).toggleClass( 'fa-arrow-down' );
});
});
//]]>
</script>
Bây giờ, hãy thêm phần cuối cùng và quan trọng của tiện ích, Tìm kiếm <body>   và ngay bên dưới / sau nó dán mã sau đây. nếu bạn không tìm thấy <body> thì hãy tìm kiếm  <body expr: class = 'data: blog.pageType'>
 <div class='tybar'>
<span class='blink_me'>HOT !!!</span>nguyenthanhdanh.net<span class='bar-but'><a href='#'>Xem Ngay</a></span><i class='fa fa-times'/>
</div>
Tất cả đã hoàn thành: Bây giờ mọi thứ đã hoàn tất chỉ cần Lưu Mẫu của bạn bằng cách nhấn nút Lưu mẫu. 
Lưu ý: Bạn có thể thay đổi văn bản và các nút cho phù hợp.

Đăng nhận xét

0 Nhận xét