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/
bác thử như sau (vào phần chỉnh sửa template và tìm code của phần tử):
Xóa1, Sửa phần bài viết:
#layout .column-center-outer {
width: 600px; // trong đó 600px là độ rộng
}
nếu k đc bác tìm đoạn:
.column-center-outer {
width: 620px; // độ rộng 620px
float:left;border-right: 1px solid #eaeaea;
}
2, Sửa phần widget:
.column-right-outer {
width: 315px; // bác nên thu hẹp độ rộng 315px xuống giá trị nhỏ hơn
float:right;
}
Nếu vẫn k đc bác cứ cmt ở đây nhé !
kjmagic.blogspot.com
Cả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é ^^
Xóarất ổn rồi bác :)
Xóakjmagic.blogspot.com
Nhận xét này đã bị tác giả xóa.
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