Update 09 April 2011: Terima kasih telah berkunjung ke blog saya,maaf untuk ketidak nyamanannya karena blog dalam masa pembangunan. mohon dukungan dan motivasinya ya.... ^_^, salam: aziz imammudin rhamadhan.
Adsense Indonesia ads Internet Marketing - Online ads ads
Bookmark and Share
Banyak yang telah membahas tentang cara memasang tab view versi 2 yang dipopulerkan dan dibuat oleh ateonsoft.com ini dan mungkin posting saya kali ini sudah basi tapi karena sedang tidak berniat untuk memposting atikel yang lain makanya saya posting tentang cara memasang tab view versi 2 by ateonsoft pada blog. Manfaat dari tab view versi 2 ini  adalah dapat menghemat pemakaian ruang template dan sidebar serta didalamnya dapat diisi dengan konten blog yang berupa link, gambar, teks, dan lain-lain. dan juga bisa memberikan sesuatu yang rapi dengan tampilan tab view yang lebih populer ini. Sebagai contoh bisa dilihat pada widget diblog saya yang berjudul "Daftar Posting" dan untuk cara membuatnya silahkan ikuti langkah-langkah berikut:



Tab view versi 2 by ateonsoft.com 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 buatan ateonsoft.com. Langsung sajai ikuti langkah-langkah dibawah ini untuk membuat tab view versi 2 by ateonsoft:

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 kode 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 paste kan pada kolom Html/Javascript yang tersedia tadi dan sekarang tinggal di Save dan disetting sesuai dengan kreatifitas dan keinginan kalian sendiri, maaf jika banyak kalimat yang kurang dimengerti disebabkan karena kondisi mata saya yang sudah ingin terlelap dalam tidur, hehehe. alias sudah ngantuk berat. selamat mencoba dan semoga bermanfaat.
Sedikit tips: Pada setiap kode html maupun script diatas dibagian warna, ukuran border, lebar, tinggi, dapat kalian edit sesuai dengan keinginan kalian. mungkin kalian tidak perlu mengubahnya dahulu untuk melihat hasil defaultnya cukup lakukan langkah-langkah diatas dan setelah melihat hasilnya dan berhasil, barulah kalian bisa menyesuaikan semua yang ingin kalian ubah. Selamat berkreatifias!



Silahkan klik tulisan "Poskan komentar" untuk berkomentar. saya menggunakan menu komentar dengan form pop-up agar tidak mengganggu aktifitas membaca kalian. terima kasih

14 comments:

Zeus Osiris mengatakan...

Thnk's sob, menu nya dah ak pasang di blog ak! Smoga bermanfaat!!

aziz imammudin rhamadhan mengatakan...

iya terima kasih kembali telah berkunjung.

lanankz mengatakan...

mas, tutorialnya mantebh banget.... makasiy banyak ya mas.....

aziz imammudin rhamadhan mengatakan...

iya terima kasih telah berkunjung. semoga bisa membantu.

secretkingdom mengatakan...

waduh,gw lagi make script yg gk bisa block + klick kanan ni...kaga bisa di pencet tu jadi nya...
ketemu script laen,tp gk ngudeng cara make nya...tolong bantuannya ya !

aziz imammudin rhamadhan mengatakan...

biasanya script seperti itu terletak pada tag css atau sebelum "head" . temukan bila ada kata script, dan hapus saja script tersebut. semoga membantu.

ukhra mengatakan...

makasi tipsnyaa :D

aziz imammudin rhamadhan mengatakan...

iya terima kasih kembali telah berkunjung. ^_^

Blog Ojaa mengatakan...

Thank's gan infonya,,udah aku pasang,,keren juga ternyata..

aziz imammudin rhamadhan mengatakan...

ya terima kasih kembali telah berkunjung.

Blog oReo mengatakan...

makasi gant,,keren nih kayanya klo di pasang di blog ku..

Info 17 Tahun Keatas mengatakan...

Thanks Infonya, Sangat Bermanfaat
Info 17 Tahun Keatas

aziz imammudin rhamadhan mengatakan...

^_^

CienTriks Blog mengatakan...

Ditunggu sob, Follbacknya...
Nice sharing!

Selamat Datang Disitus Aziz

Selamat datang di situs saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya yang sangat sederhana ini. mohon maaf jika informasi yang disediakan sangat minim, dikarenakan kemampuan saya yang masih kurang, mari saling berbagi. semoga blogger indonesia bisa bersaing dengan blogger internasional lainnya. sukses slalu untuk semua.

Sekilas tentang penulis

Nama saya Aziz Imammudin Rhamadhan, saya seorang mahasiswa yang masih menuntut ilmu di salah satu perguruan tinggi di Bandung, salam kenal.

Aziz