• Sit amet felis. Mauris semper, velit semper laoreet dictum

    Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, ...

  • Category name clash

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. ...

  • Test with enclosures

    Here's an mp3 file that was uploaded as an attachment: Juan Manuel Fangio by Yue And here's a link to an external mp3 file: Acclimate by General Fuzz Both are CC licensed. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, ...

  • Block quotes

    Some block quote tests: Here's a one line quote. This part isn't quoted. Here's a much longer quote: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In dapibus. In pretium pede. Donec molestie facilisis ante. Ut a turpis ut ipsum pellentesque tincidunt. Morbi blandit sapien in mauris. Nulla lectus lorem, varius aliquet, ...

  • Contributor post, approved

    I'm just a lowly contributor. My posts must be approved by the editor.Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at ...

Cara Membuat TabView Versi 2



Tab view versi 2 ini ceritanya adalah lanjutan dari tab view pendahulunya yakni hanya berbeda pada tampilannya. Pembuat aslinya adalah dari Ateonsoft.com dan disini saya hanya berbagi informasi sebagai pengguna tabview versi 2 ini Langsung saja Sobat ikuti langkah-langkah dibawah ini untuk dapat membuat tab view versi 2,OK

Berikut langkah-langkahnya

- Login ke Blogger dengan ID kalian
- Lalu Klik Tata Letak
- Klik Sub Menu Edit HTML
- Pada Kotak Edit HTML cari Kode ]]></b:skin>
- Lalu copy kode di bawah ini dan pastekan diatas kode ]]></b:skin>


/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}


- Lalu letakkan script dibawah ini tepat dibawah kode <head>


<script src='http://azizrhamadhan.googlecode.com/files/tabview2atensoft.js' type='text/javascript'/>


- Save Template
- Pergi ke halaman Element Halaman
- Klik Add Widget Element
- Pilih Menu HTML/Java Script
- Lalu Copy kan kode yang ada di bawah ini


<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>


Setelah itu sobat bisa paste kan pada kolom Html/Javascript yang tersedia Pada Blog dan sekarang tinggal di Save dan disetting saja sesuai dengan keinginan Sobat sendiri,
NB: Pada setiap kode html maupun script diatas dibagian warna, ukuran border, lebar, tinggi, dapat Sobat Dapat mengedit sesuai dengan keinginan para Sobat . Mungkin Sobat tidak perlu mengubahnya dahulu untuk melihat hasil defaultnya cukup lakukan langkah-langkah yang seperti diatas dan setelah melihat hasilnya dan berhasil, barulah Sobat bisa menyesuaikan semua yang ingin Sobat ubah. Selamat Mencoba ya!
Jangan Lupa Commentnya ya Sobat .

Sunday, February 6, 2011 Labels: 0 comments

0 comments to "Cara Membuat TabView Versi 2"

Post a Comment

Labels

Blog Archive