Tạo khung thông tin tác giả blog kiểu trượt

Panel 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(http://img405.imageshack.us/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(http://img405.imageshack.us/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(http://img694.imageshack.us/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='http://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.