Trang Chính1
Tạo khung thông tin tác giả blog kiểu trượt 18/01/12, 09:31 pm
 |  |  |
 | ![[KiNg]_[PiN]-BB](https://2img.net/u/3413/17/90/42/avatars/1-90.jpg) |  |
 |  |  |
[KiNg]_[PiN]-BB
Giới Tính : 
Join : 24/08/2011
Tuổi : 30
Địa Chỉ : Hà Nội
Bài chém : 372
Tiền : 2147657771
like : 3Panel trượt chiều ngang là một dự án do Jon Phillips tại trang SpyreStudios.com phát triển. Kiểu panel trượt này
có sử dụng thư viện jQuery. Người ta thường sử dụng Panel trượt để tạo
một form liên hệ hoặc form đăng nhập, đôi khi chỉ để tạo bảng thông tin
về tác giả hoặc website.
Sau khi nghiên cứu dự án này, tôi đã thử nghiệm và điều chỉnh về CSS để
tạo một panel trượt chiều ngang làm bảng thông tin về tác giả áp dụng
cho blogspot. Bạn có thể nhìn thấy Demo tại trang này. Sau đây là các bước thực hiện.
Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.
Đặt đoạn code sau đây vào trước dòng ]]></b:skin>.
/* Horizontal Panel Sliding Customized by Huynh Nhat Ha */
.panel {
position: fixed;
top: 100px;
right: 0;
display: none;
background: #DADADA;
border-bottom:1px solid #ccc;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-box-shadow: 1px 10px 25px 1px #000;
width: 330px;
height: auto;
padding: 30px 30px 60px 30px;
font-size:14px;
font-family:arial, verdana, sans-serif;
letter-spacing:-1px;
color:#fff;
font-weight: normal;
text-align: left;
}
.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #000;
text-align: justify;
}
.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #660000;
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #660000;
}
.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #FF5809;
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #FF5809;
}
a.trigger{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family:arial,verdana, sans-serif;
color:#fff;
padding: 10px 35px 10px 25px;
font-weight: 700;
background:#660000 url(https://2img.net/r/ihimizer/img405/9196/plusg.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}
a.trigger:hover{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: arial,verdana,sans-serif;
color:#fff;
padding: 15px 75px 15px 45px;
font-weight: 700;
background:#660000 url(https://2img.net/r/ihimizer/img405/9196/plusg.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-toprleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomrleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}
a.active.trigger {
background:#660000 url(https://2img.net/r/ihimizer/img694/4267/minus.png) 85% 55% no-repeat;
}
.columns{
clear: both;
width: 300px;
padding: 0px 0 10px 0;
line-height: 22px;
text-align: justify;
}
.colleft{
float: left;
width: 130px;
line-height: 20px;
}
.colright{
float: right;
width: 130px;
line-height: 20px;
}
ul{
padding: 0;
margin: 0;
list-style-type: none;
}
ul li{
padding: 0;
margin: 0;
list-style-type: none;
}
Tiếp tục đặt đoạn code sau đây vào trước thẻ </head>.
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
Bước 2. Đặt đoạn code sau đây vào trước dòng <div
id='content-wrapper'>. Với một số Template có thể trước dòng <div
class='content-inner'> hoặc <div class='tabs-outer'>.
<div class='panel'>
<h3><font color='#000' face='Arial' font-weigth='bold'>Khái lược về tác giả</font></h3>
<p><img alt='' src='URL_ảnh Avatar_Admin' style='float:left;margin-right:10px;padding: 5px;width:90px;height:90px'/>
Đây là đoạn text giới thiệu ngắn về tác giả Blog.</p>
<p></p>
<div style='clear:both;'></div>
<div class='columns'>
<div class='colleft'>
<h3><font color='#000' face='Arial'>Liên lạc </font></h3>
<ul>
<li><a href='http://huynh-nhat-ha.blogspot.com/' title='home'>Home</a></li>
<li><a href='http://huynh-nhat-ha.blogspot.com/p/about-me.html' title='Giới thiệu'>Giới thiệu</a></li>
<li><a href='http://huynh-nhat-ha.blogspot.com/p/projects.html' title='Dự án'>Dự án</a></li>
<li><a href='http://www.emailmeform.com/fid.php?formid=XXXXX' title='contact'>Liên hệ</a></li>
<li><a href='mailto:huynhathawave@yahoo.com' title='email'>Email</a></li>
</ul>
</div>
<div class='colright'>
<h3><font color='#000' face='Arial'>Theo dõi</font></h3>
<ul>
<li><a href='http://twitter.com/huynhatha' title='Twitter'>Twitter</a></li>
<li><a href='https://facebook.com/huynh-nhat-ha' title='Facebook'>Facebook</a></li>
<li><a href='http://www.google.com/profiles/huynh-nhat-ha#buzz' title='buzz'>Buzz</a></li>
<li><a href='http://www.myspace.com/'>MySpace</a></li>
<li><a href='http://huynh-nhat-ha.wordpress.com/'>Wordpress</a></li>
</ul>
</div>
</div>
<div style='clear:both;'></div>
</div>
<a class='trigger' href='#'>Tác giả</a>
Trong đoạn code trên, bạn cần thay URL cho hình ảnh Avatar của bạn, đặt
đoạn text giới thiệu khái lược về tác giả, thay địa chỉ blogspot của bạn
và các liên kết liên hệ, email, twitter, facebook, …
Lưu Template là OK.
có sử dụng thư viện jQuery. Người ta thường sử dụng Panel trượt để tạo
một form liên hệ hoặc form đăng nhập, đôi khi chỉ để tạo bảng thông tin
về tác giả hoặc website.
Sau khi nghiên cứu dự án này, tôi đã thử nghiệm và điều chỉnh về CSS để
tạo một panel trượt chiều ngang làm bảng thông tin về tác giả áp dụng
cho blogspot. Bạn có thể nhìn thấy Demo tại trang này. Sau đây là các bước thực hiện.
Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.
Đặt đoạn code sau đây vào trước dòng ]]></b:skin>.
/* Horizontal Panel Sliding Customized by Huynh Nhat Ha */
.panel {
position: fixed;
top: 100px;
right: 0;
display: none;
background: #DADADA;
border-bottom:1px solid #ccc;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-box-shadow: 1px 10px 25px 1px #000;
width: 330px;
height: auto;
padding: 30px 30px 60px 30px;
font-size:14px;
font-family:arial, verdana, sans-serif;
letter-spacing:-1px;
color:#fff;
font-weight: normal;
text-align: left;
}
.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #000;
text-align: justify;
}
.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #660000;
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #660000;
}
.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #FF5809;
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #FF5809;
}
a.trigger{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family:arial,verdana, sans-serif;
color:#fff;
padding: 10px 35px 10px 25px;
font-weight: 700;
background:#660000 url(https://2img.net/r/ihimizer/img405/9196/plusg.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}
a.trigger:hover{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: arial,verdana,sans-serif;
color:#fff;
padding: 15px 75px 15px 45px;
font-weight: 700;
background:#660000 url(https://2img.net/r/ihimizer/img405/9196/plusg.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-toprleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomrleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}
a.active.trigger {
background:#660000 url(https://2img.net/r/ihimizer/img694/4267/minus.png) 85% 55% no-repeat;
}
.columns{
clear: both;
width: 300px;
padding: 0px 0 10px 0;
line-height: 22px;
text-align: justify;
}
.colleft{
float: left;
width: 130px;
line-height: 20px;
}
.colright{
float: right;
width: 130px;
line-height: 20px;
}
ul{
padding: 0;
margin: 0;
list-style-type: none;
}
ul li{
padding: 0;
margin: 0;
list-style-type: none;
}
Tiếp tục đặt đoạn code sau đây vào trước thẻ </head>.
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
Bước 2. Đặt đoạn code sau đây vào trước dòng <div
id='content-wrapper'>. Với một số Template có thể trước dòng <div
class='content-inner'> hoặc <div class='tabs-outer'>.
<div class='panel'>
<h3><font color='#000' face='Arial' font-weigth='bold'>Khái lược về tác giả</font></h3>
<p><img alt='' src='URL_ảnh Avatar_Admin' style='float:left;margin-right:10px;padding: 5px;width:90px;height:90px'/>
Đây là đoạn text giới thiệu ngắn về tác giả Blog.</p>
<p></p>
<div style='clear:both;'></div>
<div class='columns'>
<div class='colleft'>
<h3><font color='#000' face='Arial'>Liên lạc </font></h3>
<ul>
<li><a href='http://huynh-nhat-ha.blogspot.com/' title='home'>Home</a></li>
<li><a href='http://huynh-nhat-ha.blogspot.com/p/about-me.html' title='Giới thiệu'>Giới thiệu</a></li>
<li><a href='http://huynh-nhat-ha.blogspot.com/p/projects.html' title='Dự án'>Dự án</a></li>
<li><a href='http://www.emailmeform.com/fid.php?formid=XXXXX' title='contact'>Liên hệ</a></li>
<li><a href='mailto:huynhathawave@yahoo.com' title='email'>Email</a></li>
</ul>
</div>
<div class='colright'>
<h3><font color='#000' face='Arial'>Theo dõi</font></h3>
<ul>
<li><a href='http://twitter.com/huynhatha' title='Twitter'>Twitter</a></li>
<li><a href='https://facebook.com/huynh-nhat-ha' title='Facebook'>Facebook</a></li>
<li><a href='http://www.google.com/profiles/huynh-nhat-ha#buzz' title='buzz'>Buzz</a></li>
<li><a href='http://www.myspace.com/'>MySpace</a></li>
<li><a href='http://huynh-nhat-ha.wordpress.com/'>Wordpress</a></li>
</ul>
</div>
</div>
<div style='clear:both;'></div>
</div>
<a class='trigger' href='#'>Tác giả</a>
Trong đoạn code trên, bạn cần thay URL cho hình ảnh Avatar của bạn, đặt
đoạn text giới thiệu khái lược về tác giả, thay địa chỉ blogspot của bạn
và các liên kết liên hệ, email, twitter, facebook, …
Lưu Template là OK.
