Purba My ID

Cara memasang multy tab (3 tab) pada new template



CARANYA : Tambah halaman, copykan semua script di bawah ini :

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 95px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #222222; /* Warna background Kotak Tab */
padding-top: 5px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span style="color:white">Komputer</span></a>
<a><span style="color:white">Anti Virus</span></a>
<a><span style="color:white">Aplikasi PC</span></a>
<a><span style="color:white">Mobile / Hp</span></a>
<a><span style="color:white">Tips Facebook</span></a>
<a><span style="color:white">Tips Friendster</span></a>
<a><span style="color:white"><blink>NEW</blink> Artikel</span></a>
<a><span style="color:white">Tips/Trik Blog</span></a>
</div>
<div style="width: 300px; height: 300px;" class="Pages">

<div class="Page">
<div class="Pad">
<li><a href="http://adidolok.blogspot.com/2009/09/sejarah-terjadinya-komputer.html" class="selected" rel="dog1">01. sejarah-terjadinya-komputer bag 1</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/sejarah-terjadinya-komputer-bag-2.html" class="selected" rel="dog1">02. sejarah-terjadinya-komputer bag 2</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/sejarah-internet.html" class="selected" rel="dog1">03. sejarah-internet</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/flashdisc-jumbo-128-gb.html" class="selected" rel="dog1">04. flashdisc-jumbo-128-gb</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/membuat-snapshot-di-windows-xp.html" class="selected" rel="dog1">05. Membuat Snapshot di Windows</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="http://adidolok.blogspot.com/2009/09/anti-virus-kaspersky-7.html" class="selected" rel="dog1">01. Kaspersky 7</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/smadav-2009-rev-64.html" rel="dog2">02. SmadAV 6.4 New</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/anti-virus-untuk-komputer.html" rel="dog3">03. clamxAv</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/bitdefender-antivirus.html" rel="dog4">04. bitdefender</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/kaspersky-antivirus.html" rel="dog4">05. Kaspersky</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/webroot-antivirus.html" rel="dog4">06. webroot</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/eset-nod32.html" rel="dog4">07. nod32</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/avg-antivirus.html" rel="dog4">08. avg</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/vipre-antivirus-antispyware.html" rel="dog4">09. vipre</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/f-secure-antivirus.html" rel="dog4">10. f-secure</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/trend-micro.html" rel="dog4">11. trend-micro</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/mcafee-virusscan.html" rel="dog4">12. mcafee</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/norton-antivirus.html" rel="dog4">13. norton</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="http://adidolok.blogspot.com/2009/09/tools-untuk-menganalisa-suatu-virus.html" rel="dog3">01. 12 aplikasi untuk mendeteksi virus</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/software-untuk-mengedit-teks-di-pdf.html" class="selected" rel="dog1">02. Edit file pdf</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/membuat-windows-xp-menjadi-berbahasa.html" rel="dog2">03. Membuat windows XP berbahasa indonesia</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/menyimpan-data-di-gambar.html" rel="dog3">04. Menyimpan data di dalam gambar</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/defrag-your-hardisk-with-faster.html" rel="dog4">05. Defrag hard disc mu lebih cepat</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="http://adidolok.blogspot.com/2009/09/aplikasi-hp.html" rel="dog4">01. Opera 4</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/anti-virus-for-hp.html">02. 11 Anti Virus untuk Hp Symbian</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/aplikasi-facebook-friendster-dan.html">03. aplikasi-FB, FS dan Twitter jadi satu</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/opera-mini-42-vs-ucweb-63.html">04. opera mini 4.2 vs ucweb 63</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/aplikasi-al-quran-dan-terjemahnya.html">05. aplikasi-al-quran-dan-terjemahnya</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/aplikasi-untuk-chating-melalui-hp.html">06. aplikasi-untuk-chating-melalui-hp</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/preview-n97-dengan-facebook.html">07. Preview N97 dengan Facebook</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="http://adidolok.blogspot.com/2009/09/sejarah-facebook.html" rel="dog4">01. SEJARAH FACEBOOK</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/cara-daftar-facebook.html" rel="dog4">02. CARA DAFTAR FACEBOOK</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/fitur-fitur-yang-ada-di-fb.html" rel="dog4">03. PENJELASAN FITUR UNTUK PEMULA</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/mengatasi-email-yang-masuk-dari-fb.html" rel="dog4">04. MEMBATASI EMAIL YANG MASUK</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/personalisasi-alamat-facebook.html" rel="dog4">04. PERSONALISASI ALAMAT FACEBOOK</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/cara-setting-alamat-facebook.html" rel="dog4">05. SETTING ALAMAT FACEBOOK</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/cara-mengganti-alamat-facebook.html" rel="dog4">06. MENGGANTI ALAMAT FACEBOOK</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/login-facebook-dengan-alamat-fb-anda.html" rel="dog4">07. LOGIN DENGAN ALAMAT FB ANDA</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/gambar-emotions-facebook.html" rel="dog4">08. GAMBAR EMOTIONS FB</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/penyebab-akun-facebook-kadang.html" rel="dog4">09. PENYEBAB FB DIHAPUS</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/merubah-tampilan-facebook.html" rel="dog4">10. MERUBAHA TAMPILAN FB</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/jumlah-pendaftar-alamat-facebook.html" rel="dog4">11. JUMLAH PENDAFTAR ALAMAT BARU</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/download-ratusan-foto-orang-lain-di-fb.html" rel="dog4">12. DOWNLOAD FOTO ORANG LAIN DI FB</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/membuat-group-facebook.html" rel="dog4">13. MEMBUAT GROUP TEMAN KITA</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/menghubungkan-fb-dengan-blog-kita.html" rel="dog4">14. MENGHUBUNGKAN FB DENGAN BLOG</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="http://adidolok.blogspot.com/2009/09/membuat-pesan-selamat-datang-di-fs.html" rel="dog4">01. membuat-pesan-selamat-datang-di-fs</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/membuat-pesan-good-bye-di-fs.html" rel="dog4">02. membuat-pesan-good-bye-di-fs</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/merubah-bentukwarna-huruf-di-fs.html" rel="dog4">03. merubah-bentuk warna-huruf-di-fs</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/membuat-link-di-fs.html" rel="dog4">04. membuat-link-di-fs</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/membuat-list-feature-friend-bergerak.html" rel="dog4">05. membuat-list-feature-friend-bergerak</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/membuat-tulisan-kedap-kedip-main-mata.html" rel="dog4">06. membuat-tulisan-kedap-kedip</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/membuat-tulisan-terbalik-di-fs.html" rel="dog4">07. membuat-tulisan-terbalik-di-fs</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/pasang-mp3-mu-di-friendster.html" rel="dog4">08. pasang-mp3-mu-di-friendster</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/tempat-hosting-js-dan-css.html" rel="dog4">09. tempat-hosting-js-dan-css</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/membuat-tulisan-profile-di-fs-ke-tengah.html" rel="dog4">10. membuat-tulisan-profile-di-fs-ke-tengah</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/memasang-quick-comment.html" rel="dog4">11. memasang-quick-comment</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/membuat-scrool-comment.html" rel="dog4">12. membuat-scrool-comment</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/melihat-profil-seseorang.html" rel="dog4">13. melihat-profil-seseorang</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="http://adidolok.blogspot.com/2009/09/akibat-terlalu-sering-onani.html" rel="dog4">01. akibat-terlalu-sering-onani</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/download-ribuan-film.html" rel="dog4">02. download-ribuan-film</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/maria-ozawa-datang-ke-indonesia.html" rel="dog4">03. maria-ozawa-datang-ke-indonesia</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/kumpulan-sms-ucapan-lebaran.html" rel="dog4">04. kumpulan-sms-ucapan-lebaran</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/web-server-dengan-xampp-v170.html" rel="dog4">05. web-server-dengan-xampp-v170</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/anang-vs-krisdayanti.html" rel="dog4">05. anang-vs-krisdayanti</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="http://adidolok.blogspot.com/2009/09/cara-memasang-multy-tab-3-tab-pada-new.html" class="selected" rel="dog1">01. Cara membuat Multi Tab</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/cara-memasang-page-rank-di-blog.html" class="selected" rel="dog1">02. Cara memasang Page Rank bag 1</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/cara-memasang-page-rank-di-blog-bag-2.html" class="selected" rel="dog1">03. Cara memasang Page Rank bag 2</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/cara-chating-menggunakan-yahoo-di.html" class="selected" rel="dog1">04. Memasang YM di Blog</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/cara-bertukar-kode-link.html" class="selected" rel="dog1">05. Cara bertukar Link</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/cara-menghilangkan-gambar-obeng-dan.html" class="selected" rel="dog1">06. Menghilangkan icon obeng/tang</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/menghilangkan-tulisan-label-pada.html" class="selected" rel="dog1">07. Menghilangkan label tulisan pada posting</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/membuat-teks-berjalan.html" class="selected" rel="dog1">08. membuat teks berjalan</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/membuat-arsip-blog-model-scrool_17.html" class="selected" rel="dog1">09. membuat arsip blog model-scrool</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/cara-menghilangkan-angka-di-arsip.html" class="selected" rel="dog1">10. menghilangkan angka di arsip</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/cara-memasukkan-kode-html-ke-dalam.html" class="selected" rel="dog1">11. memasukkan kode html kedalam tulisan</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/cara-membuat-read-more.html" class="selected" rel="dog1">12. cara membuat read more</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/memasang-gambar-emotions-pada-kotak.html" class="selected" rel="dog1">13. gambar emotions pada kotak komentar</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/label-blogger-merupakan-hal-yang-sudah.html" class="selected" rel="dog1">14. cara menghilangkan angka pada label</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/agar-blog-dikenal-search-engine.html" class="selected" rel="dog1">15. agar blog dikenal search engine</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/aliran-informasi-dari-komunitas-blog.html" class="selected" rel="dog1">16. Membuat menu dropdown</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/cara-menampilkan-judul-posting-tanpa.html" class="selected" rel="dog1">17. judul posting tanpa isi halaman</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/situs-untuk-iklan.html" class="selected" rel="dog1">18. cara memasang iklan di blog kita</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/cara-mengganti-warna-dan-font-template.html" class="selected" rel="dog1">19. cara mengganti warna dan tulisan blog</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/memasang-shoutbox-di-blog.html" class="selected" rel="dog1">20. memasang shoutbox di blog</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/alexa-dan-kegunaannya.html" class="selected" rel="dog1">21. Alexa dan kegunaannya</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/cara-buat-link-otomatis-2.html" class="selected" rel="dog1">22. Buat link Otomatis dgn Mister Linky's</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/melihat-siapa-pengunjung-blog-kita.html" class="selected" rel="dog1">23. Melihat Siapa Pengunjung Blog kita</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/membuat-snap-shot.html" class="selected" rel="dog1">24. Membuat Snapshot atau Preview</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/trik-menaikkan-ranking-alexa.html" class="selected" rel="dog1">25. trik-menaikkan-ranking-alexa</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/apa-itu-alexa-dan-traffic-rank.html" class="selected" rel="dog1">26. apa-itu-alexa-dan-traffic-rank</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/membuat-kotak-label-jadi-model-cloud.html" class="selected" rel="dog1">27. membuat-kotak-label-jadi-model-cloud</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/buat-script-google-di-blog.html" class="selected" rel="dog1">28. Menampilkan Web lain di blog kita</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/membuat-kotak-label-jadi-model-cloud.html" class="selected" rel="dog1">29. membuat-kotak-label-jadi-model-cloud</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/cara-daftarkan-blog-ke-yahoo.html" class="selected" rel="dog1">30. cara-daftarkan-blog-ke-yahoo</a></li>
<li><a href="http://adidolok.blogspot.com/2009/09/cara-membuat-text-area.html" class="selected" rel="dog1">31. cara-membuat-text-area</a></li>
</div>
</div>
</div></div></form>

<script style="text/javascript" src="http://www.geocities.com/leo_host/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>

Posting Komentar

0 Komentar