Loading post navigation ...
 
 

Pro page

29
Nhận xét

[ Yêu cầu ] : Tạo sidebar trượt dọc theo blog

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Theo yêu cầu của bạn Dulichbui (www.dulichbui.org)
[FD's BlOg] - Thủ thuật này tương tự như thủ thuật tạo banner chạy dọc theo blog, nhưng ở đây ở đây có tích hợp thêm hiệu ứng show/hide từ mootools.
Tham khảo từ website baliwww.com
Xem demo : LIVE DEMO

Ảnh minh họa kết quả:


☼ Các bước thực hiện:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào sau thẻ <body> :

<div id="floatdiv" style="border: 0px solid rgb(34, 102, 170); padding: 16px; position: absolute; width: 200px; height:50px; left: 533px; top: 238px;">


<style type="text/css">
.li{
margin:0px 5px 7px 31px;
padding:2px;
list-style-type:none;
display:block;
width:200px;
}

#sideBar{
position: absolute;
width: auto;
height: 585px;
top: 0px;
right:-20px;
background-image:url(http://baliwww.com/images/backgroundsidebar.gif);
background-position:top left;
background-repeat:repeat-y;
}

#sideBarTab{
float:left;
height:137px;
width:28px;
}

#sideBarTab img{
border:0px solid #FFFFFF;
}

#sideBarContents{
overflow:hidden !important;
}

#sideBarContentsInner{
width:150px;
}
</style>

<script type="text/javascript" src="http://data.fandung.com/blog/demo/slide-sidebar/prototype.js"></script>
<script type="text/javascript" src="http://data.fandung.com/blog/demo/slide-sidebar/effects.js"></script>
<script type="text/javascript" src="http://data.fandung.com/blog/demo/slide-sidebar/side-bar.js"></script>


<div id="sideBar">

<a href="#" id="sideBarTab"><img src="http://data.fandung.com/blog/demo/slide-sidebar/slide-button.gif" alt="sideBar" title="sideBar"/></a>

<div id="sideBarContents" style="width: 0px; height: 0px; visibility: hidden; opacity: 0;">

<div id="sideBarContentsInner">

<span class="ul">
<span class="li">
{NỘI DUNG THỨ 1}
</span>

<span class="li">
{NỘI DUNG THỨ 2}
</span>
</span>

</div>
</div>
</div>
</div>

- Lưu ý : nội dung mà bạn muốn hiển thị trong slidebar này bạn phải đặt nó vào trong thẻ <span class="li"> ... </span> nếu muốn phân thành các phần khác nhau thì tạo nhiều thẻ <span class="li"> ... </span> khác nhau rồi dán nội dung cần hiển thị vào trong thẻ.

4. Save template.

Chúc các bạn thành công.


Enter your mail address:

29

share4vnn

thủ thuật này em biết làm khá lâu rùi.. hồi ấy em định nhé chát box vào cái này nhưng gà quá ko làm được :D

min HMN

lại 1 cái nữa hay.. khà khà...
anh dũng xem cho e cái tem cm nhá... e để lại link rồi :D

fandung

@Min : anh xem cho em rồi đóa

min HMN

à... cái code này em chèn vào ... nó báo lỗi img là sao ta?

fandung

lỗi img là sao em, em có thể nói rõ là chèn code nào vào thì nó bị lỗi ko, để anh khắc phục

Dulichbui's Blog

Co cach nao minh van tao duoc ung dung nay ma ko phai chen them code vo phan ma html ko nhi???/

min HMN

Thông báo lỗi XML: The element type "img" must be terminated by the matching end-tag "".

đây này anh :D

fandung

à, chỗ này nè em :

<img src="http://i342.photobucket.com/albums/o433/bkprobk/slide-button.gif" alt="sideBar" title="sideBar">

em thêm dấu / vào trong thẻ img, tại anh thiếu

ngan ling

anh ơi em nghĩ là nên nâng cấp nó lên khi nào di chuột vào là nó hiện ra khi không di chuột vào nữa thì nó tự động ẩn chứ phải kick thì có thể là hơi phiền phức
và còn nữa là thêm nữa chọn cho cái này là
không ẩn mà hiện (giống các quảng cáo chạy dọc theo blog khi di chuyển
thank anh

min HMN

okie... để em test lại:D

@ nganling: ù đúng là di chuột vô nó tự hiện ra thì ngon :D

-không ẩn mà hiện : thì là 1 tip khác rồi e, cái đó anh Dũng từng giới thiệu rồi thì phải :D

min HMN

okie mem...ngon lành cành đào :D
anh có giải được câu "Người yêu bạn là ai " bên em chưa?

fandung

anh chưa coi :D

Mr.Hiệp Cò

Bác dùng có thể làm cho HC 1 cái Khung comment trong đó chỉ có 3 dòng yêu cầu như: Tên của bạn - Web của bạn - Mail của bạn đc ko? ~_~

Nhưng mà trong cái khung đó cho phép ghi 1 trong 3 cái cũng đc...Ko nhất thiết là phải điển đầy đủ 3 cái mới cho comment!

Mr.Hiệp Cò

Lấy ví dụ cho bác dễ hiểu nè...Bác vào blog của bác http://luomlatblog.blogspot.com nhé ^^!

fandung

Cái này ko được rồi HC à.

Hệ thống comment của blogger mình không thay đổi được, với lại form comment là 1 iframe, nên mình không có cách nào để tùy chỉnh form comment này.

Nếu như bạn nói thì chỉ có thể thay hệ thống comment của blog thành hệ thống khác thôi.

Mr.Hiệp Cò

Vậy cái khung comment của blog bác "http://luomlatblog.blogspot.com/" nó đc làm từ gì nhỉ ~_~

Thấy cái khung đó tiện lợi cho những người ko bít comment!

Có 1 số người quen của HC vào blog mà chẳng biết comment như thế nào ~_~ quãi...

fandung

Cái hệ thống ở blog luomlat đó là của JS-kit

LouLou

js-kit.com ~> chuyển sang js-kit đy các bác ơi ;))

-‘๑’- Scandal-HOT -‘๑’-

Vậy làm sao để dùng nó các bác nhỉ ?

fandung

@LouLou : thoai!!! để kiểu basic nài cho nóa đơn giản, chèn mấy cái kia rùm rè lém :D

fandung

@HC : vào trang js-kit.com rồi đăng kí mà dùng, hình như cài đặt cũ dễ thôi, ko khó đâu

min HMN

ù, tớ xem ròi, vào jskit ròi...
nhưng đúng như a Dũng nói.
Để nguyên bản đi, thêm mấy cái đó vào tiện thì thấy tiện đấy, nhưng tớ cũng ngại về vấn đề code sau này, lỡ có xung hay die :D

Hiệp Cò

Có lẻ phải nghe theo lời các bác vậy :D

Ngankvn ®

Mình đang trục trặc vấn đề Quang cáo , nên thấy bài này rất cần đây :D .

Dzũng xem làm sao để khi vào trang , thì cái sidebar trượt này nó mặc định ở chế độ mở rộng , khi click vào thì mới bị thu gọn.

Phan Dũng (Admin)

@Ngân : có thời gian mình sẽ tìm hiểu cho Ngân, hình như nó nằm trong file sidebar.js thì phải

huynhtanngoc

anh ah chi em lam cai dang nhan xet giong nhu vay nha :
thanks""

interesting

Good!!! Great!!! This article and pictures, and not only true interesting, I like it very much, looking forward to you as soon as possible to update your works!!!replica Rolex

alobabyday

giup voi k chay http://alobabyday.blogspot.com/

LinhBaby

làm không được anh dũng ơi



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home