Pages: 12
[b]Credit :[/b] Tab Content script v2.0 by Dynamicdrive [b]OS :[/b] All Browser [b]Preview :[/b] [url]http://kanalitnuk.fileave.com/About/About.html[/url] Mungkin dari kalian ada yg isi kolom About M
You are viewing a post by KaNaLiTnUk. View all 26 posts in [b]Credit :[/b] Tab Content script v2.0 by Dynamicdrive [b]OS :[/b] All Browser [b]Preview :[/b] [url]http://kanalitnuk.fileave.com/About/About.html[/url] Mungkin dari kalian ada yg isi kolom About M.
2008-12-30 13:16:01
- KaNaLiTnUk
- » FTalkFreak
1911
0
1969-12-31
[b]Credit :[/b] Tab Content script v2.0 by Dynamicdrive [b]OS :[/b] All Browser [b]Preview :[/b] [url]http://kanalitnuk.fileave.com/About/About.html[/url] Mungkin dari kalian ada yg isi kolom About M
[b]Credit :[/b] Tab Content script v2.0 by Dynamicdrive
[b]OS :[/b] All Browser
[b]Preview :[/b] [url]http://kanalitnuk.fileave.com/About/About.html[/url]
Mungkin dari kalian ada yg isi kolom About Me nya banyak sehingga tampilannya terlalu memanjang kebawah dan kurang enak dilihat. Ini ada script HTML Tab Content dari Dynamicdrive. Fungsinya seperti slide otomatis. Ini akan membuat isi kolom About Me kalian tampil dalam bentuk slide dan bergerak otomatis dari kiri ke kanan 
[b]1.[/b] Download .zip file dibawah ini (klik kanan lalu [b]save target as[/b] atau [b]save link as[/b]) yang isinya ada 3 buah. 2 buah image dan 1 buah script Master JS Tab Content
[quote][url]http://www.fileden.com/files/2008/6/22/1971034/Tabcontent%20Versi%202.0.zip[/url][/quote]
[b]2.[/b] Unzip lalu uploadkan semua isi file .zip tersebut ke account script hosting kalian dan harus dalam 1 folder. Jangan dipisah OK
[b]Preview :[/b]
[img]http://img171.imageshack.us/img171/5858/97151932mq6.jpg[/img]
[b]3.[/b] Setelah itu, didalam folder yg sama buat script HTML (misalnya [b]about.html[/b]) yg isinya adalah :
[spoiler]<head>
<style type="text/css">
.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}
.indentmenu ul{
margin: 0;
padding: 0;
float: left;
/* width: 80%; width of menu*/
border-top: 1px solid navy; /*navy border*/
background: black url(indentbg.gif) center center repeat-x;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid navy; /*navy divider between menu items*/
}
.indentmenu ul li a:visited{
color: white;
}
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: black url(indentbg2.gif) center center repeat-x;
}
.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
font: bold 14px Trebuchet MS;
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
</style>
<script type="text/javascript" src="tabcontent.js"></script>
</head>
<body>
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" rel="dog1" class="selected">1</a></li>
<li><a href="#" rel="dog2">2</a></li>
<li><a href="#" rel="dog3">3</a></li>
<li><a href="#" rel="dog4">4</a></li>
<li><a href="#" rel="dog5">5</a></li>
<li><a href="#" rel="dog6">6</a></li>
<li><a href="#" rel="dog7">7</a></li>
<li><a href="#" rel="dog8">8</a></li>
<li><a href="#" rel="dog9">9</a></li>
<li><a href="#" rel="dog10">10</a></li>
</ul>
<br style="clear: left" />
</div>
<div style="border 0px ridge black; width:480px; height: 150px; padding: 5px; margin-bottom:1em">
<div id="dog1" class="tabcontent">
<center><b><font color="blue">Schools (Other):</font><br><font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog2" class="tabcontent">
<center><b><font color="blue">College:</font><br><font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog3" class="tabcontent">
<center><b><font color="blue">Affiliations:</font><br><font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog4" class="tabcontent">
<center><b><font color="blue">Hobbies and Interests:</font><br><font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog5" class="tabcontent">
<center><b><font color="blue">Favorite Books:</font><br><font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog6" class="tabcontent">
<center><b><font color="blue">Favorite Movies:</font><br><font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog7" class="tabcontent">
<center><b><font color="blue">Favorite Music:</font><br><font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog8" class="tabcontent">
<center><b><font color="blue">Favorite TV Shows:</font><br><font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog9" class="tabcontent">
<center><b><font color="blue">About Me:</font><br>
<font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog10" class="tabcontent">
<center><b><font color="blue">Who I Want To Meet:</font><br>
<font color="black">Bla Bla Bla</b></font></center>
</div>
</div>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)
</script>
</body>
</html>[/spoiler]
Abang rasa kalian pasti sudah tahu bagian mana saja yg perlu diedit karena script HTML diatas itu adalah script HTML sederhana HTML diatas abang buat dalam ukuran lebar 480px dan tinggi 150px
[b]4.[/b] Setelah itu masukkan script ini ke dalam onload handler JS utama kalian
[spoiler]document.getElementById("content_6").innerHTML="<br><iframe src='[color=blue][b]URL HTML[/b][/color]' width='[color=blue][b]480[/b][/color]' height='[color=blue][b]150[/b][/color]' scrolling='no' marginwidth='0' marginheight='0' allowTransparency='true' frameborder='0'></iframe>"[/spoiler]
Ganti [color=blue][b]URL HTML[/b][/color] dengan URL HTML yang tadi kalian buat pada langkah nomor 3. Sesuaikan juga height dan width dari frame HTML nya OK
[b]5.[/b] Selesai dan happy tweaking FTI'ers 
[b]1.[/b] Download .zip file dibawah ini (klik kanan lalu [b]save target as[/b] atau [b]save link as[/b]) yang isinya ada 3 buah. 2 buah image dan 1 buah script Master JS Tab Content
[quote][url]http://www.fileden.com/files/2008/6/22/1971034/Tabcontent%20Versi%202.0.zip[/url][/quote]
[b]2.[/b] Unzip lalu uploadkan semua isi file .zip tersebut ke account script hosting kalian dan harus dalam 1 folder. Jangan dipisah OK
[b]Preview :[/b]
[img]http://img171.imageshack.us/img171/5858/97151932mq6.jpg[/img]
[b]3.[/b] Setelah itu, didalam folder yg sama buat script HTML (misalnya [b]about.html[/b]) yg isinya adalah :
[spoiler]<head>
<style type="text/css">
.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}
.indentmenu ul{
margin: 0;
padding: 0;
float: left;
/* width: 80%; width of menu*/
border-top: 1px solid navy; /*navy border*/
background: black url(indentbg.gif) center center repeat-x;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid navy; /*navy divider between menu items*/
}
.indentmenu ul li a:visited{
color: white;
}
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: black url(indentbg2.gif) center center repeat-x;
}
.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
font: bold 14px Trebuchet MS;
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
</style>
<script type="text/javascript" src="tabcontent.js"></script>
</head>
<body>
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" rel="dog1" class="selected">1</a></li>
<li><a href="#" rel="dog2">2</a></li>
<li><a href="#" rel="dog3">3</a></li>
<li><a href="#" rel="dog4">4</a></li>
<li><a href="#" rel="dog5">5</a></li>
<li><a href="#" rel="dog6">6</a></li>
<li><a href="#" rel="dog7">7</a></li>
<li><a href="#" rel="dog8">8</a></li>
<li><a href="#" rel="dog9">9</a></li>
<li><a href="#" rel="dog10">10</a></li>
</ul>
<br style="clear: left" />
</div>
<div style="border 0px ridge black; width:480px; height: 150px; padding: 5px; margin-bottom:1em">
<div id="dog1" class="tabcontent">
<center><b><font color="blue">Schools (Other):</font><br><font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog2" class="tabcontent">
<center><b><font color="blue">College:</font><br><font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog3" class="tabcontent">
<center><b><font color="blue">Affiliations:</font><br><font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog4" class="tabcontent">
<center><b><font color="blue">Hobbies and Interests:</font><br><font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog5" class="tabcontent">
<center><b><font color="blue">Favorite Books:</font><br><font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog6" class="tabcontent">
<center><b><font color="blue">Favorite Movies:</font><br><font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog7" class="tabcontent">
<center><b><font color="blue">Favorite Music:</font><br><font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog8" class="tabcontent">
<center><b><font color="blue">Favorite TV Shows:</font><br><font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog9" class="tabcontent">
<center><b><font color="blue">About Me:</font><br>
<font color="black">Bla Bla Bla</font></b></center>
</div>
<div id="dog10" class="tabcontent">
<center><b><font color="blue">Who I Want To Meet:</font><br>
<font color="black">Bla Bla Bla</b></font></center>
</div>
</div>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)
</script>
</body>
</html>[/spoiler]
Abang rasa kalian pasti sudah tahu bagian mana saja yg perlu diedit karena script HTML diatas itu adalah script HTML sederhana HTML diatas abang buat dalam ukuran lebar 480px dan tinggi 150px
[b]4.[/b] Setelah itu masukkan script ini ke dalam onload handler JS utama kalian
[spoiler]document.getElementById("content_6").innerHTML="<br><iframe src='[color=blue][b]URL HTML[/b][/color]' width='[color=blue][b]480[/b][/color]' height='[color=blue][b]150[/b][/color]' scrolling='no' marginwidth='0' marginheight='0' allowTransparency='true' frameborder='0'></iframe>"[/spoiler]
Ganti [color=blue][b]URL HTML[/b][/color] dengan URL HTML yang tadi kalian buat pada langkah nomor 3. Sesuaikan juga height dan width dari frame HTML nya OK
[b]5.[/b] Selesai dan happy tweaking FTI'ers
Last edited by KaNaLiTnUk (2008-12-30 13:17:48)
 |