belajar bloging: Cara menampilkan halaman lain di blog (Tab Document Viewer)

Pertanyaan diatas disampaikan salah satu sahabat blogger di shoutbox, yaitu bagaimana menampilkan halaman lain di blog kita, biasanya ini dinamakan Document Viewer. Gunanya buat apa om? *sambil garuk-garuk kepala* buat apa ya? mungkin buat aksesoris tambahan aja. Menurut om kayaknya aksesoris ini gak terlalu berguna selain itu juga bikin lambat loading page. Namum tidak ada salahnya kita mencoba membuat Document Viewer ini sekalian aja buat nambah ilmu untuk belajar koding :)

Agar gak bingung kita lihat gambar dibawah:

Contoh tampilan tab document viewer.

Halaman yang kita buat nantinya merupakan Tab Dokumen Viewer, setiap tab akan mempunyai link tersendiri yang bisa kita modifikasi.

Ikuti langkah dibawah ini:

LANGKAH I.

Buka Template -> Edit HTML -> masukan kode CSS dibawah diantara kode CSS yang ada pada coding blogger kita, biasanya di antara code ....

/*Eric Meyer's based CSS tab*/
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}
#tablist li a:link, #tablist li a:visited{
color: navy;
}
#tablist li a:hover{
color: #000000;
background: #C1C1FF;
border-color: #227;
}
#tablist li a.current{
background: lightyellow;
}