Hướng dẫn tạo widget thông báo cho blogger

Hello sau nhiều ngày vắng bóng mình đã quay trở lại và mình có dạo trên codepen thì có thấy một widget rất đẹp muốn share cho mọi người!!!!

CÁCH THỰC HIỆN

Bước 1: Ta chèn đoạn code phía dưới vào trước thẻ ]]></b:skin>nhé

.toast__container {
    display: table-cell;
    vertical-align: middle;
}
.toast__cell{
  display:inline-block;
}
.add-margin{
  margin-top:20px;
}
.toast__svg{
  fill:#fff;
}
.toast {
  text-align:left;
    padding: 21px 0;
    background-color:#fff;
    border-radius:4px;
    max-width: 500px;
    top: 0px;
    position:relative;
    box-shadow: 1px7px 14px -5pxrgba(0,0,0,0.2);
}

.toast:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
  border-top-left-radius:4px;
  border-bottom-left-radius: 4px;
}
.toast__icon{
  position:absolute;
  top:50%;
  left:22px;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  padding: 7px;
  border-radius:50%;
  display:inline-block;
}
.toast__type {
  color: #3e3e3e;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 8px;
}
.toast__message {
    font-size: 14px;
    margin-top: 0;
  margin-bottom: 0;
    color: #878787;
}
.toast__content{
  padding-left:70px;
  padding-right:60px;
}
.toast__close {
    position: absolute;
    right: 22px;
    top: 50%;
    width: 14px;
    cursor:pointer;
    height: 14px;
  fill:#878787;
    transform: translateY(-50%);
}
.toast--green.toast__icon{
  background-color:#2BDE3F;
}
.toast--green:before{
  background-color:#2BDE3F;
}
.toast--blue.toast__icon{
  background-color:#1D72F3;
}
.toast--blue:before{
  background-color:#1D72F3;
}
.toast--yellow.toast__icon{
  background-color:#FFC007;
}
.toast--yellow:before{
  background-color:#FFC007;
}

Bước 2: Ta chèn code bên dưới vào trước thẻ </body> nhé

<scripttype="text/javascript">
jQuery(document).ready(function(){
  jQuery('.toast__close').click(function(e){
    e.preventDefault();
    var parent = $(this).parent('.toast');
    parent.fadeOut("slow", function() { $(this).remove(); } );
  });
});
</script>

Bước 3: Ta thêm code bên dưới vào chỗ bạn muốn hiển thị là được.

<div class="toast__container">
<divclass="toast__cell">
<div class="toast toast--green">
<divclass="toast__icon">
<svgclass="toast__svg"style="enable-background: new 0 0 512 512;"version="1.1"viewbox="0 0 512 512"x="0px"xml:space="preserve"xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg" y="0px">
<g><g><pathd="M504.502,75.496c-9.997-9.998-26.205-9.998-36.204,0L161.594,382.203L43.702,264.311c-9.997-9.998-26.205-9.997-36.204,0    c-9.998,9.997-9.998,26.205,0,36.203l135.994,135.992c9.994,9.997,26.214,9.99,36.204,0L504.502,111.7    C514.5,101.703,514.499,85.494,504.502,75.496z"></path>
 </g></g>
    </svg>
  </div>
<divclass="toast__content">
<divclass="toast__type">
Demo</div>
<divclass="toast__message">
Thêm Vài dòng mô tả của bạn ở đây.</div>
</div>
<divclass="toast__close">
<svg enable-background="new 0 0 15.642 15.642"version="1.1"viewbox="0 0 15.642 15.642"xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg">
  <pathd="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061  c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061  l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541  l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z"fill-rule="evenodd"></path>
</svg>
  </div>
</div>
<div class="toast toast--blue add-margin">
<divclass="toast__icon">
<svgclass="toast__svg"style="enable-background: new 0 0 32 32;" version="1.1"viewbox="0 0 32 32"x="0px"xml:space="preserve"xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg" y="0px">
<g>
 <g id="info">
  <g>
   <pathd="M10,16c1.105,0,2,0.895,2,2v8c0,1.105-0.895,2-2,2H8v4h16v-4h-1.992c-1.102,0-2-0.895-2-2L20,12H8     v4H10z"></path>
   <circle cx="16"cy="4" r="4"></circle>
  </g>
 </g>
</g>
    </svg>
  </div>
<divclass="toast__content">
<divclass="toast__type">
Demo</div>
<divclass="toast__message">
Thêm Vài dòng mô tả của bạn ở đây.</div>
</div>
<divclass="toast__close">
<svg enable-background="new 0 0 15.642 15.642"version="1.1"viewbox="0 0 15.642 15.642"xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg">
  <pathd="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061  c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061  l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541  l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z"fill-rule="evenodd"></path>
</svg>
  </div>
</div>
<div class="toast toast--yellow add-margin">
<divclass="toast__icon">
<svgclass="toast__svg"style="enable-background: new 0 0 301.691 301.691;"version="1.1"viewbox="0 0 301.691 301.691" x="0px"xml:space="preserve"xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg" y="0px">
<g>
 <polygonpoints="119.151,0 129.6,218.406 172.06,218.406 182.54,0  "></polygon>
 <rect height="40.523"width="40.525"x="130.563"y="261.168"></rect>
</g>
    </svg>
  </div>
<divclass="toast__content">
<divclass="toast__type">
Demo</div>
<divclass="toast__message">
Thêm Vài dòng mô tả của bạn ở đây.</div>
</div>
<divclass="toast__close">
<svg enable-background="new 0 0 15.642 15.642"version="1.1"viewbox="0 0 15.642 15.642"xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg">
  <pathd="M8.882,7.821l6.541-6.541c0.293-0.293,0.293-0.768,0-1.061  c-0.293-0.293-0.768-0.293-1.061,0L7.821,6.76L1.28,0.22c-0.293-0.293-0.768-0.293-1.061,0c-0.293,0.293-0.293,0.768,0,1.061  l6.541,6.541L0.22,14.362c-0.293,0.293-0.293,0.768,0,1.061c0.147,0.146,0.338,0.22,0.53,0.22s0.384-0.073,0.53-0.22l6.541-6.541  l6.541,6.541c0.147,0.146,0.338,0.22,0.53,0.22c0.192,0,0.384-0.073,0.53-0.22c0.293-0.293,0.293-0.768,0-1.061L8.882,7.821z"fill-rule="evenodd"></path>
</svg>
  </div>
</div>
</div>
</div>

Chúc các bạn thành công!!!

Share this post

La Ngọc Hưng

Chào các bạn đến với blog truyện tổng hợp của mình nhé !

Facebook

WhatsApp

Instagram

Subscribe Our Newsletter

Posting Terkait