[hr][hr][hr] [align=center] [color=gray]Original Title : Tab Content Credit : [url=http://www.dynamicdrive.com/]Dynamic Drive[/url] [b]FTalk Members[/b] Edited By : Andha[/color] [/align] [hr][hr][hr]
You are viewing a post by andHa. View all 44 posts in [hr][hr][hr] [align=center] [color=gray]Original Title : Tab Content Credit : [url=http://www.dynamicdrive.com/]Dynamic Drive[/url] [b]FTalk Members[/b] Edited By : Andha[/color] [/align] [hr][hr][hr].
2008-08-12 18:25:02
- andHa
- » FTalkWhiz
3386
0
1969-12-31
[hr][hr][hr] [align=center] [color=gray]Original Title : Tab Content Credit : [url=http://www.dynamicdrive.com/]Dynamic Drive[/url] [b]FTalk Members[/b] Edited By : Andha[/color] [/align] [hr][hr][hr]
[hr][hr][hr]
[align=center]
[color=gray]Original Title : Tab Content
Credit : [url=http://www.dynamicdrive.com/]Dynamic Drive[/url]
[b]FTalk Members[/b]
Edited By : Andha[/color]
[/align]
[hr][hr][hr]
[table][tr][td][b]Prolog...[/b][/td][/tr][/table]
[b]Hho[/b]. Biar box yang ada di fs lu ga kebanyakan, lu bisa ngegunain trick ini, fungsi nya menggabungkan content seperti photo (slideshow), chat box, mp3 player, dll ke dalam satu box. [color=red]Recommended for advance user[/color], karena gw ga bakal ngejelasin nya dgn detail. Be active 
[table][tr][td][b]Requirements[/b][/td][/tr][/table]
[li]Kesabaran.[/li]
[li]JS external.[/li]
[li]Fungsi addBox.[/li]
[table][tr][td][b]Tutorial[/b][/td][/tr][/table]
1. [url=http://www.ziddu.com/download/1905154/tabcontent.txt.html]Download[/url] file js yang dibutuhkan. Dan upload di web hosting lu.
2. Masukkan kode untuk memanggil js berikut di js external lu (bagian A).
[quote]var myjs = document.createElement("script");
myjs.type = "text/javascript";
myjs.src = "[b]URL FILE JS YANG UDAH DI UPLOAD[/b]";
document.getElementsByTagName("head")[0].appendChild(myjs);[/quote]
3. Masukkan kode content berikut di js external lu (bagian B).
[spoiler]var content1 = "[color=green][b]KODE CONTENT 1[/b][/color]";
var content2 = "[color=blue][b]KODE CONTENT 2[/b][/color]";
var content3 = "[color=darkblue][b]KODE CONTENT 3[/b][/color]";
var multicontent = "<ul id='countrytabs' class='shadetabs'>"+
"<li><a href='#' rel='country1' class='selected'>[color=green][b]JUDUL CONTENT 1[/b][/color]</a></li>"+
"<li><a href='#' rel='country2'>[color=blue][b]JUDUL CONTENT 2[/b][/color]</a></li>"+
"<li><a href='#' rel='country3'>[color=darkblue][b]JUDUL CONTENT 3[/b][/color]</a></li>"+
"</ul>"+
"<center><div style='border:1px solid gray; width:450px; -moz-border-radius: 10px!important; margin-bottom: 1em; padding: 10px'>"+
"<div id='country1' class='tabcontent'>"+content1+"</div>"+
"<div id='country2' class='tabcontent'>"+content2+"</div>"+
"<div id='country3' class='tabcontent'>"+content3+"</div>"+
"</div></center>";
[color=purple][b]addBox("RIGHT","JUDUL BOX",multicontent,"multicontent","6");[/b][/color]
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()[/spoiler]
[quote][color=red][b]Catatan ![/b][/color]
[li]Sesuaikan fungsi [color=purple][b]addBox[/b][/color] dgn yg lu punya.[/li][/quote]
4. Masukkan kode berikut ke css external.
[spoiler]/* ######### CSS for Shade Tabs ######### */
.shadetabs{
width: 450px;
height: 45px;
padding: 3px 0;
margin-left: 10px;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.shadetabs li{
width: 100px;
height: 45px;
display: inline;
margin: 0;
}
.shadetabs li a{
width: 100px;
height: 45px;
text-decoration: none;
position: relative;
border: none;
color: #2d2b2b;
}
.shadetabs li a:visited{
height: 45px;
color: #2d2b2b;
}
.shadetabs li a:hover{
height: 45px;
text-decoration: underline;
color: #2d2b2b;
}
.shadetabs li a.selected{ /*selected main tab style */
height: 45px;
position: relative;
top: 1px;
}
.shadetabs li a.selected{ /*selected main tab style */
width: 100px;
height: 45px;
border-bottom-color: white;
}
.shadetabs li a.selected:hover{ /*selected main tab style */
height: 45px;
text-decoration: none;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}[/spoiler]
[table][tr][td][b]Preview[/b][/td][/tr][/table]
[img]http://img353.imageshack.us/img353/844/screenshotus8.png[/img]
[li][url=http://profiles.friendster.com/andhamood]Andha's Preview Profile[/url][/li]
[hr][hr][hr]
[align=center]
[flash=250x50]http://si-andha.web44.net/for_friendster/flash/siggy.swf[/flash]
[/align]
[hr][hr][hr]
[table][tr][td][b]Requirements[/b][/td][/tr][/table]
[li]Kesabaran.[/li]
[li]JS external.[/li]
[li]Fungsi addBox.[/li]
[table][tr][td][b]Tutorial[/b][/td][/tr][/table]
1. [url=http://www.ziddu.com/download/1905154/tabcontent.txt.html]Download[/url] file js yang dibutuhkan. Dan upload di web hosting lu.
2. Masukkan kode untuk memanggil js berikut di js external lu (bagian A).
[quote]var myjs = document.createElement("script");
myjs.type = "text/javascript";
myjs.src = "[b]URL FILE JS YANG UDAH DI UPLOAD[/b]";
document.getElementsByTagName("head")[0].appendChild(myjs);[/quote]
3. Masukkan kode content berikut di js external lu (bagian B).
[spoiler]var content1 = "[color=green][b]KODE CONTENT 1[/b][/color]";
var content2 = "[color=blue][b]KODE CONTENT 2[/b][/color]";
var content3 = "[color=darkblue][b]KODE CONTENT 3[/b][/color]";
var multicontent = "<ul id='countrytabs' class='shadetabs'>"+
"<li><a href='#' rel='country1' class='selected'>[color=green][b]JUDUL CONTENT 1[/b][/color]</a></li>"+
"<li><a href='#' rel='country2'>[color=blue][b]JUDUL CONTENT 2[/b][/color]</a></li>"+
"<li><a href='#' rel='country3'>[color=darkblue][b]JUDUL CONTENT 3[/b][/color]</a></li>"+
"</ul>"+
"<center><div style='border:1px solid gray; width:450px; -moz-border-radius: 10px!important; margin-bottom: 1em; padding: 10px'>"+
"<div id='country1' class='tabcontent'>"+content1+"</div>"+
"<div id='country2' class='tabcontent'>"+content2+"</div>"+
"<div id='country3' class='tabcontent'>"+content3+"</div>"+
"</div></center>";
[color=purple][b]addBox("RIGHT","JUDUL BOX",multicontent,"multicontent","6");[/b][/color]
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()[/spoiler]
[quote][color=red][b]Catatan ![/b][/color]
[li]Sesuaikan fungsi [color=purple][b]addBox[/b][/color] dgn yg lu punya.[/li][/quote]
4. Masukkan kode berikut ke css external.
[spoiler]/* ######### CSS for Shade Tabs ######### */
.shadetabs{
width: 450px;
height: 45px;
padding: 3px 0;
margin-left: 10px;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.shadetabs li{
width: 100px;
height: 45px;
display: inline;
margin: 0;
}
.shadetabs li a{
width: 100px;
height: 45px;
text-decoration: none;
position: relative;
border: none;
color: #2d2b2b;
}
.shadetabs li a:visited{
height: 45px;
color: #2d2b2b;
}
.shadetabs li a:hover{
height: 45px;
text-decoration: underline;
color: #2d2b2b;
}
.shadetabs li a.selected{ /*selected main tab style */
height: 45px;
position: relative;
top: 1px;
}
.shadetabs li a.selected{ /*selected main tab style */
width: 100px;
height: 45px;
border-bottom-color: white;
}
.shadetabs li a.selected:hover{ /*selected main tab style */
height: 45px;
text-decoration: none;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}[/spoiler]
[table][tr][td][b]Preview[/b][/td][/tr][/table]
[img]http://img353.imageshack.us/img353/844/screenshotus8.png[/img]
[li][url=http://profiles.friendster.com/andhamood]Andha's Preview Profile[/url][/li]
[hr][hr][hr]
[align=center]
[flash=250x50]http://si-andha.web44.net/for_friendster/flash/siggy.swf[/flash]
[/align]
[hr][hr][hr]
Last edited by andHa (2008-08-25 19:51:05)
 |