Khi muốn thông báo về một sự kiện nào đó cho blog của mình bạn sẽ cần có một khung ghi chú đẹp để thu hút sự chú ý của mọi người và nhấn mạnh nội dung của phần ghi chú đó.
Đây là một thủ thuật tạo khung ghi chú đơn giản, nó cũng tương tự như khung thông báo. Chỉ với một đoạn code CSS và XMl đơn giản bên dưới bạn sẽ tạo dduwwocj một khung thông báo đẹp. Ưu điểm của thủ thuật này là không ảnh hưởng nhiều tới tốc độ load do không sử dụng mã javarscip mà chỉ là mã CSS và XMl đơn thuần.
Đây là một thủ thuật tạo khung ghi chú đơn giản, nó cũng tương tự như khung thông báo. Chỉ với một đoạn code CSS và XMl đơn giản bên dưới bạn sẽ tạo dduwwocj một khung thông báo đẹp. Ưu điểm của thủ thuật này là không ảnh hưởng nhiều tới tốc độ load do không sử dụng mã javarscip mà chỉ là mã CSS và XMl đơn thuần.
Các bạn hãy xem Demo để thấy rõ hơn.
Ưu điểm!
Sau đây là một số ưu điểm của tiện ích này:
- Không ảnh hưởng tới tốc độ load trang blog.
- Giao diện bắt mắt với: hiệu ứng bo góc và dổ bóng.
- Dễ tùy biến do chỉ fungf mã CSS dơn thuần.
- Hiển thị tốt trên các trình duyệt hiện nay như firefox, IE, Opera, Sarafi,...
☼ Cách sử dụng tiện ích này.
- Để chèn phần ghi chú giống như thế này thì trong khi đăng bài bạn chuyển sang phần HTML của bài đăng rồi dán đoạn sau vào phần html đó:
<style type="text/css"> .note{background:#f0fdff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWDhqxwIly-nre1d-dhuSL6Wj2bznDCt95YlD9DHaC5Gww9tbSbI3JLmZGmZsuIS5xCU7cd-8UAlXtx_WGtlydioqYnAPZ0RnmItzs31ZWyo6-naIO3LrPwLvfJgpCFZ0MUSoHrHH-oQ0/s1600/notice-bg-namkna-blogspot-com.png) repeat-x 0 0;color:#796100;width:83%;font-weight:normal;padding:13px 15px 0;margin-bottom:2.5em;border:1px solid #306EFF;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.4);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.4);box-shadow:1px 1px 2px rgba(0,0,0,.4);position:relative;left:34px}.note p{margin-bottom:1.5em}.note p:last-child{margin-bottom:0}.note ul{margin-left:8px;margin-bottom:1.5em}.note ul:last-child{margin-bottom:0}.note li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDqHrV9MR1P7SIdVt8wXgZae9fkAusf1BtCH6fU2tMtZWBc7-YQ2SYYRupIiROqjMw_cSzhJkydaWWfJRIkUxYaORXU8vlQxn_SqwJ56L-dGACSEbll2QdXVkgBDRdRjYr4Z3dXxdpYgoa/s1600/notice-tabs-namkna-blogspot-002.png) no-repeat 0 -95px;list-style-type:none;padding-left:18px;margin-bottom:.75em}.note h5{font-size:14px;font-weight:bold;margin:0 0 .65em}.note span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDqHrV9MR1P7SIdVt8wXgZae9fkAusf1BtCH6fU2tMtZWBc7-YQ2SYYRupIiROqjMw_cSzhJkydaWWfJRIkUxYaORXU8vlQxn_SqwJ56L-dGACSEbll2QdXVkgBDRdRjYr4Z3dXxdpYgoa/s1600/notice-tabs-namkna-blogspot-002.png) no-repeat 100% 0;width:33px;height:40px;position:absolute;left:-34px;top:9px} </style> <div class="note"><h5>Lưu ý!</h5> <p>Chào mừng bạn đến với namkna...</p> <ul> <li>Vui lòng để lại một comment góp ý.</li> <li>Bấm nút +1 nếu bạn thấy thích bài viết này.</li> <li>Chúc thành công!.</li> </ul><span></span></div>
Tùy biến!
- Sửa lại phần nội dung cho phù hợp là được.
- #f0fdff là màu nên của khung.
- #306EFF là màu viền của khung.
- Hãy sử dụng bảng mã màu của namkna để lấy mã mù thay vào nha: bảng mã lấy mã màu
Nhận xét
Cái thông báo che hết ô tìm kiểm rồi :((
Trả lờiXóa@everytime Ok bạn có thể tìm kiếm rùi đó :3) :3) :3) :3) :3)
Trả lờiXóaok thank.
Trả lờiXóaHãy ghé thăm Missnudevn chấm bờ lốc sờ pót chấm Com nhé
@Nghệ nhân Ac trang như thế bạn nên cài đặt dành cho 18+ không có google xóa mất đó :))))))
Trả lờiXóaKhông xóa đâu nhưng google sẽ tự động đánh dấu trang của bạn là 18+ và sẽ ảnh hưởng đến SEO đó.
Xóanhững bài viết đều rất có ý nghĩa Bạn à, cám ơn nhiều nha .
Trả lờiXóaKhông có gì. cảm ơn bạn :))
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaanh nam ơi anh có thể giúp em 1 vấn đề về seo được không tại sao blogger của em điền nguyên cái domain trang wed lên google mà nó cũng không hiện ạ
Trả lờiXóaCó rất nhiều nguyên nhân như:
XóaGoogle Sandbox
- Spam link quá nhiều trên các trang khác.
- Domain trùng với tên miền của các trang nổi tiếng nên google chưa nhận dạng được.
E có thể để URL trang của em ở đây để anh kiểm tra xem sao nha .
hay quá
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóa