Hướng dẫn tạo Profile Card UI Design cho blogspot, thông tin tác giả đẹp hiển thị trên blog của bạn, phù hợp cho blog có thanh sidebar.
Các bước thực hiện như sau:
Bước 1: Thêm Font Awesome nếu blog của bạn có rồi thì bỏ qua bước này.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
Bước 2: Thêm CSS
Chỗ này tùy các bạn chọn, có hoặc không tùy theo từng blog. Nó sẽ bị đụng với css blog của bạn, các bạn lưu ý mục này
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{margin:0;padding:0;box-sizing:bliên hệ-box;font-family:'Poppins',sans-serif}
body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#fff}
CSS chính:
.profile-card,.profile-card .img-area,.social-icons a,.buttons button{background:#ecf0f3;box-shadow:-3px -3px 7px #ffffff,3px 3px 5px #ceced1}
.profile-card{position:relative;width:350px;padding:30px;bliên hệ-radius:10px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.profile-card .icon{font-size:17px;color:#31344b;position:absolute;cursor:pointer;opacity:0.7;top:15px;height:35px;width:35px;text-align:center;line-height:35px;bliên hệ-radius:50%;font-size:16px}
.profile-card .icon i{position:relative;z-index:9}
.profile-card .icon.arrow{left:15px}
.profile-card .icon.dots{right:15px}
.profile-card .img-area{height:150px;width:150px;bliên hệ-radius:50%;display:flex;align-items:center;justify-content:center}
.img-area .inner-area{height:calc(100% - 25px);width:calc(100% - 25px);bliên hệ-radius:50%}
.inner-area img{height:100%;width:100%;bliên hệ-radius:50%;object-fit:cover}
.profile-card .name{font-size:23px;font-weight:500;color:#31344b;margin:10px 0 5px 0}
.profile-card .about{color:#44476a;font-weight:400;font-size:16px}
.profile-card .social-icons{margin:15px 0 25px 0}
.social-icons a{position:relative;height:40px;width:40px;margin:0 5px;display:inline-flex;text-decoration:none;bliên hệ-radius:50%}
.social-icons a:hover::before,.profile-card .icon:hover::before,.buttons button:hover:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;bliên hệ-radius:50%;background:#ecf0f3;box-shadow:inset -3px -3px 7px #ffffff,inset 3px 3px 5px #ceced1}
.buttons button:hover:before{z-index:-1;bliên hệ-radius:5px}
.social-icons a i{position:relative;z-index:3;text-align:center;width:100%;height:100%;line-height:40px}
.social-icons a.fb i{color:#4267B2}
.social-icons a.twitter i{color:#1DA1F2}
.social-icons a.insta i{color:#E1306C}
.social-icons a.yt i{color:#ff0000}
.profile-card .buttons{display:flex;width:100%;justify-content:space-between}
.buttons button{position:relative;width:100%;bliên hệ:none;outline:none;padding:12px 0;color:#31344b;font-size:17px;font-weight:400;bliên hệ-radius:5px;cursor:pointer;z-index:4}
.buttons button:first-child{margin-right:10px}
.buttons button:last-child{margin-left:10px}
.profile-card .social-share{display:flex;width:100%;margin-top:30px;padding:0 5px;justify-content:space-between}
.social-share .row{color:#31344b;font-size:17px;cursor:pointer;position:relative}
.social-share .row::before{position:absolute;content:"";height:100%;width:2px;background:#e0e6eb;margin-left:-25px}
.row:first-child::before{background:none}
.social-share .row i.icon-2{position:absolute;left:0;top:50%;color:#31344b;transform:translateY(-50%);opacity:0;pointer-events:none;transition:all 0.3s ease}
.row:nth-child(1):hover i.fa-heart,.row:nth-child(2):hover i.fa-comment{opacity:1;pointer-events:auto}
Bước 3: Thêm HTML phù hợp ở blog có thanh sidebar
<div class="profile-card">
<div class="img-area">
<div class="inner-area">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhceAUaKDKQoSWy60lKb7UDLLPspn2PUdoSuDx7LW6O71iGwOqWOeCU4flkr5ujVUO5zMwGtqveR2TX688U2NPezEGWCYaEaPBc3kfchndb0D9UEcE1CZPSN5YxPxzGuwQ9NruZtA-vg4sm/s16000/images.png" alt="" />
</div>
</div>
<div class="name">Tôi là Hòa Trần</div>
<div class="about">www.giaodien.blog</div>
<div class="social-icons">
<a href="#" class="fb"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
<a href="#" class="insta"><i class="fab fa-instagram"></i></a>
<a href="#" class="yt"><i class="fab fa-youtube"></i></a>
</div>
<div class="buttons">
<button>Message</button>
<button>Subscribe</button>
</div>
<div class="social-share">
<div class="row">
<i class="far fa-heart"></i>
<i class="icon-2 fas fa-heart"></i>
<span>20.4k</span>
</div>
<div class="row">
<i class="far fa-comment"></i>
<i class="icon-2 fas fa-comment"></i>
<span>14.3k</span>
</div>
<div class="row">
<i class="fas fa-share"></i>
<span>12.8k</span>
</div>
</div>
</div>
Bài viết: Hướng dẫn tạo Profile Card UI Design cho blogspot được viết bởi admin trang Giaodien.blog
Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.
Để lại nguồn có nghĩa là bạn tôn trọng tác giả.
Động lực để mình chia sẻ nhiều bài viết hay.
Nhận xét
Đăng nhận xét