[Đóng góp] Chức năng thông báo đơn giản mà đẹp

DEMO

Code:

http://i68.servimg.com/u/f68/19/29/59/70/12308810.png

HƯỚNG DẪN

Code:

<style>
.message_box.note {
  background-color: #1F79C2;
  color: #FFF;
  padding: 10px 20px;
  border-radius: 3px;
}
.message_box.note p {font-size:14px;padding:3px;transition:0.3s ease-out}
.message_box.note p:hover {cursor:pointer;padding-left:20px;}
.message_box.note p.thong_bao:hover {padding-left:3px;color:#000;}
.message_box.note p.thong_bao {
    text-align: center;
    font-size:14pt!important;
    border-bottom:1px solid #FFF!important;
    margin-bottom:10px;
}
.message_box.note a {color: #FFF;text-decoration:none;}

.message_box.note p:before, .message_box.note p:after {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    content: '\f124';
    margin-right: 8px;
    color:#FFF;
}
.message_box.note p:after {margin-left:8px;color:#FFF;}
.message_box.note p.thong_bao:before {content:'\f101'}
.message_box.note p.thong_bao:after {content:'\f100'}
.message_box.note p.thong_bao_1:after {content:'\f058'}
</style>
<div class="message_box note">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<a><p class="thong_bao">QUAN TRỌNG, CẦN CHÚ Ý!
</p></a>
<a href="/t1-topic"><p class="thong_bao_1">1. Hướng dẫn cài đặt Vice City Online (Có Video và Hình Ảnh) [Click Để Xem Chi Tiết]</p></a>
<a href="/t3681-topic"><p class="thong_bao_1">2. Bộ luật hiến pháp nhà nước BK Server - Vice City Online [Click Để Xem Chi Tiết]</p></a>
<a href="/t4341-topic"><p class="thong_bao_1">3. Sử dụng thêm tên miền VCMPVN.COM cho diễn đàn [Click Để Xem Chi Tiết]</p></a>
<a href="/t464-topic"><p class="thong_bao_1">4. Ủng hộ cho BK Server - Ủng hộ để duy trì sự tồn tại của BK Server [Click Để Xem Chi Tiết]</p></a>
<a href="/t1141-topic"><p class="thong_bao_1">5. Tiểu Sử BK-Server (Quá Trình Hình Thành - Phát Triển - Kết Thúc) [Click Để Xem Chi Tiết]</p></a>
<a href="/t20-topic"><p class="thong_bao_1">6. Hướng dẫn dành cho người mới chơi Vice City Online [Click Để Xem Chi Tiết]</p></a>
<a href="/t1891-topic"><p class="thong_bao_1">7. Kỹ năng lướt Stubby (Quan Trọng) Học để tự vệ [Click Để Xem Chi Tiết]</p></a>
</div>