Trong quá trình soạn thảo một bài viết, chắc hẳn bạn cũng muốn chèn vào một dòng thông báo đẹp mắt, thu hút sự chú ý của độc giả (giống như hình trên), bài viết này mình sẽ hướng dẫn các bạn một thủ thuật như vậy để tạo box thông báo đẹp mắt cho bài viết trên blog.
/* Notification Box / kjmagic.blogspot.com */ @font-face { font-family: 'Arial'; font-style: normal; font-weight: 400; src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); } @font-face { font-family: 'Arial'; font-style: normal; font-weight: 700; src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff'); } .message_box { margin:15px 0; } .note { color:#666; font-family:"Arial"; font-size:16px; border:1px solid #FDEBA5; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQJpF_LkxQiUYdlfwN1PMsgoUvmkwyd1aggw6QF7Y9hhwX6Gms4Aev5s4qOJDrLQDrWmLT7q1Hwj4oQElZnq30h56Hx60QcJ7DRd_LdXiMBmap_rIij1U0Qe0oxroJ2rD_nnPacSzchV_b/s1600/thumb.png) no-repeat scroll 10px center #FEF4C8; padding:.5em 1em .5em 3em; } .announce { color:#666; font-family:"Arial"; font-size:16px; border:1px solid #BEE5F8; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW-3-2yHpgftWyTSFlDD26VCnQkMHko11potj1ikhGmJw1VJn5eBMWmG_jbhpfxa8sFvAETq4SfooyXLoJA74NvIcrTkEoFXlWZbi91NsA-xs3dgv7lAtJJmnmx4aXFgdGOrSgA2JfGLLo/s1600/speaker.png) no-repeat scroll 10px center #D7EFFB; padding:.5em 1em .5em 3em; } .success { color:#666; font-family:"Arial"; font-size:16px; border:1px solid #DEF1BF; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnNpq67Be3PavwtYbwSqhJwgrOFAECJMXb8RZkoFWIHu0wStJVHH3sXFLTfynf8y4ZidWsSHirhayr4qHmbt9MvglnU0GkS-z51XF4utdvfYhwB-JmBhxNyisPLy7JmX4TNSZhcYEwc1JS/s1600/tick.png) no-repeat scroll 10px center #E8F6D2; padding:.5em 1em .5em 3em; } .warning { color:#666; font-family:"Arial"; font-size:16px; border:1px solid #FFDBDB; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZYj3XsJ8N4Dr4ZXpbcatNHSPk5Jt2kasPrObGtvNKxo36cbRHWqaYlW4jDh5_xhdU8A_LFgO-kGCUO7hdh8tHH2c1cxVh-PPL5wM3lEZhlmSPLotxYrCnK89qdJ3EJyQngjJPyYW9XhVD/s1600/cross.png) no-repeat scroll 10px center #FFE7E7; padding:.5em 1em .5em 3em; }
Bước 2: Sử dụng:
- Khi cần chèn box vào một bài viết, các bạn sử dụng một trong những đoạn code tương ứng sau:
- Note box:
<div class="message_box note">
Text của bạn.
</div>
- Announce box:
<div class="message_box announce">
Text của bạn.
</div>
- Sucess box:
<div class="message_box success">
Text của bạn.
</div>
- Warning box:
<div class="message_box warning">
Text của bạn.
</div>
Chúc các bạn thành công !
Xem thêm thủ thuật: kjmagic.blogspot.com
Nhận xét
cái này hay nha
Trả lờiXóabạn ơi mình muốn điều chỉnh độ rộng của phần bài viết và thanh bên thì chỉnh thế nào bạn
Trả lờiXóaBlog của mình http://ketnoicn.blogspot.com/
Nhận xét này đã bị tác giả xóa.
Trả lờiXóaCảm ơn bạn nhiều nha mình làm được rùi . Bạn xem hộ mình độ rộng như vậy được chưa nhé ^^
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóalàm ơn cho mình hỏi
Trả lờiXóablog của mình bị lỗi font chữ như hình bên dưới mà không sao sửa được
nhờ admin vào giúp mình với :
http://4.bp.blogspot.com/-fDomzfWslB4/VcYTq44NK4I/AAAAAAAAG7w/LuS7TJsgxbg/s320/1.bmp