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 :

Cara Membuat Daftar Isi BlogspotMembuat daftar isi sepertiini kadang membuat loading blog menjadi lam ... [
www.fabrie.blogspot.com]
membuat buku tamu tersembunyiingin menampilkan buku tamu tersembunyi di blog? Masuk ke account Blo ... [
www.fabrie.blogspot.com]
Cara Menghilangkan Nama Admin Pada Top CommentatorCara Menghilangkan Nama Admin Pada Top Commentator sebetulnya bisa ... [
www.fabrie.blogspot.com]
Menampilkan kode script pada posting blogMasuk Blogger>Klik Layout(tata letak).Pada Layout/tata letak klik ... [
www.fabrie.blogspot.com]
menampilkan ym status di sudut blogmenampilkan ym status di sudut blog,,, kalo di tv posisinya kurang le ... [
www.fabrie.blogspot.com]
MENAMBAH EMOTIONS DI BUKU TAMU (SHOUTBOX)anda dapat menambah emotions dengan koleksi anda sendiri atau mengcop ... [
www.fabrie.blogspot.com]
Manajemen Blogger Author | Revenue SharingBlogger memberikan kesempatan kepada para penggunanya untuk bisa mena ... [
www.fabrie.blogspot.com]
Tips menampilkan pesan pada jam tertentuKadang kita bingung bagaimana berkomunikasi dengan pengunjung karna k ... [
www.fabrie.blogspot.com]
Menampilkan update status twitter di blog dengan javascriptHai Sobat! Kali ini ada script yang sebetul ... [
www.fabrie.blogspot.com]
Menambah Space Iklan di Dalam Posting BlogspotBanyak cara bagi para publisher untuk menampilkan iklan di blognya ag ... [
www.fabrie.blogspot.com]
menambahkan name/url opsi profilAkhir-akhir ini saya bingung mengapa select profil pada form komen ... [
www.fabrie.blogspot.com]
cara membuat tabview 4Sobat, kali ini masih membahas cara membuat tabview. Kalo tidak salah ... [
www.fabrie.blogspot.com]
misteri ka'bahNeil Amstrong telah membuktikan bahwa kota Mekah adalah pusat dari pl ... [
www.fabrie.blogspot.com]
Cara Membuat Jump Link di Dalam PostingWah apaan tuh "Jump Link" ?? mungkin sobat bertanya-tanya apa sih mak ... [
www.fabrie.blogspot.com]
Dapatkan Domain co.tv. Gratis Sebagai Pengganti Domain BlogspotHai sobat,Satu lagi domain singkat gratis selain co.cc adalah co.tv. ... [
www.fabrie.blogspot.com]
gak cuma jacko yang bisa!siapa sih yang gak kenal gerakan ini? gerakan ini di populerkan oleh ... [
www.fabrie.blogspot.com]
PlayBook Segera Hadir di IndonesiaKabar gembira bagi anda penggemar BlackBerry. Pasalnya pihak RIM (Res ... [
www.fabrie.blogspot.com]
Mempercepat Loading Page Pada BlogWidget yang terlalu banyak menbabkab loading blog tergannggu, seperti ... [
www.fabrie.blogspot.com]
menambah elemen baru di atas footerSalam sobat , kali ini saya akan coba menjelaskan langkah-langkah unt ... [
www.fabrie.blogspot.com]
1 Link Untuk Membuka 2 Halaman SekaligusSatu link akan membuka dua halaman sekaligus? waaaaahh menarik juga. ... [
www.fabrie.blogspot.com]
kursor di ikuti segerombolan teksingin kursor di ikuti teks? masuk ke Blog. Tata Letak, tambah widget ... [
www.fabrie.blogspot.com]
Tips Menyimpan/ Save As File Flash dari Website! Saat kita browsing atau jalan-jalan di internet, sering kita meliha ... [
www.fabrie.blogspot.com]
Blogger Harus Tahu : Apa Itu Lorem Ipsum ?Sebagai seorang blogger, mungkin kata Lorem Ipsum sudah tidak asing l ... [
www.fabrie.blogspot.com]
IMAGE JADI SAMAR KETIKA KURSOR DIATASNYAikuti lanhka-langkah berikut Masuk ke Blogger dengan ID anda.Pilih Ta ... [
www.fabrie.blogspot.com]
Membuat Title Bar Berjalan .fullpost{display:inline;} Agar dapat membuat title bar berjalan, ... [
www.fabrie.blogspot.com]
Blogspot Mobile View? (Mobile Version)Selama ini kita mengetahui bahwa blogspot tidak tersedia fitur mobile ... [
www.fabrie.blogspot.com]
readmore dengan menampilkan judul post dan mengganti dengan gambarJika sudah memasang fasilitas read more sebelumnya, ikuti langkah-lan ... [
www.fabrie.blogspot.com]
membuat buku tamu tersembunyi jilid 2langkahnya:Masuk ke account Blogger kamu, pilih "Layout" - "Page Elem ... [
www.fabrie.blogspot.com]
Membuat label blogspot dengan menu dropdownKeterbatasan space di blog memang membuat kita musti berhemat menggun ... [
www.fabrie.blogspot.com]
Cara Membuat Auto Hide pada Navbar BloggerCara Membuat Auto Hide pada Navbar Blogger adalah cara agar Navbar bl ... [
www.fabrie.blogspot.com]
Membuat Random BannerRandom Banner adalah sebutan untuk tampilan banner yang tampil secara ... [
www.fabrie.blogspot.com]
Cara Mudah Membuat simbol trademark, registered , copyright dan simbol lainnyaUntuk membuat TradeMark alias TM TM adalah singkatan dari TradeMark. ... [
www.fabrie.blogspot.com]
Cara Memasang Tombol Back to Top di BlogBlog sobat terlalu panjang kebawah karena posting yang panjang? tentu ... [
www.fabrie.blogspot.com]
Silahkan Masukan Link Teks DisiniSahabat yang mau barter link tapi berupa banner silahkan disini karen ... [
www.fabrie.blogspot.com]
Cara Menerbitkan Posting Di BlogspotPada saat kamu akan membuat tulisan baru di blogspot maka kamu akan d ... [
www.fabrie.blogspot.com]
Cara Mudah Membuat Banner Online GratisLangkah-langkah gratis: 1. Kunjungi situs ini Bannerfans.com 2. Regis ... [
www.fabrie.blogspot.com]
Membuat Garis Lengkung Pada Border blogMenggunakan border ini adalah untuk meminimalkan memepercantik blog d ... [
www.fabrie.blogspot.com]
Menyembunyikan gadget atau widget pada postingan tertentuLoading blog sobat lambat karena widget yang begitu banyak? supaya wi ... [
www.fabrie.blogspot.com]
Penyebab Tidak Munculnya Deskripsi Posting saat Like atau ShareSering saat blog kita di share atau di like yang muncul di face ... [
www.fabrie.blogspot.com]
Cara Memasang Iklan Ditengah Posting BlogspotBerbeda dengan wordpress, blogspot tidak menggunakan plugins seperti ... [
www.fabrie.blogspot.com]
Membuat Sendiri Share Link Ke Social Network Dengan JavascriptHai Sobat Blogger,,, Ternyata saya masih sempat untuk posting tulisan ... [
www.fabrie.blogspot.com]
cara menampilkan judul artikel / post di depan judul blog layout > Edit HTML Cari kode berikut :<title><data:blog.pag ... [
www.fabrie.blogspot.com]
Tips Ampuh Blogger PemulaMemulai sebuah blog bisa tampak besar, tetapi sebenarnya, itu salah s ... [
www.fabrie.blogspot.com]
Apa itu Bloging (Ngeblog) dan Apa manfaatnya?Selama ini banyak orang yang bertanya apa itu blog? blogging atau nge ... [
www.fabrie.blogspot.com]
Online Image ( Gif,PNG.JPG) Optimizer : Image CompressorImgage optimzer yang satu ini disediakan secara online oleh dinamycdr ... [
www.fabrie.blogspot.com]
Cara Setting BlogspotHal pertama yang penting anda lakukan agar blog anda di blogger mempu ... [
www.fabrie.blogspot.com]
membuat kotak komentar ada foto komentatornyaberikut langkah-langkahnya: klik tata letak,Edit HTML → Sebelumnya ... [
www.fabrie.blogspot.com]
Membuat Related Post Tanpa DuplikatPada tutorial sebelumnya tentang artikel terkait atau related post. P ... [
www.fabrie.blogspot.com]
background dan layout bebeda pada setiap halaman blogMemasang background untuk halaman utamaDi halaman ini ditempatkan ber ... [
www.fabrie.blogspot.com]
Zoom Image Pada Posting Dengan CSS TransitionAda banyak cara untuk membuat zoom image. Bisa menggunakan cara ini ... [
www.fabrie.blogspot.com]

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