• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

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

3
18/01/2011

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.

{3 bình luậnAdd yours ?}

10:50:00, 18 thg 1, 2011

tricks này hay, phải bookmarks ngay mới dc

Reply
00:59:00, 11 thg 4, 2011

@FRIENDS-PC

hiiii thank

Reply
18:28:00, 9 thg 10, 2013

add ơi.cái này là cách làm cái bảng đen đen(gồm thủ thuật java,tagcloud,thủ thuật Scriptaculous) của add ở cuối cùng đấy ak'.sao mình làm k ra nhỉ?.hướng dẫn mình làm cái bảng với.thanks add
Email: daiduonggia23@yahoo.com

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn