Iris Tips
Iris TipsAdd a Hide / Show Notification Bar With CSS Effects in blogger
Đôi khi bạn cần tương tác thông báo với độc giả điều đó. Bạn không có công cụ nào thích hợp để làm việc đó? Notification Bar là một gợi ý không tồi dành cho bạn. Notification Bar sẽ là nơi chứa những thông điệp kết nối bạn độc giả đến gần với nhau hơn.
Thanh Thông báo ẩn/hiện bằng hiệu ứng CSS cho Blogger
Bước 1: Vài Mẫu >> Chỉnh sửa HTML và chèn trước thẻ ]]></b:skin> đoạn code sau .notification-bar { position: fixed; width: 100%; z-index:1;} .notification-text { background-color: #2980B9; padding: 15px; color: #fff; font-size: 14px; text-align: center; position: absolute; width: 100%; } .notification-bar input { display: none; } .notification-bar label { cursor: pointer; color: #fff; position: absolute; z-index: 5; display: inline-block; text-indent: 100%; whitewhite-space: nowrap; overflow: hidden; } .notification-bar label[for=hide] { right: 15px; top: 11px; width: 24px; height: 24px; background: url('http://goo.gl/hYCoz') no-repeat center center; } .help-2539 a {display: block;height: 12px;width: 12px;background: #014159;border: 1px solid black;color: white;line-height: 1em;text-align: center;font-weight: bold;filter: alpha(opacity=60);opacity: 0.6;font-size: 12px;position: fixed;top: 16px;left: 13px; z-index:1;}.notification-bar label[for=show] { width: 45px; height: 50px; border-radius: 0px 0px 3px 3px; right: 10px; background: url('http://goo.gl/zfxf7') no-repeat center center #2980B9; } .notification-bar input[value=show]:checked ~ label[for=show] { -webkit-transition: ease 350ms; -moz-transition: ease 350ms; -o-transition: ease 350ms; transition: ease 350ms; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .notification-bar input[value=show]:checked ~ label[for=show], .notification-bar input[value=hide]:checked ~ label[for=hide], .notification-bar input[value=hide]:checked ~ .notification-text { -webkit-transition: ease 350ms; -moz-transition: ease 350ms; -o-transition: ease 350ms; transition: ease 350ms; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } .notification-bar input[value=hide]:checked ~ label[for=show] { -webkit-transition: ease 350ms; -moz-transition: ease 350ms; -o-transition: ease 350ms; transition: ease 350ms; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .notification-bar input[value=show]:checked ~ label[for=hide], .notification-bar input[value=show]:checked ~ .notification-text { -webkit-transition: ease 350ms; -moz-transition: ease 350ms; -o-transition: ease 350ms; transition: ease 350ms; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } @keyframes initiate { 0% { transform:translateY(-100%); } 50% { transform:translateY(-50%); } 100% { transform:translateY(0%); } } .notification-text { background-color: #2980B9; padding: 15px; color: #fff; font-size: 14px; text-align: center; position: absolute; width: 100%; -webkit-animation: initiate 350ms ease; -moz-animation: initiate 350ms ease; -o-animation: initiate 350ms ease; animation: initiate 350ms ease;} Bước 2: Dán đoạn code sau sau thẻ <body>
<div class='notification-bar'> <div class='help-2539'><a href='http://iris-tips.blogspot.com' target='_blank'>?</a></div> <input id='hide' name='bar' type='radio' value='hide'/> <input checked='checked' id='show' name='bar' type='radio' value='show'/> <label for='hide'>hide</label> <label for='show'>show</label> <div class='notification-text'>Hello World, you can hide this notification by clicking the close button.</div></div> Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!
Created by mbx/Iris Tips
Mẹo nhỏ khi bình luận