[Blogspot] Khung tác giả (Author Box) hiệu ứng avatar nghiêng đẹp

Hôm nay ngày mưa gió, cũng không phải đi học nên đang ngồi nhà viết bài cho các bạn. TUT của chúng ta tối nay sẽ là một khung tác giả (Author Box) có hiệu ứng avatar nghiêng nghiêng khi rê chuột vào trông cũng đẹp đẹp :))
Khung tác giả (Author Box) hiệu ứng avatar nghiêng đẹp
Cách thực hiện:
Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.
Bước 2: Thêm CSS trang trí trước thẻ ]]></b:skin>
.aboutauthor{background-color:#448aff;width:100%;float:left;padding:10px 21px;}
.aboutauthor img{display:block;width:150px;height:auto;border-radius:50%;border:solid 6px #fff;float:left;padding:0;margin-right:33px;margin-left:15px;transition:0.6s;margin-top:15px}
.aboutauthor:hover img{-webkit-transform:translateX(-10px) rotate(-10deg);transform:translateX(-10px) rotate(-10deg);}
.authorname{color:#fff!important;font-size:24px!important;margin:20px 0 0 0;font-weight:normal!important;}
.authorrank{color:#eee!important;margin:0 0 -4px 0;font-size:19px!important;font-weight:normal!important;}
.aboutauthor:hover .authorrank{-webkit-transform:translateX(10px);transform:translateX(10px);}
.aboutauthor p{color:#fff;font-size:17px;}
Bước 3: Chèn code hiển thị khung tác giả vào nơi bạn muốn:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div class='aboutauthor'>
  <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWFturKyFGa-98difdEVyz9hnECDP0c2aHp1IueknfxCGh4WKXNMpq0tHDGbhzAnDdE_RZIMGT0oe9zUDYsTh1riGO7xU44DNI_fXG0UuvuDiZADr9dCz5hoeDLG5RdBuoXs47Hp0XGRyu/s1600/profile3.png'/>
  <h3 class='authorname'><data:post.author/></h3>
  <h4 class='authorrank'>Tác giả TSM Blogger</h4>
  <p>Chào mừng bạn đến với TSM Blogger - Blog chia sẻ Thủ Thuật Blogspot, Facebook, Tổng hợp Tin Tức về Công nghệ, Game, Chia sẻ tài nguyên về Fonts, Blogspot Templates...</p>
 </div>
</b:if>
--- Sửa nội dung và avatar theo ý bạn.
Bước 4: Lưu template lại.
Kết luận:
Vậy là blog bạn đã có thêm một khung tác giả độc đáo nữa rồi. Khung tác giả này mình view source được từ SEO Time Template, mình đã có sửa và thêm một số giá trị của margin, căn lại avatar rồi. Nếu dùng mà bị lệch thì phải chỉ căn chỉnh mấy thuộc tính đó ở CSS bước 2 là được nhé.
Chúc các bạn thành công!

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!

12 bình luận Tổng hợp bình luận

avatar

Nói thiệt chứ giờ mà tìm ra thủ thuật để viết bài căng ghê! phải tìm kiếm, xào chẻ thật kỹ mới giám xuất bản. Với lại càng ngày càng hết thủ thuật :)

avatar

Ừ. Phải tra trước Google xem các blog việt đã có chưa thì dịch bên nước ngoài sang. Indo, Ấn, Anh...Còn nếu hết rồi thì lại phải view source từ các Template để lấy :))

avatar

mình muốn viết bài mà ko biết lấy cái gì viết luôn

avatar

Khi cạn ý tưởng thì phải mở thêm 1,2 mục kiểu tin tức hay sách vở gì gì đó để lấy bài bác ạ. Tin hay thủ thuật game sẽ nhiều thứ update liên tục.

avatar

Like!
Lót dép hóng bài share code thread comment TSM blog =))

avatar

Thread comment từ blog e thì e còn phải nghiên cứu tách code ra đã. Vì ở temp gốc có phần mã hóa comment form rồi. E chỉ sửa lại margin, padding, 2 nút reply, delete, avatar hiệu ứng tròn xoay, nền comment....các thứ thôi. Nói chung là ban đầu cái thread comment này đơn giản lắm. Bác kiếm tạm 1 cái rồi sửa theo ý :3

avatar

- chỉnh lại zùm e cái nhận xét zùm e đi e đang dùng temple của ad
http://sv1.upsieutoc.com/2017/09/17/222.png

avatar

Cái này thì mình xin khẳng định 1 điều là bạn đã làm 1 thủ thuật có sử dụng javascript hoặc 1 ứng dụng từ website như zotabox hoặc các trang tương tự nhé. vì temp này có 1 số code đã đc mã hóa nên khi dùng TUT có javascript gây xung đột nó sẽ mất phần nhận xét, label và có thể là bài viết liên quan. cách duy nhất là bạn phải tự nhớ đã thêm vào gì và gỡ ra bằng hết. sau đó đợi mấy tiếng sau hoặc 24h sau nó mới bình thường.

avatar

- mình ko có làm j ht ms sáng z zô coi z mất

avatar

Nếu như vậy thì bạn đợi tầm 1,2 tiếng sau đi. Nếu không hiện thì thay code của comment mới vào widget đó.

ĐĂNG KÍ NHẬN BÀI VIẾT MỚI

Please Enable Javascript!Enable JavaScript