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

Nếu chưa có kinh nghiệm về Blogspot đừng lo lắng mình có dịch vụ Cầm Tay Chỉ Việc, hãy gọi hoặc Zalo ngay cho mình: 097.1539.681 để được tư vấn và hỗ trợ nhanh nhất nhé!

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

Bài viết: Profile Card thông tin tác giả cho blog đượ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.

Tags: Blog Profile