H
ướng dẫn cách tạo Phần thông tin tác giả đẹp với CSS cho blogger. Thông tin tác giả là một tiện ích có chức năng hiển thị danh tính hoặc hồ sơ của tác giả trong trang web hay blog. Bên cạnh việc có thể hiển thị danh tính của tác giả, phần này cũng có thể chứa các trích dẫn hoặc vài dòng mô tả ngắn về bản thân của tác giả.Thông thường, Phần thông tin tác giả nằm ở thanh bên(sidebar), chân trang hoặc bên dưới các bài viết. Có nhiều kiểu dáng hộp tác giả khác nhau đã được tạo ra bởi các lập trình viên sáng tạo. Và cũng có ngần ấy các hướng dẫn để các bạn blogger lựa chọn để áp dụng trên blog của mình. Bản thân Blogger cũng cung cấp một hộp tác giả, nhưng nn vẫn còn đơn giản và khá đơn điệu.
Hôm nay tôi sẽ hướng dẫn một hộp tác giả trong vô số các hộp tác giả như thế. Với tôi, nó đẹp, ưa nhìn và hơn cả là gọn nhẹ, dễ áp dụng.
Bước 1: Vào Chủ đề > Chỉnh sửa HTML > Tìm thẻ </head> và thêm vào trước nó
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.7.2/css/all.css' integrity='sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr' rel='stylesheet'/>
* Lưu ý: Nếu template bạn đã có thư viện FontAwesome rồi thì bỏ qua bước này.
Bước 2: Tiếp tục tìm đoạn code ]]></b:skin> hoặc </style> và thêm vào trước nó
/* CSS AUTHOR BOX KEREN */
.card{padding-top:20px;margin:10px 0 20px 0;background-color:rgba(0,0,0,0.7);border-top-width:0;border-bottom-width:2px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.card .card-heading{padding:0 20px;margin:0;}
.card .card-heading.simple{font-size:20px;font-weight:300;color:#777;border-bottom:1px solid #e5e5e5;}
.card .card-heading.image img{display:inline-block;width:46px;height:46px;margin-right:15px;vertical-align:top;border:0;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
.card .card-heading.image .card-heading-header{display:inline-block;vertical-align:top;}
.card .card-heading.image .card-heading-header h3{margin:0;font-size:14px;line-height:16px;color:#262626;}
.card .card-heading.image .card-heading-header span{font-size:12px;color:#999999;}
.card .card-body{padding:0 20px;margin-top:20px;}
.card .card-media{padding:0 20px;margin:0 -14px;}
.card .card-media img{max-width:100%;max-height:100%;}
.card .card-actions{min-height:30px;padding:0 20px 20px 20px;margin:20px 0 0 0;}
.card .card-comments{padding:20px;margin:0;background-color:#f8f8f8;}
.card .card-comments .comments-collapse-toggle{padding:0;margin:0 20px 12px 20px;}
.card .card-comments .comments-collapse-toggle a,.card .card-comments .comments-collapse-toggle span{padding-right:5px;overflow:hidden;font-size:12px;color:#999;text-overflow:ellipsis;white-space:nowrap;}
.card-comments .media-heading{font-size:13px;font-weight:bold;}
.card.people{position:relative;display:inline-block;width:170px;height:300px;padding-top:0;margin-left:20px;overflow:hidden;vertical-align:top;}
.card.people:first-child{margin-left:0;}
.card.people .card-top{position:absolute;top:0;left:0;display:inline-block;width:170px;height:150px;background-color:#ffffff;}
.card.people .card-top.green{background-color:#53a93f;}
.card.people .card-top.blue{background-color:#427fed;}
.card.people .card-info{position:absolute;top:150px;display:inline-block;width:100%;height:101px;overflow:hidden;background:#ffffff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.card.people .card-info .title{display:block;margin:8px 14px 0 14px;overflow:hidden;font-size:16px;font-weight:bold;line-height:18px;color:#404040;}
.card.people .card-info .desc{display:block;margin:8px 14px 0 14px;overflow:hidden;font-size:12px;line-height:16px;color:#737373;text-overflow:ellipsis;}
.card.people .card-bottom{position:absolute;bottom:0;left:0;display:inline-block;width:100%;padding:10px 20px;line-height:29px;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.card.hovercard{position:relative;padding-top:0;overflow:hidden;text-align:center;background-color:#fff;Border-radius: 30px;}
.card.hovercard .cardheader{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqLW5ShPd05lidNKVZvzWo-MXh7hgjTPA3Exxii471qmZwQ7ckp-wQpanuKrhnJjUP3sN9FPykOCS2snLSMuvTlAdYW4PduhrwwJLdA968tcDJjs6lWfDxA7V9_jIIBGa2hEgnlDAfdBE/w640-h320/bg-blog.jpg");background-size:cover;height:135px;}
.card.hovercard .avatar{position:relative;top:-50px;margin-bottom:-50px;}
.card.hovercard .avatar img{width:100px;height:100px;max-width:100px;max-height:100px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;border:5px solid rgba(255,255,255,0.5);}
.card.hovercard .info{padding:4px 8px 10px;margin-bottom:5px;}
.card.hovercard .info .title{margin-bottom:4px;font-size:24px;line-height:1;color:#262626;vertical-align:middle;}
.card.hovercard .info .desc{overflow:hidden;font-size:12px;line-height:20px;color:#737373;text-overflow:ellipsis;margin:0 25px;}
.card.hovercard .bottom{padding:0 20px;margin-bottom:17px;}
.btn{color:#111211;padding:6px 10px;border-radius:50%;margin-right:5px;background:transparent;border:1px solid #d3d3d3}
.card .btn-facebook{background:transparent;}
.card .btn-twitter{background:transparent;}
.card .btn-pinterest{background:transparent;}
.card .btn-ig{background:transparent;padding-right: 10px;}
Bước 3:Lưu Template và Vào phần Layout/bố cục > Thêm tiện ích HTML/Javascript > Thêm code sau vào phần nội dung tiện ích
<div class='card hovercard'> <div class='cardheader'> </div> <div class='avatar'> <img alt="Admin" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4oeOPy6V67ZyTyBxLYCyaJNLq15WclIc99C9Vse5aZfZqsMSsoE6t_DZWDgIT-7ckDOEDCxnSjZ2Tx-UNhubmbidlxRnPi4wI57tG6xfA_xd7Pc-zTTKFIIoe_Lv31uhrugJnRAUjIRt8/s225/656.jpg" title="Admin" /> </div> <div class='info'> <div class='title'> <span style="color: #202020;"><h3>Alius</h3></span> </div> <div class='desc'>Creator by <a href='' rel='author' target='_blank'>M21love</a></div> <div class='desc'>" <span style="color: #202020;">Create Your Article and Get Your Dream</span> "</div> </div> <div class='bottom'> <a class='btn btn-primary btn-facebook btn-sm' href='https://facebook.com/' rel='nofollow' target='_blank'> <i class="fab fa-facebook-square"></i></a> <a class='btn btn-primary btn-twitter btn-sm' href='https://twitter.com/' rel='nofollow' target='_blank'> <i class="fab fa-twitter-square"></i></a> <a class='btn btn-danger btn-pinterest btn-sm' href='https://pinterest.com/' rel='nofollow' target='_blank'> <i class="fab fa-pinterest-square"></i></a> <a class='btn btn-ig' href='https://instagram.com/' rel='nofollow' target='_blank'><i class="fab fa-instagram"></i></a> </div> </div>
Bước 4: Lưu lại. Chính sửa các thông tin, ảnh đại diện, màu sắc, link liên kết, link mạng xã hội muốn hiển thị... nói chung là tùy thích.
Hy vọng bạn sẽ hài lòng với tiện ích này. Đừng quên đánh giá bài viết để thay lời động viên dành cho tác giả bài viết nhé! Chúc bạn luôn dồi dào sức khỏe và vui vẻ quanh năm.
Xem bài viết gốc Tại đây.
* Please Don't Spam Here. All the Comments are Reviewed by Admin.