Tạo trang giới thiệu về bản thân đẹp cho blogger

Một weblog thì tất nhiên cần phải có một trang tĩnh hiển thị thông tin về quản trị viên blog đó,nói chung là một trang để chúng ta tự sướng , giới thiệu đôi lời với các vị khách.Hôm nay  Thiết kế weblog xin giới thiệu cho các bạn một trang giới thiệu về bản thân rất chi là đẹp.



                                                  

                                                         Trước và sau khi trỏ truột

                              


Đầu tiên các bạn đặt đoạn code sau vào trước thẻ ]]></b:skin> trong template nhé!!!

.Slidebox{

float:center;

}

.cover {

position: relative;

width: 590px;

height: 282px;

margin: 20px auto;

background-color: #f7f7f7;

z-index: 1;

padding: 10px;

-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);

-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);

box-shadow: 0 2px 10px rgba(0,0,0,0.3);

}

.left_gate{

position: absolute;

background: #DBDCDE;

bottom: 0; right: 50%;

left: 0;

top: 0;

border:1px solid #F0F0F0;

-webkit-transition: all 0.5s ease-out;

-moz-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

-o-transition:all 0.5s ease-out;

transition: all 0.5s ease-out;

}

.cover:hover .left_gate{

right: 100%;

left: -50%;

}

.right_gate{

position: absolute;

background: #DBDCDE;

bottom: 0;

left: 50%;

right: 0;

top: 0;

border:1px solid #F0F0F0;

-webkit-transition: all 0.5s ease-out;

-moz-transition: all 0.5s ease-out;

-ms-transition: all 0.5s ease-out;

-o-transition: all 0.5s ease-out;

transition: all 0.5s ease-out;

}

.cover:hover .right_gate{

left: 100%;

right: -50%;

}

.slide_in {

overflow: hidden;

}

.slide_in .left_gate {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUTjavY9OOZW1lzIGV2QMhctASLpBx4bcCrkBYBHBtQaKw6w0rO6dF_sOFDqIjEJL7l9yAXHC8wKe_sbta9XHM6059n5E7gziQH-9WVMENhLOR9r14z5mvNPQ6LSou4XAIGQaiAUNH-339/s320/right+gate.png)#DBDCDE;

border:1px solid #F0F0F0;

}

.slide_in .right_gate {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPKb8u_nHp7moj0Ybc58MS7chbgBUk7QgxARWxF5b6HGMsmGf3RW9CNv0P8Q916K5A_m4yhIUG5_qwKtd6xPj2quXk_ZDINVr-HEij8HNsrvsPakc89v3XVmA_oodDTQAWjIDCsESlI_oi/s1600/left+gate.png)#DBDCDE;

border:1px solid #F0F0F0;

}

.cover img {

margin-top: 15px;

}

 Sau đó tạo một trang tĩnh có tên là admin rồi chuyển sang chế độ HTML và chèn vào đó đoạn code sau:

<div class="Slidebox">

<div class="cover slide_in">

<div class="left_gate">

</div>

<div class="right_gate">

</div>

Your CONTENT TEXT GOES HERE

</div>

Xong rồi đó , chúc các bạn thành công!