status message - Tổng hợp

CSS status message

/* ---- status message cleanblog template --- */
.status-msg-body{text-align: center;width: 100%;padding: 20px 0px;border:1px solid #ccc;margin: 30px 0px;}
.status-msg-hidden{display: none}

/* --- status-messager kompiajaib ---- */
.status-msg-wrap{font-size:16px;width:99.999999%;width:calc(100% - 20px);height:auto;color:#666;margin:0 20px 10px 0;position:relative;}
.status-msg-border{border:1px solid #000;opacity:0;width:100%;position:relative;height:10px}
.status-msg-bg{background-color:#ccc;opacity:.8;width:100%;position:relative;z-index:1}
.status-msg-body{color:#fff;text-align:center;padding:6px 10px 10px;width:100%;word-wrap:break-word;z-index:4;box-shadow:0 3px 20px 0 rgba(0,0,0,.075);line-height:1.3}.status-msg-hidden{visibility:hidden;padding:.3em 0}
.status-msg-wrap a{color:#fff;background:#2B0C93;margin:0 10px 0 -7px;padding:3px 10px;line-height:1.3}
.status-msg-body b{color:#fff;display:block;margin-bottom:6px;font-size:20px;font-weight:500}
.status-msg-body:after{content:"";display:block;clear:both}.status-msg-body a:last-child{margin-right:0}

HTML b:includable status message

<b:includable id='status-message'>
<!-- status message cleanblog -->
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
    <div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'><data:navMessage/></div>
      </div>
    </div>
  </div>
  <div style='clear: both;'/>
  </b:if>
</b:includable>