12.25.2009

Membuat Tab View

Hi"...Cuma ngelanjutin aja dari forum sebelah nih, jadi rencananya kita mau buat tab view nih, itu tuh, tab yang ada kursornya yang bisa menghubungkan kita ke posting yang diinginkan, oke langsung aja

1. Siapkan Komputer, Winamp, Kopi dan tentunya rokok kita dong [jangan utang yah]

2. Silahkan Log in ke blog anda, kalo saya biasa log in di www.blogspot.com terus masukin deh ussername dan password blog

3. Arahkan Kursor anda ke menu layout>>edit HTML, dan selanjutnya cari kode seperti ini
]]></b:skin> dan selanjutnya masukan kode / script berikut ini sebelum kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. Selanjutkan silahkan anda input script di bawah ini sebelum kode </head> :

<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>

5. Jika sudah di save yah, jangan sampai gagh loh.

6. Sekarang anda masuk ke page elements dan selanjutnya buat gadget yang java/HTML yak. Dan masukan script berikut

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}

div.TabView div.Tabs a {float:left; display:block; width: 106px; /* Lebar Menu Utama Atas */

text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid

#00FF00; /* Warna border Menu Atas */

border-bottom-width:0; text-decoration: none; font-family: "georgia", Serif; /* Font Menu Utama Atas */

font-weight:bold; color:#00FF00; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #FF0000; /* Warna background Menu Utama Atas */ }

div.TabView div.Pages {clear:both; border:1px solid #00FF00; /* Warna border Kotak Utama */
overflow:hidden; background-color:#000000; /* Warna background Kotak Utama */ }

div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>

<script src="http://miskahiper.fileave.com/tabview.js" type="text/javascript"/></script>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 400px;" class="Tabs">
<a>Tips dan Trik</a>
<a>setting</a>
</div>
<div style="width:214px; height:300px; " class="Pages">

<div class="Page">
<div class="Pad">
<ol>

<li><a href="http://Link Posting Anda - Tips dan Trik 1"><font color="#CC00FF">Judul Posting Anda</font></a></li>
<li><a href="http://Link Posting Anda - Tips dan Trik 2"><font color="#CC00FF">Judul Posting Anda</font></a></li>
</ol>
</div>
</div>

<div class="Page">
<div class="Pad">
<ol>
<li><a href="http://Link Posting Anda - Setting 1"><font color="#CC00FF">Judul Posting Anda</font></a></li>
<li><a href="http://Link Posting Anda - Setting 2"><font color="#CC00FF">Judul Posting Anda</font></a></li>
</ol>
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>

7. Nah Silahkan mencoba, jujur saja karna saya stupid jadi yah 2 hari baru bisa mecahin tuh script, awalnya script yang saya dapat dari tetangga sebelah gagh jalan, terus saya coba otak-atik sendiri. Alhamdulilah bisa deh, try in error n good luck bro.

0 comments:

Posting Komentar