Biasanya kita suka menyimpan beberapa artikel yang kita buat atau kita juga sering membuat beberapa kotak untuk beberapa link teman - teman kita. Nah seperti yang kita ketahui format pembuatan link ataupun artikel yang kita buat suka memakan banyak tempat membuat aksen yang kurang rapi buat blog kita.
Untuk itulah kali ini gue coba buat format "tabview link friend or your articel ", yang gue dapet dari beberapa suhu blog seperti artikelnya Tips Trik Blogging, O-om dan mas Anas..tapi tentunya dengan beberapa sedikit perubahan yang coba gue sesuaikan.
OK, untuk langkah pertama kamu login kedalam account blog kamu, dan masuk ke area "edit HTML" kemudian masukkan kode dibawah ini. sebelum code ]]></b:skin>
Untuk itulah kali ini gue coba buat format "tabview link friend or your articel ", yang gue dapet dari beberapa suhu blog seperti artikelnya Tips Trik Blogging, O-om dan mas Anas..tapi tentunya dengan beberapa sedikit perubahan yang coba gue sesuaikan.
OK, untuk langkah pertama kamu login kedalam account blog kamu, dan masuk ke area "edit HTML" kemudian masukkan kode dibawah ini. sebelum code ]]></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;}
langkah selanjutnya adalah kamu copy lagi code berikut, namun letakkan sebelum kode </head>
<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>Kemudian Simpan.
- Nah pada langkah yang sudah kamu lakukan tadi, langkah terakhir yang harus kamu lakukan adalah klik menu "Page Element"
- Klik "Add a Gadget",kemudian pilih "Edit HTML" dan coba Copy kode berikut kedalam Gadget yang sudah kamu pilih tadi :
<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>
- Terakhir kamu simpan deh.....
nb : kode berwarna hijau adalah judul dari masing - masing kolom yang akan kamu isi
0 Response to "Teknik membuat TabView"
Post a Comment
Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..