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


Có rất nhiều thanh Notification (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 f4vnn, 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 Notification (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 trông đẹp và phong cách ở đầu blog của bạn.

Bạn có thể đặt Notification 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, nằm ở 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.

Tao thanh Notification thông báo đơn giản cho Blogger

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
  • Bây giờ 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 Mẫu Widget.
  • 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 Notification.

  • 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 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'>Red Text</span>Normal White Text<span class='bar-but'><a href='#'>Button Text</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 Save của bạn bằng cách nhấn nút Save .
Lưu ý: Bạn có thể thay đổi văn bản và các nút cho phù hợp.

Video hướng dẫn chi tiết

Xem thêm :Tại Đây
Blog Download Template Blogspot : Tại Đây
Blog Download Phần Mềm Free : Tại Đây
Blog Download Acapella : Tại Đây
Trang mã hóa URL : Tại Đây


Welcome to F4vnn.com - Blog Thủ Thuật, tất cả nội dung trên website được chúng tôi sưu tập trên Internet. Nếu có vấn đề về bản quyền với bài viết trên Blog vui lòng liên hệ với và chúng tôi sẽ xóa bài viết ngay lập tức . Liên lạc với Admin qua mail: hoangvansy90@gmail.com!

ĐỪNG QUÊN ĐĂNG KÝ FANPAGE ĐỂ NHẬN THỦ THUẬT MỚI NHẤT NHÉ!