 |
| Hộp thông báo cho bài viết blogspot - thủ thuật blogspot |
Khi bạn viết bài mới cho blog, giống như thẻ quote bạn có thể nhấn mạnh bài viết mình hoặc đơng giản chỉ là 1 thông báo trỏ về link nào đó thì bạn sẽ dùng tới thủ thuật blog này : Notification box
Cách làm Notification box này thế nào ?
Vào blog của bạn chèn code css này trên thẻ <head> nhé .
/* Notification Box / kjmagic.blogspot.com */Cách sử dụng notification box này thế nào ?
@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(http://2.bp.blogspot.com/-H2cQGpu6B08/UbqjmbSoCzI/AAAAAAAACUQ/byyeJFP8C28/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(http://3.bp.blogspot.com/-sd2EtJIYnW4/Ubqjli0tocI/AAAAAAAACT4/jlP5mYMCvzE/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(http://1.bp.blogspot.com/-l0KfqLngx34/Ubqjm1f4WII/AAAAAAAACUc/9_TL1-p9bVg/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(http://4.bp.blogspot.com/-C4uNFnXOjIQ/Ubqjk5T06QI/AAAAAAAACTg/2rEMsonXpJI/s1600/cross.png) no-repeat scroll 10px center #FFE7E7;
padding:.5em 1em .5em 3em;
}
Đơn giản như các code nút download và nút demo cho blog vậy. Khi viết bài bạn cứ việc chọn vào HTML để chèn code html và viết thế này nhé.
Note box:
<div class="message_box note">Announce box:
Text của bạn.
</div>
<div class="message_box announce">Sucess box:
Text của bạn.
</div>
<div class="message_box success">Warning box:
Text của bạn.
</div>
<div class="message_box warning">
Text của bạn.
</div>
Hãy tận hưởng đi nhé ! Chúc các bạn thành công :
Nguồn sử dụng: namkna.blogspot.com và svitk06.blogspot.com nhé !
0 comments:
Post a Comment