Chia sẽ bộ 3 psd căn cước chuẩn dùng để mở khóa facebook

Tạo khung tác giả đơn giản với hiệu ứng viền chạy trên avatar cho blogspot

Tác giả Thìn DZ

Xuất bản - tháng 7 09, 2018

Loading...

Vừa thi xong tranh thủ edit cái code bên Star Cường IT về làm cái khung cho blogpot và sửa lại khác tiện thể chia sẽ cho anh em nào muốn luôn nha :p

Khung tác giả đơn giản với hiệu ứng viền chạy trên avatar cho blogspot

DEMO - XEM TRƯỚC

Bước 1: Truy cập Quản trị blogger - Chủ đề - Chỉnh sửa HTML.

Bước 2: Thêm đoạn CSS dưới đây trước thẻ ]]></b:skin>

/* Author Frame lebalongit*/
.author-profilepc{background:#ffffff;width:100%;height:auto;border:1px solid #28b8d0;margin:10px 0 0px;padding:10px;position:relative;float:left}
.author-avatar{padding:0;height:140px;width:140px;float:left;margin:0;overflow:hidden;}
.author-fullname{font-size:20px;color:#28b8d0}
.author-info1{float:right;padding-left:10px;width:80%}
.author-info1 a{color:#28b8d0}
.author-info1 a:hover{color:#000000}
.author-info1 span{font-size:17px;font-weight:500;color:#000000}
.author-about{margin:0;padding:10px 0 10px;color:#000000;font-size:15px;text-align:justify}
.bar {
position: absolute;
width: 50px;
height: 5px;
background: #fff;
transition: all 1s linear;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.bar.delay {
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
.top {
top: -5px;
left: -5px;
}
.right {
top: 18px;
right: -28px;
transform: rotate(90deg);
}
.bottom {
bottom: -5px;
left: -5px;
}
.left {
top: 18px;
left: -28px;
transform: rotate(90deg);
}
@-webkit-keyframes h-move {
0% {
left: -5px;
}
100% {
left: 200px;
}
}
@keyframes h-move {
0% {
left: -5px;
}
100% {
left: 200px;
}
}
.top, .bottom {
-webkit-animation-name: h-move;
animation-name: h-move;
}
@-webkit-keyframes v-move {
0% {
top: -5px;
}
100% {
top:228px;
}
}
@keyframes v-move {
0% {
top: -5px;
}
100% {
top:228px;
}
}
.right, .left {
-webkit-animation-name: v-move;
animation-name: v-move;
}
.main_box {
width: 140px;
height: 140px;
position: relative;
background: url(https://lh3.googleusercontent.com/-RaSCRAxM6FE/WuSyZDD78_I/AAAAAAAABH8/kECPHFYqOgQoHVhiVtjGJBF5B2xR5L6ugCEwYBhgL/w140-h140-p/31337787_594144790939324_8136689480686895104_n.jpg);
border: 5px solid #2a2a2a;
}

• Thay //lh3.googleusercontent.com/-RaSCRAxM6FE/WuSyZDD78_I/AAAAAAAABH8/kECPHFYqOgQoHVhiVtjGJBF5B2xR5L6ugCEwYBhgL/w140-h140-p/31337787_594144790939324_8136689480686895104_n.jpg thành link avatar của bạn.
• Bước 3: Chèn đoạn code hiển thị khung tác giả vào vị trí bạn thích:

• <div class='author-profilepc' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>

• <div class='author-avatar'>

•  <div class='main_box'>

•     <div class='bar top '/>

•     <div class='bar right delay'/>

•     <div class='bar bottom delay'/>

•     <div class='bar left '/>

•   </div>

• </div>

• <div class='author-info1'>

• <div class='author-fullname'>

• Tác giả: <a href='https://www.facebook.com/Quangthin.57' rel='author'>Lê Bá Long IT</a> <i class='fa fa-diamond' style='color:#28b8d0'/><br/>

• </div>

• <p class='author-about'>&#8220;Luôn luôn mơ và nhắm cao hơn khả năng của bản thân. Đừng bận tâm tới việc làm tốt hơn những người đương thời hay những người đi trước. Hãy cố để làm tốt hơn chính mình.&#8221;

• <br/><br/><i>&quot;In this life no one gives nothing to anyone.&quot; - Lê Bá Long

•   </i></p>

• </div>

• </div>

• Chỉnh sửa lại thông số cho phù hợp với blog của bạn nhé.
  Bước 4: Lưu template lại.
  

  LỜI KẾT

  Vậy là xong rồi đó, rất đơn giản đúng không?! Nếu thấy hay đừng quên để lại một comment hoặc 1 share nhé :))
  Chúc các bạn thành công nhé :)