SHARE WIDGET INFO CỰC ĐẸP

Xin chào tất cả các bạn đến với blog của mình.Hôm nay mình tình cờ thấy ở một template nước ngoài có cái widget info khá đẹp nên mình đem về share cho anh em

Bắt tay vào làm thôi nào =))
Để thêm widget này vào blogspot thì rẩ đơn giản;các bạn chỉ cần vào bố cục →thêm tiện ích→html/js sau đó các bạn nhập toàn bộ đoạn code bên dưới vô

<style>
#about-wrapper{font-family: 'Roboto Condensed', sans-serif;;padding:0 0 20px;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);width:100%;font-weight:700}
#about-wrapper .aboutimg{width:100%;height:130px;float:left;overflow:hidden}
img.profilex{width:60px;border-radius:100%;float:left;margin:-35px 20px 0;box-shadow:rgba(0, 0, 0, 0.2) 0px 8px 17px 0px, rgba(0, 0, 0, 0.188235) 0px 6px 20px 0px;height:60px}#about-wrapper p{padding:0 20px}
a.linkx{color:#fff;background-color:#404F6C;position:absolute;top:150px;right:30px;border-radius:100%;height:20px}
a.linkx:hover{background-color:#314151;color:#fff}
#about-wrapper h4{font-family: 'Roboto Condensed', sans-serif;line-height:3;font-weight:700;font-size:15px}
#material-subscribe{padding:20px 30px 30px;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);width:100%;max-width:400px}
.buttonx{color:#fff!important;padding:10px 15px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out}
.buttonx:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.buttonx.red{background:#404F6C}
</style>
<div id="about-wrapper">
<div class="aboutimg">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2UVBZx2XOnyMOKbTUgc6ViOj9XOxkuMIsKh70trDNdhWgIbvisbnZ9ZfDM_MgJz8ecDiUfOMiP7Jt7ph5TDeZxbRB_17FulKJUZtc49TuicRL2fx_RXk-BgLQF39bWNd_ukL7or-FyNA/s1600/bg.jpg" alt="NGUYỄN DIỆN BLOG" title="NGUYỄN DIỆN BLOG"/></div>
<img class="profilex" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyyGJUXbxfES5voHoPyZanAhc33KD4AQvjdH9MqhBgm4mJKcLliT1qcVJmSX2lttTw9tM2ZUis20Vdnoj6pJdFUnxfbisUf6lWIMbw8mdOrx6rs889R4zT70Ksc9tnm3DZu7Im50N10aI/s1600/7d2454cf6411e0366737e9ae619c4568.jpg" title="NGUYỄN DIỆN BLOG"/>
<h4>NGUYỄN DIỆN</h4>
<p>Nguyễn Diện là một chàng trai đẹp trai,cute,dễ thương và rất hòa đồng</p>
<a class="buttonx linkx" href="#"><i class="fa fa-user"></i></a>
</div>

Lời Kết:Chúc các bạn thành công !