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:
Thnk's sob, menu nya dah ak pasang di blog ak! Smoga bermanfaat!!
iya terima kasih kembali telah berkunjung.
mas, tutorialnya mantebh banget.... makasiy banyak ya mas.....
iya terima kasih telah berkunjung. semoga bisa membantu.
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 !
biasanya script seperti itu terletak pada tag css atau sebelum "head" . temukan bila ada kata script, dan hapus saja script tersebut. semoga membantu.
makasi tipsnyaa :D
iya terima kasih kembali telah berkunjung. ^_^
Thank's gan infonya,,udah aku pasang,,keren juga ternyata..
ya terima kasih kembali telah berkunjung.
makasi gant,,keren nih kayanya klo di pasang di blog ku..
Thanks Infonya, Sangat Bermanfaat
Info 17 Tahun Keatas
^_^
Ditunggu sob, Follbacknya...
Nice sharing!
Posting Komentar