Hướng dẫn tạo Profile Card thông tin tác giả cho blogspot đẹp bằng HTML và CSS lạ mắt và chuyên nghiệp, giúp bạn thêm thông tin tác giả cho trang blog.
Các bước thực hiện như sau:
Bước 1: Thêm thư viện Font, nếu blog của bạn có rồi thì bỏ qua bước này
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"/><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
Bước 2: Thêm CSS
.profile-card-1{font-family:"Ubuntu",sans-serif;width:300px;height:390px;background:white;margin:0 auto;border-radius:10px;text-align:center;box-shadow:4px 4px 10px #999;position:relative;box-sizing:border-box;overflow:hidden}.profile-card-1 .view-more{position:absolute;top:calc(50% - .5em);left:calc(50% - .5em);z-index:2;color:#2ECC71;font-size:2em}.profile-card-1 .view-more .fa-plus-circle{position:absolute;background:white;border-radius:50%;width:1.004em}.profile-card-1 .view-more .fa-plus-circle:hover{background:#2ECC71;color:white}.profile-card-1 .popup{height:500px;width:500px;display:block;position:absolute;top:0;left:0}.profile-card-1 .mid-section{position:absolute;height:200px;width:100%;top:200px;left:0;padding:10px 20px 0;box-sizing:border-box;background:white}.profile-card-1 .mid-section .name{color:#333333;font-size:1.4em;padding-top:5px;background:rgba(255,255,255,0.1);font-weight:bold}.profile-card-1 .mid-section .description{color:gray;font-size:0.9em;padding-bottom:5px;background:rgba(255,255,255,0.1)}.profile-card-1 .mid-section .description a{color:inherit;text-decoration:none;font-weight:bold}.profile-card-1 .mid-section .line{background:#7ee2a8;width:80%;height:2px;margin:5px auto -3px}.profile-card-1 .mid-section .stats{display:flex;position:absolute;left:10%;padding-top:10px;width:80%;justify-content:space-around}.profile-card-1 .mid-section .stats .stat{font-size:1.3em;color:#333333;padding:5px;font-weight:bold}.profile-card-1 .mid-section .stats .subtext{color:gray;font-size:0.6em;font-weight:normal}.profile-card-1 .img{height:130px;width:100%;background-image:linear-gradient(rgba(46,204,113,0.4),rgba(46,204,113,0.95)),url("https://static.pexels.com/photos/21014/pexels-photo-medium.jpg");padding:20px;box-sizing:border-box;position:relative}.profile-card-1 .img img{width:160px;height:160px;padding:3px;border-radius:50%;border:3px solid rgba(255,255,255,0.6);position:absolute;left:calc(50% - 84px);top:26px}.profile-card-1 .img:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;left:calc(50% - 91.5px);top:20px;border:3px solid rgba(255,255,255,0.4)}.profile-card-1 .img:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;left:calc(50% - 95px);top:15.5px;border:2px solid rgba(255,255,255,0.2)}.profile-card-1 .links{width:100%;height:50px;background:#F2F2F2;border-top:1px solid #44d581;margin-top:35px;border-radius:5px;color:white;font-size:2em;line-height:1.5em;position:absolute;bottom:0}.profile-card-1 .links a{color:white}.profile-card-1 .links .fb{position:absolute;left:0;width:25%;height:100%;background-color:#3b5998}.profile-card-1 .links .fb:hover{background-color:#4264aa}.profile-card-1 .links .twitter{position:absolute;left:25%;width:25%;height:100%;background-color:#55ACEE}.profile-card-1 .links .twitter:hover{background-color:#6cb7f0}.profile-card-1 .links .follow{position:absolute;left:50%;width:50%;height:100%;background-color:#2ECC71}.profile-card-1 .links .follow:hover{background-color:#40d47e}.profile-card-2{width:250px;height:500px;background:#2ECC71}
Bước 3: Thêm HTML nơi mà bạn muốn hiển thị
<div class="profile-card-1"><div class="img"><img src="https://1.bp.blogspot.com/-G1sjYA4APAE/X6NcE7L37RI/AAAAAAAAB1Y/VhScfkl1tGMqBtTUuwRpLTFpinQrk0jYQCLcBGAsYHQ/s16000/images.png" /></div><a class="view-more" href="#"><i class="fa fa-plus-circle" aria-hidden="true"></i></a><div class="mid-section"><div class="name">Tôi là Hòa Trần</div><div class="description">Người sáng lập <a href="https://www.giaodien.blog">Giaodien.blog</a></div><div class="line"></div><div class="stats"><div class="stat">1.3M <div class="subtext">Followers</div></div><div class="stat">82k <div class="subtext">Likes</div></div><div class="stat">75k <div class="subtext">Shares</div></div></div></div><div class="links"><a class="fb" href="https://www.facebook.com/hoatranblog"><i class="fa fa-facebook-f" aria-hidden="true"></i></a><a class="twitter" href=""><i class="fa fa-twitter" aria-hidden="true"></i></a><a class="follow" href="https://www.youtube.com/channel/UCKeTCCxl26Wk9MqOLpsI99w?view_as=subscriber"><i class="fa fa-youtube" aria-hidden="true"></i></a></div></div>
Như vậy là bạn đã có một Profile Card thông tin tác giả đẹp cho blog của bạn, xem thêm nhiều thủ thuật blogspot hay dành cho bạn.
Nguồn: codepen.io
Trước tiên mình xin cảm ơn tất cả khách hàng đã luôn tin tưởng và ủng hộ mình trong suốt thời gian qua (2016 tới hiện tại).
Nhằm nâng cao chất lượng phục vụ Quý khách hàng và hoàn thiện chất lượng như hỗ trợ, template. Hôm nay ngày 04/2/2021 mình là Hòa Trần admin trang Giaodien.blog sẽ tiến hành mở một trang Feedback để khách hàng đã mua, sử dụng dịch vụ bên mình toàn quyền nhận xét đánh giá công khai ở trang này.
Từ những Feedback này những gì mình làm được và chưa làm được, từ đó mình sẽ rút ra được những kinh nghiệm, và hoàn thiện tốt dịch vụ bên mình.
Quý khách hàng có thể để lại nhận xét reviews tại trang Feedback
Nhận xét
Đăng nhận xét