Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]


Cấp bậc !
•Bang Chủ•
avatar
•Bang Chủ•

[KiNg]_[PiN]-BB

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.

Xem lý lịch thành viên http://a1k44.thptbatbat.com
Loading

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
  • Free forum | © PunBB | Free forum support | Liên hệ | Report an abuse | Create a free blog
© 2012 A1K44BB
FM PunBB - Edit by HOàng Hải