Cara Membuat Tabulasi Sederhana (tab widget)

Mo cari kode warna transparan, eh... tiba lagi di http://www.ateonsoft.com. Udah lama gak mampir ke ateonsoft. Terakhir mampir sih waktu coba-coba belajar membuat menu , seperti yang ada di atas header blog ini.Baru kebuka ada tutorial tentang membuat tab widget, variasinya cukup banyak, jadi tertarik ingin mencoba deh... caranya begini

Pada edit HTML silahkan anda masukkan kode dibawah ini di bagian header, antara <head> dan </head>, kalau ada yang bingung silahkan saja diletakkan pas dibawah kode <head>.

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

silahkan saja diobrak-abrik kodenya sesuai keinginan dan sesuai warna serta bentuk template anda. Pilih salah satu model kemudian letakkan di atas kode ]]></b:skin> dan save template anda.

ini

/* tab model 1 ateonsoft.com */ div.Tabateonsoft div.TFs {height: 30px; overflow: hidden;} div.Tabateonsoft div.TFs a {float: right; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 3px 3px 5px; 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-bottomleft: 10px; -moz-border-radius-topleft: 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 url('bg-tabateonsoft.jpg') no-repeat bottom right; -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;}

ini

/* 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;}

ini

/* tab model 3 ateonsoft.com */ div.Tabateonsoft {margin:25px 0 0 0; font: normal 11px arial;} div.Tabateonsoft div.TFs {height:27px; overflow: hidden;} div.Tabateonsoft div.TFs a {float: left; display: block; text-align: center; text-decoration: none; padding:3px 4px 3px 4px; margin:0 2px 0 0;letter-spacing:-0.01em; background:#f0f0f0; color: #333; border:1px solid #CCCCCC; } div.Tabateonsoft div.TFs a:hover { border-top:1px solid #CCCCCC; border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #cccccc;} div.Tabateonsoft div.TFs a.Active { background: #FFFFFF; color:#f58220; border-top:1px solid #999999; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; border-left:1px solid #999999;} div.Tabateonsoft div.Pages { clear: both; overflow: hidden; height:200px; padding:0;} div.Tabateonsoft div.Pages div.Page {height: 100%;padding: 0px; overflow: hidden; } div.Tabateonsoft div.Pages div.Page div.floor { font-size:11px; text-align:left;} #sidebar div.Tabateonsoft div.Pages div.Page div.floor li { margin:0; padding:0;}

ini

/* tab model 4 ateonsoft.com */ div.Tabateonsoft {margin:15px 0 0 0; font: normal 11px arial;} div.Tabateonsoft div.TFs {height:28px; overflow: hidden; border:1px solid #ccc; border-bottom:0px;background:#f0f0f0;} div.Tabateonsoft div.TFs a {float: left; display: block; text-align: center; text-decoration: none; padding:7px; margin:0; background:#f0f0f0; color: #333; border-right:1px solid #CCCCCC;} div.Tabateonsoft div.TFs a:hover { background:#ccc;} div.Tabateonsoft div.TFs a.Active { background: #333; color:#FFFFFF;} div.Tabateonsoft div.Pages { clear: both; overflow: hidden; height:150px; padding:0; border:1px solid #ccc; padding:5px;} div.Tabateonsoft div.Pages div.Page {height: 100%;padding: 0px; overflow: hidden; } div.Tabateonsoft div.Pages div.Page div.floor { font-size:11px; text-align:left;} #sidebar div.Tabateonsoft div.Pages div.Page div.floor li { margin:0; padding:0;}

Kalau sudah disimpan templatenya tinggal memasang tabnya di elemen halaman, dengan menambah widget baru dan pilih html/javascript lalu masukkan kode dibawah 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"> <div class="floor"> Disini letakkan kode untuk tab 1 anda </div> </div> <div class="Page"> Disini letakkan kode untuk tab 2 anda </div> <div class="Page"> <div class="floor"> Disini letakkan kode untuk tab 3 anda </div> </div> <div class="Page"> <div class="floor"> Disini letakkan kode untuk tab 4 anda </div> </div> </div> </div> </form> <script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

tutorial asli ada di :

www.ateonsoft.com

jika kesulitan silahkan coba yang ini


Tulisan Terkait :

Best Quote Today:
Keberhasilan adalah kemampuan untuk melewati dan mengatasi dari satu kegagalan ke kegagalan berikutnya tanpa kehilangan semangat. (Winston Chuchill)

Jika Anda menyukai tulisan diatas jangan lupa untuk klik tombol suka untuk berbagi dengan teman facebook Anda. Anda juga bisa membagikan tulisan ini di twitter dan jejaring sosial lainnya. Berbagi itu indah.

Become a Fan