Selamat Datang di http://nthoeng.blogspot.com, Terima Kasih Sudah Berkunjung, Jangan Lupa Tinggalkan komentar. | Selamat Datang di http://nthoeng.blogspot.com, Terima Kasih Sudah Berkunjung, Jangan Lupa Tinggalkan komentar. |

Kamis, 16 Februari 2012

Membuat Multi Tab Pada Blog

Pada postingan kali ini saya akan membahas tentang cara membuat multi tab pada blog, multi tab digunakan untuk membuat blog menjadi lebih ringkas dan hemat tempat, dan mudah dalam navigasinya, kerjanya mirip dengan tab pada web browser Anda, di dalam multi tab Anda dapat menyisipkan widget lain, gambar, dan animasi, nah untuk membuatnya ikuti langkah-langkah berikut :

1. Log in ke Blogger.
2. Pilih Rancangan, selanjutnya Elemen Laman, dan klik Tambah Gadget.
3. Pilih Html/Javascript.
4. Masukan script di bawah ini.

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 93px; /* Lebar Kotak Tab */
height: 24px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 5px; /* Posisi Kotak Tab */
background :url('http://i1127.photobucket.com/albums/l628/nthoeng1/menu3.png'); /* Warna background Kotak Tab dapat di ubah menggunakan code warna */
padding-top: 8px; /* Spasi Atas */
border: 0px solid #919191; /* Warna border kotak Tab */
border-bottom: 0px solid #919191; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial;
font-size: 11px;}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #transparent; /* Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #transparent; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #transparent; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 4px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

<style type="text/css"></style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 385px;" class="Tabs">
<a><span title="KETIK TITLE DI SINI"  style="color:#bdbdbd;"><b>TAB 1</b></span></a>
<a><span title="KETIK TITLE DI SINI" style="color:#bdbdbd;"><b>TAB 2</b></span></a>
<a><span title="KETIK TITLE DI SINI" style="color:#bdbdbd;"><b>TAB 3</b></span></a>
</div>
<div style="width: 292px; height: 250px;" class="Pages">

<div class="Page">
<div class="Pad">
Letakan Widget Anda Di Sini

</div>
</div>

<div class="Page">
<div class="Pad">
Letakan Widget Anda Di Sini
</div>
</div>

<div class="Page">
<div class="Pad">
Letakan Widget Anda Di Sini
</div>
</div></div></div></form>

<script style="text/javascript" src="http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>

5. Ganti teks warna hijau dengan Script widget yang akan dipasang.
6. Atur sesuai keinginan Anda, dengan mengedit lebar, tinggi, dan warna.
7. Simpan, dan lihat hasilnya.

Semoga Berhasil !!!

3komentar:

Safitri Nur Rahmimengatakan...

AKu masih gak bisa bikin multi tab... tolong ajari lagi biar multi tab nya kyk blogmu ini dong.... makasih

Zamrud Hijaumengatakan...

Info yang baguz sekali untuk disimak.....
Bermanfaat sekali untuk saya....

Mohon kunjungan baliknya yaa....
Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

( http://zamrudhijau.blogspot.com/ )

Bimo Sukma Perkasamengatakan...

Sipp dah....

*bimosuper.blogspot.com*

Posting Komentar

TwitterDeliciousFacebookDiggStumbleuponFavoritesMore