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;
}
.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>
<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>
<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.
{ 0 comments... read them below or add one }
Post a Comment