Wednesday, May 11, 2011

membuat Menu Tab View

uc1n.blogspot.com
 Menu Tab View memungkinkan menampung banyaknya postingan atau artikel pada blog kita dan juga untuk menghemat pemakaian widget, jadi Tab View ini sangat Efisien digunakan karna tidak memerlukan tempat yang besar. Membuatnya sangat sederhana.





Jika tertarik Membuatnya ikuti tutorial berikut ini:
Versi pertama
1.Login ke blogger dengan ID anda
2.Lalu Klik Menu Tata Letak
3.Klik Sub Menu Edit HTML
4.Pada Kotak Edit HTML cari Kode ]]></b:skin> (tekan Ctrl+f masukkan kata yang di cari pada kota find >> klik next)
5.Lalu Copy Kode warna merah  berikut dan Pastekan diatas kode ]]></b:skin>


div.TabView div.Tabs{
height: 24px;
overflow: hidden;}
div.TabView div.Tabs a{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{
background-color: #FF9900; /* Warna background Menu Utama Atas */}
div.TabView div.Pages{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */}
div.TabView div.Pages div.Page{
height: 100%;
padding: 0px;
overflow: hidden;}
div.TabView div.Pages div.Page div.Pad{
padding: 3px 5px;}


6.Lalu letakkan kode berikut  <script src='http://arif45.fileave.com/tabviewbua.js' type='text/javascript'/>
dibawah sebelum kode </head> ( cari dengan tekan Ctrl+f masukkan kata yang di cari pada kota find >> klik next)
7.Simpan Template Anda

8.Pergi ke halaman Element Halaman
9.Klik Tambah Widget Element
10.Pilih Menu HTML/Java Script
11.Lalu Copas kode berikut

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

12. jangan lupa simpan......

Versi Kedua
Berikut langkah-langkahnya:
1.Login ke blogger dengan ID anda
2.Lalu Klik Menu Tata Letak
3.Klik Sub Menu Edit HTML
4.Pada Kotak Edit HTML cari Kode ]]></b:skin> (tekan Ctrl+f masukkan kata yang di cari pada kota find >> klik next)
5.Lalu Copy Kode warna merah  berikut 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;} 


6.Lalu letakkan kode <script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/> berikut dibawah kode <head>

( cari dengan tekan Ctrl+f masukkan kata yang di cari pada kota find >> klik next)7.Simpan Template Anda

8.Pergi ke halaman Element Halaman
9.Klik Tambah Widget Element
10.Pilih Menu HTML/Java Script
11.Lalu Copas kode berikut
 <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>

12. jangan lupa simpan......



sumber:http://www.deddycamp.com/2010/05/cara-membuat-menu-tab-view.html

No comments:

Post a Comment

Category

17 + (27) Acara TV (4) Ada - ada aja (8) Ada ada aja (1) Adidas (1) Adsense (7) Affiliate (1) agnes (2) Aktris (1) Al-Qur'an (1) Alam (2) Alam kita (3) Alat unik (1) Alexa (2) Alexandra (1) Alias (1) Amazon (2) Anak (14) Anang (1) Anastasya (1) Andika (1) Android (2) Anggota (1) Angle Tattoos (1) Antivirus (8) Antivirus Terbaru (8) Apple (2) Apps untuk pelajar/mahasiswa (1) Ariel Peterpan (1) Arifinto (2) Artikel blog (51) Artikel Islam (1) Artikel Menarik (21) Artis (9) Artis Indonesia (3) Artis manca (1) Astronomi (1) Auliani (1) Avatar berbicara (1) Bahasa C (1) Bajak Laut (1) Bandung (1) bangunan (2) barca (2) bayi (1) BB++ (3) belajar ngeblog (34) belajar template (14) Belanja (1) Benda unik (1) berita (1) Berita Aneh (6) Berita Artis (10) Berita Astronomi (2) Berita Dalam negri (2) Berita Dunia (9) Berita Gempa (3) Berita Hewan (15) Berita Internasional (2) Berita Kesehatan (7) berita Lokal (3) Berita Makanan Minuman (14) Berita Moto Gp (1) Berita Olahraga (8) Berita Panas (1) Berita Pendidikan (1) Berita Pengetahuan (2) Berita Renungan (5) Berita Sejarah (6) Berita Selebriti (1) Berita Teknologi (2) Berita Tentang Musik (2) Berita Tumbuhan (1) Berita unik (4) Berita Utama (2) Bieber (1) Bintang (1) Biodata (1) Biografi (2) Bisnis (2) BlackBerry (7) Blog (49) Blogger (62) bola dunia (11) Bola Indonesia (2) bondan (2) Boyband (1) Brondong (1) Browser (1) Buah Unik (3) Budaya Aneh (1) Bugil (1) cangih (1) Cantik (1) Cara Bisnis Online (2) Cara daftar Facebook (1) Cara Recovery Data (2) Cara Self Test Printer (5) Cara Service Komputer (25) Cara Service Laptop (8) Cara Service Monitor (34) Cara Service Ponsel (3) Cara Service Printer (63) Cara Service TV (5) Cara Service UPS (1) Cari $ (16) Celebrity (3) Chrome (2) Clicksor (3) Contoh (1) Coppas Animal (1) Coppas Berita (5) Coppas Extreme (3) Coppas Foto Hot (3) Coppas Lucu (1) Coppas Mistery (1) Coppas Sejarah (1) Coppas Style (2) Coppas Unik (1) Cowok (2) Cukur (1) Cute (5) Definisi dan Sejarah Tattoo (3) Dicukur (1) Dipanggil (1) disappear (1) Domain-Hosting (2) Dosa (1) Download (4) Download Film (2) Download MP3 Gratis (1) Download Software (22) Downloader (1) Dugaan (1) Dugem (1) Dunia (1) Dunia Alam (6) Dunia aneh (5) Dunia Arkeologi (1) Dunia Arkeologi dan Sejarah (1) Dunia Design (3) Dunia Ekonomi (3) Dunia Extream (3) Dunia informasi (6) Dunia Kriminal (2) Dunia Kuliner (3) Dunia Medis (4) Dunia Militer (2) Dunia Misteri (1) Dunia Pendidikan (1) Dunia Rohani (1) Dunia Sejarah (1) Dunia Sosial (7) Dunia Teknologi (6) Dunia Tips Dan Trick (1) Dunia Wanita (2) e-learning (1) Ebook (3) Elizabeth (1) email (3) emas (2) Excel (11) Facebook (8) Fakta Aneh (16) Fakta Dunia (8) Fakta Indonesia (13) Fakta Unik (68) Feed (1) Fenomena unik (1) film (1) Firefox (4) Flash (2) Font (2) Football (1) Fosil (1) Foto (7) Foto Hot (7) Freeware (24) Friendster (1) Funny (1) Funny Pics (15) Gadget (1) gadget blogspot (26) Gadget dan Hanphone (2) gambar (2) Gambar Aneh (1) Gambar Extream (4) Gambar Lucu (1) Gambar Unik (4) Game (1) Games (6) Gathan (1) Gayus (1) Genit (4) Githa (1) Gmail (1) gombal (1) Google (28) Gosip (2) Gossip Celeb (4) Gratis (1) Gumilang (1) Handphone (3) Hantu (1) hardisk (1) Harga (1) Harimau (1) Health (3) hewan unik (6) Hilabi (1) Hollywood (1) Honda (6) Hot (2) Hot Girls (1) Hot News (25) Hot Pics (11) HP (1) HTC (5) html (3) Iblis (1) Ilmuan (2) Indonesia (2) info (11) Info Harga (1) Info Menarik (24) Internasional (1) Internet (19) IP Address (1) iPone (1) Islam (1) Istana (1) Istilah Komputer (1) Jadwal Piala Dunia 2010 (2) Jadwal Puasa (1) Jadwal Sholat (1) Japan (1) Jelita (1) Jennifer (1) Jepang (1) Joanne (1) jQuery (5) Justin (1) Justin Bieber (1) Karena (1) Karier dan Gaya Hidup (1) kartu Natal (1) kartun (1) Kata Lucu (2) Kata Mutiara (1) Katanya ... (5) Kate Middleton (2) Kawasaki Ninja (1) Keajaiban Alam (3) Kebesaran Allah (1) Kecantikan (1) Kecantikan Dan Kesehatan (3) Kejadian Aneh (3) Kekayaan (1) Keramas (1) Keren (7) kereta api (1) Kesehatan (5) kesehatan mata (2) Kisah hewan (1) Kisah Mistis (1) Kisah renungan (4) Knalpot (1) Koleksi (1) Komputer (12) Komputer dan Internet (5) Kontes Aneh (3) kota (1) Kreatifitas (6) Kuliner (1) Kurniawan (1) Lady Gaga (1) Lain-Lain (2) Laut (1) Lebah (1) Legenda (1) Lenovo (1) LG (2) Lifestyle (3) liga Champion (10) liga Inggris (2) Liga Italia (1) link (4) Link Friends (1) Lintas Indonesia (3) Lirik Lagu (1) listrik (1) Lokasi Wisata (4) Lorenza (1) lukisan (1) Madiun (1) maher zain (4) Mahkluk aneh (5) Makan (1) Makanan (1) Malinda (3) Maling (1) Maling ATM (2) manchester united (3) manusia Unik (3) Marcia (1) Mario Teguh (1) Masjid (1) Matematika (1) mempercantik blog (54) Meninggal (1) merokok (1) meta tag (2) Miliar (1) Military (1) minuman (2) Mio (1) Misteri (13) Misteri - Misteri Di Dunia (3) Mistik (1) Miyabi (1) Mobil (34) mobil modifikasi (6) Model (13) Modem ADSL (1) Monetize (16) motivasi (1) Motivasi Dan Inspirasi (1) MotoGP (2) Motor (2) Motor drag (2) motor modifikasi (8) Motorola (1) mp3 (1) Musik (6) Nadine (1) Nafeeza (1) Nakal (4) Narkoba (1) Netbook (2) News (54) Ngakak (1) nganjuk (2) Nokia (2) Nonton (1) Obama (2) Obat jerawat (1) office 2010 (1) Oktaviany (1) Olahraga (1) Olla ramlan (1) Online (1) online ticket (1) Operasi (1) Osama bin laden (7) Otomotif (4) Paid Survey (2) paidreview (2) Panas (1) Panduan Service Monitor I (10) Panduan Service Monitor II (13) PANGERAN WILLIAM (9) Parse (1) Pasukan (1) Payment (1) Paypal (1) PDF (4) Penampakan (1) Pengetahuan (6) Pengetahuan Umum (4) Pengingat Sholat (1) Pengolah Gambar (1) penyakit (1) Perang Dunia Ke II (2) Pernikahan (3) perokok (1) Persipura (1) Pesan (1) Pesawat Tempur (3) Photo (1) Piala Dunia 2010 (2) Ping (1) Plastik (1) Plug-in Wordpress (13) Polisi (1) Ponsel (10) Porno (1) Portable (2) POS UNAS SD-SMP-SMA 2010 (1) Powerpoint (2) Prediksi 2010 (1) Presenter (1) Pria (1) Printer (1) Produk (1) Produk Unik (10) Profil Artis (7) Profil Tokoh (5) Profile (1) Psikotes (1) Pssi (1) Putri (1) Rahmat (1) Read more (1) Rehab (1) Rekor (2) Rekor Dunia (30) related post. tips (3) Resep Minuman (1) Resetter Canon (26) Resetter Epson (18) Resetter HP (5) RSS (2) Rumah unik (1) Sains (2) Sains Dan Antariksa (4) Salley (1) sampah (1) Samsung (9) Science (1) Sebagai (1) Sebelum (1) Sedang (1) Sejarah (4) Sejarah Dunia (1) Sek (1) Sekedar Share (11) sekilas info (2) Seksi (1) Seksiologi (2) Selebritis (1) Selesai (1) Seni Dan Budaya (1) seni unik (1) Senjata (2) SEO (44) Sepeda (1) Sesudah (1) Setelah (1) Sexsualitas (1) Sexy (10) Shaleh (1) Sheila (1) Sistem Tools (1) sms lebaran (2) Software (22) Software HP (4) Softwere (8) Speedy (1) Sport (1) Statistik (1) Suami (2) Sule (1) Sulityo (1) Suster (1) Syahrini (1) Tahukah anda? (60) Tato (1) Tatto Bahu (1) Tattoo Badan (4) Tattoo China (1) Tattoo Dolphin (1) Tattoo Hewan (2) Tattoo Ikan Koi (1) Tattoo Jepang (1) Tattoo Kanji (1) Tattoo Lebah (1) Tattoo Lengan (2) Tattoo Malaikat (1) Tattoo Serangga (1) Tattoo Tengkorak (1) Tattoo Tribal (2) Tattoo Wanita (2) Taukah kamu (2) Taylor (1) Teh (3) Teknologi (3) Telanjang (1) Telkom Promo (1) Telkomsel (1) Template (3) Tempo Dulu (1) Tentang cinta (2) Tercantik (1) Terima (1) Timur Tengah (1) tingkah laku (1) Tinju (1) tip blogspot (2) tip tidur (1) Tip Trik Internet (8) Tip Trik Windows (7) tips (166) Tips and Trik (10) Tips Blog (1) Tips Cinta (1) Tips Dan Info (6) Tips Dan trick (5) Tips Dan Trik (3) Tips Diet (1) Tips Hamil (1) Tips Kecantikan (1) Tips Kesehatan (9) tips modif motor (2) Tips Suami Istri (5) Tips Unik (2) Tools (8) Topless (1) Tradisional (1) Tragedi (1) TRANS7 (1) Translator (4) Tribal Tattoos (3) Trik Blog (15) Tsunami (1) Tukang (1) Tumbuhan (1) tutorial blog (32) Twiter (3) Ujian Nasional (1) Ular (1) Uncategorized (2) Unik (4) Unik Dan Aneh (7) Update Antivirus (8) Upskrit (1) Usaha (1) Utility (1) Video (1) video Bola (3) Video Extream (1) Video Klip (2) Video mesum (4) Video unik (7) virus (3) Wakaka (2) Wanita (1) Warta Terkini (9) Warteg (1) Widget (2) windows (26) windows 7 (3) Wisata Dunia (2) WP (1) Yamaha (3) Ziddu (7) ZTE (1)