Membuat tab view menu versi 2

Pada postingan yang dulu EFA memposting artikel tentang trik-membuat-tab-view-menu-di-sidebar, nah sekarang EFA akan sedikit berbagi dengan sobat blogger mania. sebenarnya hal ini sama dengan postingan yang dulu akan tetapi yang versi ini barangkali agak kelihatan unik dibanding yang versi satu. dan cara pemasanganyapun lebih mudah dimengerti dari pada yang versi pertama. jika sobat blogger mania bermaksud untuk mempraktekanya bisa mengikuti langkah langkah berikut ini:

1. Login akun blog sobat
2. Selanjunya masuk menu rancangan terus edit html lalu cari kode ]]></b:skin>  copy-paste kode dibawah ini tepat 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:#1E90FF;
color: #333;
border-top:1px solid #FF0000;
border-right:1px solid #FF0000;
border-bottom:1px solid #FF0000;
border-left:1px solid #FF0000;
-moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px;
-webkit-border-top-right-radius:10px; -webkit-border-bottom-left-radius:10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #0000CD;
border-right:1px solid #0000CD;
border-bottom:1px solid #0000CD;
border-left:1px solid #0000CD;}
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:2px double #FF0000; padding:0;background: #ffffff; -moz-border-radius:8px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:12px;padding: 3px 5px; text-align:left;}

3. Cari kode </head> kemudian paste kode berikut tepat diatasnya :

<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>

4. Simpan template dan masuklah ke menu elemen laman
5. Tambah gadget pilih html/javascript
6. Paste script berikut :

 <form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>JUDUL 1</a>
<a>JUDUL 2</a>
<a>JUDUL 3</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Pastekan SCRIPT JUDUL 1sobat disini
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Pastekan SCRIPT JUDUL 2 sobat disini
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">Pastekan SCRIPT JUDUL3 sobat disini
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

7. yang terakhir dan paling utama simpan. dan lihat hasilnya.
Demikianlah artikel yang bisa saya sharing.

Selamat mencoba Semoga berhasil

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «