Profile Card thông tin tác giả cho blog

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

Profile Card thông tin tác giả cho blog được thiết kế đẹp hiện đại chuyên nghiệp chuẩn seo, tối ưu code giúp trang blogspot load nhanh

Chi tiết liên hệ ĐT / Zalo: 097 1539 681

Khi mua template các bạn được hỗ trợ cài đặt hoàn chỉnh, hỗ trợ qua Teamviewer, Ultraviewer

Tags: Blog Profile