Khung Tác Giả Kèm Hiệu Ứng Hover Tuyệt Đẹp Cho Blog.

Dưới đây mình sẽ hướng dẫn các bạn tạo ra một khung tác giả kèm theo với hiệu ứng hover tuyệt đẹp dành riêng cho blogspot. ( Demo cuối bài )
Cách làm cũng khá đơn giả với 3 bước như sau:

Bước 1: Login Blogspot => Chủ Đề => Edit HTML

Bước 2: Dán Đoạn Code Phía Dưới Vào Nơi Bạn Muốn Hiển Thị:

= About Author =====================================*/ .aboutauthor{background-color:#448aff;margin:37px 0 0 -21px;width:100%;float:left;padding:10px 21px;} .aboutauthor img{display:block;width:140px;height:auto;border-radius:50%;border:solid 6px #fff;float:left;padding:0;margin-right:33px;margin-left:15px;transition:0.6s;} .aboutauthor:hover img{-webkit-transform:translateX(-10px) rotate(-10deg);transform:translateX(-10px) rotate(-10deg);} .authorname{margin: 5px;font-weight: normal!important;color: #52537d;border: 3px solid #52537d;font-family: &#39;FontAwesome&#39;, roboto;padding: 2px;display: inline-block;text-align: center;} .authorrank{color:#eee!importantfont-size:19px!important;font-weight:normal!important;} .aboutauthor:hover .authorrank{-webkit-transform:translateX(10px);transform:translateX(10px);} .aboutauthor p{color:#fff;font-size:17px;} .aboutauthor {background-color: #2fe1ad;margin: 37px 0 0 -21px;width: 100%;float: left;padding: 10px 21px;} /*=====================================<b:if cond='data:blog.url == data:post.url'> <div class='aboutauthor'> <img src='https://i.imgur.com/LNCRVRn.jpg'/> <h3 class='authorname'>Trần Huy</h3> <h4 class='authorrank'>Đẹp Trai - Xinh Gái</h4> <p>Tôi đang từ từ từng bước một đi đến thành công. Nhớ có động lực từ các Idol đã khiến tôi có thêm một chút nghị lực để vươn lên đỉnh cao của sự thành công.</p> </div> </b:if>

Bước 3: Lưu Lại Và Hưởng Thụ.

Demo

--- Chúc Các Bạn Thành Công ---

N LinkPro