SHARE INTRO ĐỔI MÀU CỰC ĐẸP CHO BLOG - CTV | ĐỨC DUY IT

Tác giả: Đức Duy IT

Xuất bản:

TẢN MẠN

Hello, xin chào các bạn đã quay trở lại với blog của mình. Mình xin tự giới thiệu mình là ADMIN của Đức Duy IT và cũng đồng thời là Cộng Tác Viên tại Blog này.
Hôm qua lướt mấy blog thấy bên www.nguyenhuyit.tk có cái Intro giới thiệu bản thân khá là đẹp nên mạn phép R.I.P về cho anh em sài. Dẫu biết là không nên nhưng mà thôi, tài nguyên mạng là free, chúng ta có thể khái thác hihi. Cơ mà có thể khiếu nại bản quyền bằng cách Comment ngay dưới bài viết này !!! Tôi sẽ xóa ngay mà không nghĩ ngợi. Hi
DEMO

THỰC HÀNH

Bước 1: Chèn code phía dước ngay trước thẻ

]]></b:skin>

body {animation: fadeIn 2s;-webkit-animation:fadeIn 2s;-moz-animation:fadeIn 2s}
@keyframes fadeIn{from{opacity:0;transform:translate(50px,0)}to{opacity:1}}
@-webkit-keyframes fadeIn{from{opacity:0;transform:translate(50px,0)}to{opacity:1}}
@-moz-keyframes fadeIn{from{opacity:0;transform:translate(50px,0)}to{opacity:1}}
@-o-keyframes fadeIn{from{opacity:0;transform:translate(50px,0)}to{opacity:1}}
@keyframes colorBackground{0%{background-color:#b91616}20%{background-color:#6245d8}40%{background-color:#06864b}60%{background-color:#822376}80%{background-color:#236c82}100%{background-color:#fbcf61}}
#information {
animation: colorBackground 20s infinite;
-webkit-animation: colorBackground 20s infinite;
-moz-animation: colorBackground 20s infinite;
-o-animation: colorBackground 20s infinite
}
@keyframes colorBackground {
0% {
background-color: #fbcf61;
color: #fbcf61
}
20% {
background-color: #6bd57e;
color: #6bd57e
}
40% {
background-color: #ff6f6f;
color: #ff6f6f
}
60% {
background-color: #57cff4;
color: #57cff4
}
80% {
background-color: #0ed4c8;
color: #0ed4c8
}
100% {
background-color: #fbcf61;
color: #fbcf61
}
}

Bước 2: Chèn code bên dưới vào phần bạn muốn hiển thị

<style>
  #information {background:rgba(0, 0, 0, 0.82);
    height: 250px;position:relative;}
  #information .details-info {max-width:1075px;margin:0 auto;}
  #information:before {content:'';position:absolute; top:0; left:0; bottom:0; right:0; background:rgba(0,0,0,.15);}
  .info-cot1, .info-cot2 {display:inline-block;position:relative}
  .info-cot1 {width: 41%;}
  .info-cot2 {width:50%;top: 47px; right:99px}
  .profile-img {
    border-radius: 50%;
    width: 150px;
    height: 154px;
    position: absolute;
    top:0;
bottom:50px;
    left: 30%;}  
.profile-img img {width:100%;border-radius:0; border:4px solid #fff;    position: absolute;bottom:88px; left:50px}
  .profile-img img:hover{border-radius:40px 0 0 40px;
}
  .hello {background: rgba(255,255,255,.3);
    padding: 15px 25px;
    border-radius: 0 5px 5px 0;
    color: #fff;
    font-size: 15px;
    text-align: justify;
    -moz-user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    text-shadow: 1px 1px 1px #424242;}
  @media all and (max-width:885px){#information{display:none;}}
  }
</style>
<div id='information'>
<div class='details-info'>
<h2 style='font-size:17px;color:#fff;position: absolute; top:15px;text-shadow: 2px 1px 1px #C00;'><i class='fa fa-angle-right'></i> CHÀO MỪNG BẠN ĐẾN VỚI ĐỨC DUY BLOG </h2>
<div class='info-cot1'>
<div class='profile-img'>
<img src='https://i.imgur.com/UQS9XdJ.jpg'/>
</div>
</div>
<div class='info-cot2'>
<div class='hello'>
<h2> HOÀNG ĐỨC DUY</h2>
 - Facebook: www.facebook.com/DUYIT98
  <br/>
- Email: [email protected]
  <br/>
- Website: https://www.ducduyit.cf
  <br/>
- Số điện thoại: không dùng
  <br/>
<span> - Cố gắng và nỗ lực với những gì mình đang làm - </span>
</div>
</div>
<h2 style='font-size:17px;color:#fff;position: absolute; bottom:15px; right:145px; text-shadow: 2px 1px 1px #c00;'> CHÚC CÁC BẠN CÓ MỘT NGÀY VUI VẺ NHÉ!! <i class='fa fa-angle-left'></i></h2>
</div>
</div>
<div id='continue'></div>

LỜI KẾT

Chỉ với vài bước làm đơn giản bạn đã có thể trang trí cho blog của mình rồi. Mọi hành động copy & reup bài viết này vui lòng ghi rõ nguồi Đức Duy IT và trỏ link về blog này !!!

Chúc các bạn thành công !!!