Trik Blogger | Membuat Tab View
Sekarang kita mulai trik blogger membuat tab view dalam blog :
- Login dulu ke account blogger kamu
- Pilih tab Tata Letak --> Edit HTML.
- Copy kode berikut dan pastekan di atas kode ]]>
div.TabView div.Tabs {
width:350px;
height: 24px;
overflow: hidden; }
div.TabView div.Tabs a {
float: left;
display: block;
width:90px;
text-align: center;
height: 24px
margin-left:3px;
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border: 1px solid #666666;
border-bottom-width: 0;
text-decoration: none;
font: 12px "Arial", Times New Roman, Serif;
color: #000;
font-weight: 900; }
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #DDDDDD; }
div.TabView div.Pages {
width:350px;
height: 250px;
clear: both;
background-color: #FFFFFF;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border: 1px solid #666666;
overflow: hidden; }
div.TabView div.Pages div.Page {
height: 100%;
padding: 0;
overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; }
Catatan :width:
height: 24px;
overflow: hidden; }
div.TabView div.Tabs a {
float: left;
display: block;
width:
text-align: center;
height: 24px
margin-left:3px;
padding-top: 3px;
vertical-align: middle;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
border: 1px solid #666666;
border-bottom-width: 0;
text-decoration: none;
font: 12px "Arial", Times New Roman, Serif;
color: #000;
font-weight: 900; }
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #DDDDDD; }
div.TabView div.Pages {
width:
height: 250px;
clear: both;
background-color: #FFFFFF;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border: 1px solid #666666;
overflow: hidden; }
div.TabView div.Pages div.Page {
height: 100%;
padding: 0;
overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; }
- Kode berwarna hijau merupakan ukuran Tab-view, rekomendasi: usahakan ukuran
width
yang berwarna hijau sama. - Kode yang berwarna merah bisa diganti dan sesuaikan dengan template blog kamu.
- Silakan kamu edit kode di atas (ditambah atau dikurangi) dan berkreasi dengan atribut lain, atau kalau kamu merasa sudah sesuai biarkan apa adanya.
- Untuk pemilihan warna, kamu dapat melihatnya di kode warna ini.
- Copy kembali kode berikut di atas kode
- Simpan template kamu.
- Kemudian pilih tab Elemen Halaman --> Tambah Gadget.
- Jendela Tambahkan Gadget akan muncul --> HTML/JavaScript.
- Copy dan paste kode di bawah ini.
- Sekarang lihat tab view dalam blog kamu
Catatan :
- Kode yang berwarna merah merupakan teks yang letaknya dalam Tab.
- Kode yang berwarna biru adalah tampilan teks yang akan muncul dalam halaman view sesuai dengan Tab terpilih.
Selamat membuat tab view...
0 komentar:
Posting Komentar