09 Juni 2009

MEMBUAT SLIDE TABVIEW

Menampilkan Slide TabView pada halaman depan blog kita sepertinya memiliki daya pikat tersendiri bagi pengunjung blog. Itu dikarenakan, kita bisa melihat langsung gambar yang terpasang sekaligus bisa membaca intisari berita / info yang disampaikan penuslis. Selain itu kita tidak perlu repot untuk memilih / memindah gambar sekaligus informasinya. Karena tampilannya berpindah sendiri secara otomatis. Nah, bagi kamu2 yang tertarik untuk menampilkan slide tabview ini, dapat mengikuti langkah-langkahnya sebagai berikut :


1. Login dulu ke acount blogger sobat, atau bila sobat sudah berada dihalaman muka blog, silahkan klik tab kustomisasi, pilih tata letak, lalu pilih EDIT HTML
2. Contreng kotak yang bertuliskan "Expand Template Widget"
3. Kemudian cari kode berikut : ]]> </b:skin>

Untuk pencarian cepat tekan saja tombol F3 pada keyboard, masukan kode diatas, lalu enter, nanti secara otomatis akan terarah sendiri ke kode yang dicari.

selanjutnya, COPY kode dibawah ini dan paste diatas / sebelum kode diatas :

.indentmenu{
font: bold 10px Arial;
width: 100%; /*leave this value as is in most cases*/

}

.indentmenu ul{
margin: 2px;
padding: 0px;
float: left;
/* width: 50%; width of menu*/
background: transparent;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
margin: 0px 3px 0px 0px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #000000;
}

.indentmenu ul li a:hover{
background:#2E9AFE;
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #2E9AFE;
background:#2E9AFE;
}

.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px; /*panjang tab*/
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}

Sampai disini, tahapan memasukan kode sudah selesai, selanjutnya simpan perubahan tamplate.

Langkah kedua adalah membuat halaman baru untuk menampilkan Slide TabView dihalaman depan blog. Tahapannya adalah sbb :
  • Klik Tata Letak >>>>>>Pilih tambah elemen halaman
  • Klik tambah Gadget ( terserah mau diletakkan dimana, tapi biasanya pada halaman sidebar atau pada halaman footer )
  • Akan muncul box pilihan gadget >>>>>> pilih HTML / JavaScript
  • Kemudian copy paste kode yang ada disini
  • Simpan / Save
Coba lihat ... apakah sudah berhasil ... selamat mencoba


Tidak ada komentar:

Posting Komentar