Create tabs for Blogger using jquery and id tabs
If the space of your web page is limited and you want to show more content ,what do you do ? In this case ,organizing content as tabs is a good solution . You can see a live demo in recent comment and recent posts section in my blog.
I found a plugin of Jquery named idTabs . With this script ,creating tabs is very simple . In addition ,this plugin has a lot of options for appearance of tabs . This is really awesome tabbing scripts.
to create tabs view with idTabs and Jquery,follow these steps :
1, idTabs is a plugin of Jquery framework ,so it can't work if Jquery is not installed in your web page . Jquery can be found here . Download Jquery and upload it to a host .
In your blogger template ,insert this line after ]]></b:skin>
<script type="text/javascript" src="url..../jquery.js"></script>
remember to change the url of jquery.js to the right
2,Download idTabs script at here . Upload it to a host and paste following line after the line above :
<script type="text/javascript" src="url/jquery.idTabs.min.js"></script>
remember to change the url of jquery.idTabs.min.js to the right
3, To add tabs view to your blogger , open your template in edit HTML mode ,choose where to add tabs and write code as this structure :
<ul class="idTabs">
<li><a href="#tab1">tab 1</a></li>
<li><a href="#tab2">tab 2</a></li>
</ul>
<div id="tab1">content of tab 1</div>
<div id="tab2">content of tab 2</div>
In this structure, any <a href="#tab"> inside of an element with class="idTabs" will show the element with id="tab" .
In this steps ,if you don't want to edit in HTML mode ,you can add a HTML/Javascript widget and paste the code above into widget content.
4, Ok,save template and you are done .
5,If you want to know more about idTabs and other options for tabs view ,you can go to this website . There are some interesting things you can do with this script ,and I hope it is the script you need .
You may also Like
Labels
Có gi hot?

Nhà ngoại cảm HỒ VĂN DŨ
Nhà ngoại cảm HỒ VĂN DŨ

NHÀ NGOẠI CẢM NGUYỄN THỊ HƯỜNG - Chuyên gia đón tiếp Vong linh tại Miền Trung
NHÀ NGOẠI CẢM NGUYỄN THỊ HƯỜNG - Chuyên gia đón tiếp Vong linh tại Miền Trung

Pride and Prejudice (1995) - 6 Mini - Vietsub - Mediafire
Pride and Prejudice (1995) - 6 Mini - Vietsub - Mediafire

(Mediafire) A hazard of hearts (1987) - Sự may rủi của trái tim - NEW LINK
(Mediafire) A hazard of hearts (1987) - Sự may rủi của trái tim - NEW LINK

Một số trang web hỗ trợ thiết kế blog
Một số trang web hỗ trợ thiết kế blog

Cho phụ nữ tuổi 30 đẹp mặn mà
Cho phụ nữ tuổi 30 đẹp mặn mà

Nghịch tí cho vui...
Nghịch tí cho vui...

Cô bé 4 tuổi mồ côi bị cắt cụt 2 chân
Cô bé 4 tuổi mồ côi bị cắt cụt 2 chân

Closer (2004) - Mediafire - Vietsub
Closer (2004) - Mediafire - Vietsub

Nhà ngoại cảm Nguyễn Ngọc Hoài áp vong gọi hồn
Nhà ngoại cảm Nguyễn Ngọc Hoài áp vong gọi hồn
0 nhận xét :
Ghi chú cho mẫu nhận xét:
- [img] ..link..[/img].
- [youtube] ...link...[/youtube].
- [nct]...link...[/nct].