Modifikasi Tab View dengan variasi background

Tab View ini merupakan tambahan dari posting Cara mudah membuat TAB VIEW WIDGET dengan penambahan berupa variasi background baik pada menu maupun kota utama.

Langkah Pertama

• Login ke akun Blogger kamu.
• Dari halaman dashboard, pilih Edit HTML.
• Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
• Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut..

/* Menu Tab View */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: right;
display: block;
width: 100px; /* ukuran lebar menu */
text-align: center;
height: -24px; /* ukuran tinggi menu */
padding-top: 3px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #6E6E6E; /* warna border menu */
border-bottom-width: 1px solid #6E6E6E;;
font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */
font-size: 12px; /* besar hurup menu */
letter-spacing: -1px;
background : transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/DeepSea.gif) repeat scroll 0 0; /* warna latar menu */
color: #FAAC58; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:2px;
}
div.TabView div.Tabs a.Active {
background : transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/Golden.gif) repeat scroll 0 0; /* warna background menu aktif */
color: #66B5FF;
}
div.TabView div.Tabs a:hover {
background : transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/YellowContrast.gif) repeat scroll 0 0; /* warna background menu hover */
color: #B45F04;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #6E6E6E; /* warna border kotak utama */
overflow: hidden;
background: transparent url("http://lh4.ggpht.com/_wC8_9aR_6uE/Swl_FKbmLPI/AAAAAAAABxI/yoohAxlj0Q8/s640/columns_dark.jpg"); /* 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;
font-size: 12px; /* besar hurup kotak utama */
}

Pada bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran, warna maupun jenis huruf.

• warna merah, URL Image background ( disesuaikan dengan warna dan tema blog silakan diganti dengan image yang sesuai.
• warna orange, kode warna background ( disesuaikan dengan warna dan tema blog silakan diganti dengan warna yang sesuai. ( dapatkan kode warna disini )
• warna hijau,  ukuran untuk menu utama ( bentuk ujung lengkung / kotak, makin besar angka makin lengkung )

Langkah Kedua 

• untuk langkah selanjutnya bisa kamu lihat pada posting Cara mudah membuat TAB VIEW WIDGET.
• Lihat contoh penggunaan ------------------->  SAMPLE BLOG

Selamat Mencoba...!! 

Tahapan Perhitungan Rencana Anggaran BIaya Konstruksi

Dalam penyusunan anggaran biaya suatu rancangan bangunan biasanya dilakukan 2 (dua) tahapan yaitu :

• Estimasi Biaya Kasar, yaitu penaksiran biaya secara global dan menyeluruh yang dilakukan sebelum rancangan bangunan dibuat.
• Perhitungan Anggaran Biaya, yaitu penghitungan biaya secara detail dan terinci dsesuai dengan perencanaan yang ada.

Tahapan Estimasi Biaya

Penaksiran anggaran biaya yang dilakukan adalah melakukan proses perhitungan volume bangunan yang akan dibuat, harga  satuan standar dari tipe bangunan dan kualitas finishing bangunan yang akan dikerjakan.
Karena taksiran dibuat sebelum dimulainya rancangan bangunan, maka jumlah biaya yang diperoleh adalah taksiran kasar biaya bukan biaya sebenarnya atau actual, sebagai contoh:

• Jenis bangunan dengan standar bangunan kelas A, maka harga satuan standarnya adalah @ Rp 1.500.000,-/m2, Luas bangunan 100 m2, maka asumsi biaya yang dibuat adalah : luas bangunan dikalikan dengan harga satuan standar, yaitu: 100 x @Rp 1.500.000,-/m2 = Rp 150.000.000,-

Tahapan Perhitungan Anggaran Biaya

Perhitungan anggaran terperinci dilakukan dengan cara menghitung volume dan harga-harga dari seluruh pekerjaan yang harus dilaksanakan, agar nilai bangunan dapat dipertanggung jawabkan  secara benar dan optimal. Cara penghitungan yang benar adalah dengan menyusun semua komponen pekerjaan mulai dari tahapan awal pembangunan (Pekerjaan persiapan) sampai dengan tahapan penyelesaian pekerjaan (Pekerjaan Finishing), contoh:

1. Pekerjaan Persiapan terdiri dari: pembersihan lahan, cut and fill, pagar pengaman, mobilisasi dan demobilisasi.
2. Pekerjaan Sipil, terdiri dari pondasi, sloof, kolom, dinding dan rangka penutup atap.
3. Pekerjaan finishing, terdiri dari lantai, dinding, plafond dan penutup atap.
4. Pekerjaan Instalasi Mekanikal, Elektrikan dan Plumbing, terdiri dari jaringan listrik, telepon, tata suara, tata udara, air bersih dan air kotor.
5. Pekerjan luar/halaman, terdiri dari perkerasan jalan, jalan setapak, pagar halaman dan taman.

Cara penghitungan setiap item pekerjaan tersebut di atas biasanya dibuat berdasarkan jenis material dan komponen pekerjaan, misal:

1. Komponen beton, cara penghitungannya dilakukan dengan membuat perhitungan volume secara satuan isi (m3), dikalikan dengan harga satuan per m3 yang disusun berdasarkan analisa penggunaan material per m3 @ Rp m3)
2. Komponen material lantai, dinding dan plafond dilakukan dengan menghitung luasan area yang ada (m2) dikalikan dengan harga satuan per m2 yang disusun berdasarkan analisa penggunaan bahan per m2 ( @ Rp/m2)
3. Komponen material pekerjaan finishing seperti tali air, talang air, jaringan pipa dan pengkabelan dilakukan dengan menghitung panjang bahan yang dipakai (m1) dikalikan dengan harga satuan material perm1 (@ Rp/m1)
4. Komponen material besar seperti daun pintu, jendela dan peralatan dilakukan dengan menghitung jumlah material yang dipakai (unit) dikalikan dengan harga satuan material per-unitnya (@ Rp/unit), bisa juga dengan perhitungan volume secara detail, yaitu : kusen (m3), daun pintu (m2), kaca (m2), daun jendela (m2), perlengkapan lainnya (bh). termasuk finishing.
5. Komponen material yang sulit dihitung tetapi harus dikerjaan dilakukan dengan menentukan status lumpsum (ls), artinya untuk pekerjaan itu nilai besaran ditentukan berdasarkan cakupan pekerjaan harus dikerjakan sesuai dengan yang dikekendaki oleh perancang, biasanya komponen ini tidak ada harga satuannya tetapi langsung menyebutkan nilai total dari komponen pekerjaan tersebut.
6. Usahakanlah untuk menghitung secara detail karena akan lebih akurat dan cenderung hemat.

Penghitungan  anggaran biaya pada umumnya dibuat berdasarkan 5 hal pokok, yaitu:

1. Taksiran biaya bahan-bahan. Harga bahan-bahan yang dipakai biasanya harga bahan-bahan di tempat pekerjaan, jadi sudah termasuk biaya transportasi atau angkutan, biaya bongkar muat.
2. Taksiran biaya pekerja. Biaya pekerja sangat dipengaruhi oleh: panjangnya jam kerja, keadaan tempat pekerjaan, ketrampilan dan keahlian pekerja yang bersangkutan terutama dalam hal upah pekerja.
3. Taksiran biaya peralatan. Biaya peralatan yang diperlukan untuk suatu jenis konstruksi haruslah termasuk didalamnya biaya pembuatan bangunan-bangunan sementara (bedeng), mesin-mesin, dan alat-alat tangan (tools).
4. Taksiran biaya tak terduga atau overhead cost. Biaya tak terduga biasanya dibagi menjadi dua jenis, yaitu: biaya tak terduga umum dan biaya tak terduga proyek.
5. Taksiran keuntungan atau profit. Biaya keuntungan untuk pemborong atau kontraktor dinyatakan dengan prosentase dari jumlah biaya total yang berkisar antara 8-15%.

Uraian di atas adalah sedikit dari Tahapan Perhitungan Rencana Anggaran Biaya Konstruksi.
Semoga bisa bermanfaat...!!!

Silakan isi kolom  komentar untuk menyampaikan pendapat kamu agar isi blog ini makin berbobot.
Terimakasih ....

Trend Arsitektur tahun 2010

Selama ini yang kita kenal adalah trend busana/fashion, baik bentuk warna maupun bahan yang dipakai, Apakah dalam dunia Arsitektur juga ada trend yang serupa ?

Trend adalah sesuatu yang sifatnya sementara dan hanya akan bertahan dalam satu masa tertentu, bahkan mungkin hanya merupakan dari trik marketing untuk membuat konsumen mengarah pada produk tertentu,

Dunia property juga tidak bisa lepas dari ikatan kepentingan bisnis dan adanya istilah trend arsitektur adalah salah satu contohnya, kalau kita analisa dengan adanya tren arsitektur, maka pengembang properti lebih mudah dan terarah dalam menjual produknya. Asal mengikuti trend maka propertinya pasti laku. Begitu pula dengan media arsitektur. Dengan membahas  trend arsitektur, maka medianya akan laku karena orang ingin tahu, seperti apa trend arsitektur itu, terlepas apakah makna yang disampaikan tentang trend itu benar atau keliru.

Misalnya, tren arsitektur minimalis yang masih hangat terdengar. 

Betulkah properti yang dijual dengan sebutan minimalis itu benar-benar minimalis? Ternyata lebih banyak yang keliru, walaupun ada juga pengembang properti yang memberikan pemahaman tentang minimalis dengan benar. Apa saja dapat dengan mudah disebut minimalis agar laku, walaupun sebetulnya sama sekali tidak minimalis. apalagi masyarakat memang bangga dan senang membeli properti yang sesuai dengan tren arsitektur yang ada agar tidak dianggap ketinggalan zaman.

 

Bagaimana dengan trend untuk tahun 2010 ? 
_______________________________________________________

Terjadinya issue "Pemanasan global" akhir akhir ini juga cukup berpengaruh terhadap trend dalam dunia arsitektur, Kecenderungan masyarakat yang meningkat dalam hal kesadaran dan menghargai lingkungan membuat issue ini masih dominan. Penggunaan material yang bersahabat dengan lingkungan, pemaksimalan tata udara dan taat cahaya alami, efisiensi ‘life-cost’ setelah bangunan berdiri serta pengurangan limbah dalam proses bertinggal menjadi sub issue yang berkenaan dengan issues tadi.

Dari sisi arsitek sebagai desainer, issue ini menjadi menarik, Arsitek dapat ‘bermain’ menggunakan material dan bentuk untuk mengakomodasi issue ini. Disamping itu kini berkembang keinginan dikalangan arsitek untuk menggunakan material yang sederhana akan tetapi memiliki muatan lokal (local content) yang lebih banyak. Istilah kembali ke alam akan menjadi tema yang cukup sentral untu beberapa waktu kedepan. 

Untuk warna di tahun 2010 ini akan lebih tertuju pada warna yang alami ( back to nature ), seperti warna abu muda, coklat pupus, hijau pupus, orange, kuning lime. Selain melambangkan alam, warna ini dapat dipakai sebagai warna dasar selain warna putih dan warna turunannya.  

Bagaimana dengan interior, interior bangunan akan lebih banyak menggunakan bahan bahan yang natural seperti bambu, kayu dengan design lama ( tradisional ).

_______________________________________________________ 

Trend bukanlah hal baku yang harus kita ikuti, Hal yang lebih penting yang kita lakukan selain membicarakan trend adalah membuat cek list kebutuhan yang ada dan juga disesuaikan dengan kondisi keuangan yang ada sehingga dalam membangun rumah idaman kita tidak kecewa dikemudian harinya.

Membuat Top Posting Berdasar jumlah komentar posting

Membuat Top Posting berdasar jumlah komentar terbanyak merupakan salah satu pilihan yang bisa kamu pakai sebagai tambahan widget untuk mempercantik blog.

Ada 2 macam top posting yang saat ini ada yaitu :

1. Top Posting berdasar tingkat popularitas
2. Top Posting berdasarkan jumlah komentar yang ada.

Caranya adalah sebagai berikut :

1. Klik Page Element
2. Klik Add Gadget
3.  
   
4. Klik plus button (+) for HTML/JavaScript. (img)
   
   
   
5. Copy and paste kode dibawah ini

<h3>10 Posting Terpopuler</h3>
<br />
<script language="javascript">
titlebold=false;
numposts=9999;
maxshowresult=10;
explanation="komentar";
home_page="NAMA BLOG KAMU.blogspot.com";
</script>
<script style="text/javascript" src="http://sites.google.com/site/kibagusnet/x-design/toppost.js"></script>

Simpan dan lihat hasilnya.

Keterangan :

• Warna Merah, Alamat URL blog kamu
• Warna Hijau,  Keterangan yang akan muncul pada bagian akhir judul posting "Judul posting ( 30 Komentar )"
• Warna Kuning, Judul Top Posting ( Bisa kamu hilangkan atau kamu ganti dengan kata kata kamu sendiri )

______________________________________________________

Ok.. Selamat mencoba..!

Semoga bermanfaat....!!

Membuat Menu Horizontal Sederhana

Menu horizontal/vertikal memang dibutuhkan karena bisa membuat blog kamu menjadi tampak lebih proffesional dan salah satu alternatif dimana kamu bisa menghemat tempat dengan menampilkan label atau link URL kamu sesuai dengan tema / label blog kamu.

Disini kamu bisa membuat menu dengan langkah sederhana dan sudah tentu hasilnya juga sederhana, tapi dengan sedikit kreativitas kamu bisa membuat menu ini jadi tampil lebih bagus.
Nah..! kalau kamu pingin ikuti langkah2 berikut :

Langkah Pertama

• Login ke akun Blogger kamu.
  
• Dari halaman dashboard, pilih Edit HTML.
  
• Pada halaman Edit HTML, cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
  
• Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut..

/* Menu Horizontal
----------------------------------------------- */
.menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #000000;}
.menuhorisontal ul{margin:0; padding:0; padding-left:0px; font:13px Arial; list-style-type:none}
.menuhorisontal li{display:inline; margin:0}
.menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:2px; padding:2px 2px 2px 2px; color:#ffffff; background:#000000;}
.menuhorisontal li a:hover{color:#FFFFFF; background:#2E2EFE}

Pada bagian yang diberi warna merah, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada warna huruf maupun background sesuai dengan blog kamu. 

Langkah Kedua

• Masuk Layout
• Pilih tab Elemen Halaman ( Page Element ).
• Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
• Copykan script berikut dan letakkan pada kotak Content yang tersedia:

<div style="overflow:no; width:100%; height:100%; padding:0px; border:1px solid #FFFFFF; background:#FFFFFF;">

<div class="menuhorisontal">
<li>

<a href="http://kibagus-homedesign.blogspot.com/" target="_blank">HOME</a>

<a href="#" target="_blank">menu 1</a>

<a href="#" target="_blank">menu 2</a>

<a href="#" target="_blank">menu 3</a>

<a href="#" target="_blank">menu 4</a>

<a href="#" target="_blank">menu 5</a>

<a href="http://kibagus-homedesign.blogspot.com/" target="_blank">Kibagus-com</a>

</li>
</div>
</div>

Pada tulisan yang tercetak merah dapat kamu ubah disesuaikan dengan Alamat URL kamu tuju. Begitupun dengan judul Menu-1, dst dapat kamu buat sendiri sesuai dengan isi blog kamu.

Selain itu kamu juga bisa menambahkan menu-menu lain asalkan lebar sidebar blog kamu mencukupi. Atau bisa juga dengan cara mengatur ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kamu.

simpan dan lihat hasilnya... contohnya adalah menu yang ada di blog punyaku ini...!!
Selamat Mencoba...!

Award dari Nophie's Corner

Akhir pekan yang indah dengan Award dari sahabat ku Nophie's Corner, Award ini adalah bentuk persahabatan dan penghargaan bagi yang telah memberi support pada blog kita selama ini, Terimakasih, semoga sukses selalu bagi kita semua.

Mengingat umur blog aku yang masih cukup muda dan berkat dukungan dari teman teman sesama blogger yang cukup besar artinya maka aku juga ingin memberikan award ini bagi kamu semua yang telah berkunjung, berkomentar dan berbagi, silakan diambil kamu bisa berikan pada sahabat yang lain.

Bagi kamu yang link-nya udah aku pasang di blog ini kalau kamu suka kamu bisa ambil dan bagi kepada sahabat blogger yang lain.

Terima kasih....

Salam persahabatan.

Membuat menu horizontal dengan Tab Animasi warna warni

Membuat menu horizontal dengan animasi tentu akan sangat menarik, kali ini kita coba membuat menu horizontal dengan animasi tab warna warni.

sample - blog

 

sample - blog 

jenis menu ini hanya untuk single line, tidak ada drop menu.

Kita langsung ke TKP saja biar jelas
Langkah Pertama

• Login ke akun Blogger kamu.
• Dari halaman dashboard, pilih Edit HTML.
• Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
• Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut.

#info {height:auto;}

#outer {display:block; position:relative; background:transparent; padding:2em; text-align:center; margin:40px 15px;}

#outer h2 {margin-bottom:1em;}

#navigation {background:transparent; margin:0 auto; height:3em;

/* hide overflow:hidden from IE5/Mac */

/* \*/

overflow: hidden;

/* */ }

#navigation ul {margin:0; padding:0; list-style-type:none; background:transparent;}

#navigation li {display:block; float:left; margin:0 1px;}

.snazzy {background:transparent;}

.snazzy span {text-align:center; color:#fff; margin:0; font-weight:normal;}

.b1, .b2, .b3, .b4 {display:block; font-size:1px;

/* hide overflow:hidden from IE5/Mac */

/* \*/

overflow: hidden;

/* */ }

.b1, .b2, .b3 {height:1px;}

.b2, .b3, .b4 {border-left:1px solid #fff; border-right:1px solid #fff;}

.b1 {margin:0 5px; background:#fff;}

.b2 {margin:0 3px; border-width:0 2px;}

.b3 {margin:0 2px;}

.b4 {height:2px; margin:0 1px;}

.boxcontent {display:block; border-left:1px solid #fff; border-right:1px solid #fff;}

a.menu, a.menu:visited {display:block; text-decoration:none; width:5.5em;}

a.menu:hover {background:transparent; cursor:pointer;}

a.menu:hover span {padding-top:10px; background:#888;}

a:menu:hover b {background:#888;}

.red {background:#c00;}

.orange {background:#f90;}

.yellow {background:#b8b800;}

.green {background:#090;}

.blue {background:#00c;}

.indigo {background:#309;}

.violet {background:#c6c;}

.grey {background:#888;}

a:hover b.red {background:#888;}

a:hover b.orange {background:#888;}

a:hover b.yellow {background:#888;}

a:hover b.green {background:#888;}

a:hover b.blue {background:#888;}

a:hover b.indigo {background:#888;}

a:hover b.violet {background:#888;}

.active {padding-top:10px; background:#888; cursor:default;}

#navigation2 {clear:both; background:transparent; margin:0 auto; height:3em;

/* hide overflow:hidden from IE5/Mac */

/* \*/

overflow: hidden;

/* */ }

#navigation2 ul {margin:0; padding:0; list-style-type:none; background:transparent;}

#navigation2 li {display:block; float:left; margin:0 1px;}

.pad {display:block; height:1em;

/* hide overflow:hidden from IE5/Mac */

/* \*/

overflow: hidden;

/* */ }

a.menu2, a.menu2:visited {display:block; text-decoration:none; width:5.5em;}

a.menu2:hover {background:transparent; cursor:pointer;}

a.menu2:hover .boxcontent {padding-bottom:0.8em; background:#888;}

a.menu2:hover .pad {height:0.2em;}

Simpan dan lihat hasilnya.

Keterangan :

• Warna Merah, Kode untuk animasi tab arah ke bawah
• Warna Hijau,  Kode untuk animasi tab arah ke atas
• Copy paste kode di atas secara keseluruhan warna merah dan hijau hanya menunjukan tempat untuk editing apabila kamu ingin merubah warna atau lainnya ( background, lebar menu, tinggi menu )

Langkah kedua

1. Klik Page Element
2. Klik Add Gadget
3.  
   
4. Klik plus button (+) for HTML/JavaScript. (img)
   
   
   
5. Copy and paste kode dibawah ini

Kode-1 untuk Tab animasi arah ke bawah :

<div id="info">
<div id="outer">
<div id="navigation">
<ul>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent red">1</span>
<b class="b4 red"></b><b class="b3 red"></b><b class="b2 red"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent orange">2</span>
<b class="b4 grey"></b><b class="b3 grey"></b><b class="b2 grey"></b><b class="b1"></b>
</b></a>
</li>
<li>

<a class="menu" href="#"><b class="snazzy"><span class="boxcontent yellow">3</span>
<b class="b4 yellow"></b><b class="b3 yellow"></b><b class="b2 yellow"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent green">4</span>
<b class="b4 green"></b><b class="b3 green"></b><b class="b2 green"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent blue">5</span>
<b class="b4 blue"></b><b class="b3 blue"></b><b class="b2 blue"></b><b class="b1"></b>
</b></a>
</li>

<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent indigo">6</span>
<b class="b4 indigo"></b><b class="b3 indigo"></b><b class="b2 indigo"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent violet">7</span>
<b class="b4 violet"></b><b class="b3 violet"></b><b class="b2 violet"></b><b class="b1"></b>
</b></a>
</li>
</ul>

</div> <!-- end of navigation --></div></div>

Simpan dan lihat hasilnya.

Kode-2 untuk Tab animasi arah ke atas :

<div id="navigation2">
<ul>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 red"></b><b class="b3 red"></b><b class="b4 red"></b><span class="boxcontent red">1</span>
</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 orange"></b><b class="b3 orange"></b><b class="b4 orange"></b><span class="boxcontent orange">2</span>
</b></a>
</li>
<li>

<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 yellow"></b><b class="b3 yellow"></b><b class="b4 yellow"></b><span class="boxcontent yellow">3</span>
</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 green"></b><b class="b3 green"></b><b class="b4 green"></b><span class="boxcontent green">4</span>
</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 blue"></b><b class="b3 blue"></b><b class="b4 blue"></b><span class="boxcontent blue">5</span>
</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 indigo"></b><b class="b3 indigo"></b><b class="b4 indigo"></b><span class="boxcontent indigo">6</span>

</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 violet"></b><b class="b3 violet"></b><b class="b4 violet"></b><span class="boxcontent violet">7</span>
</b></a>
</li>
</ul>

</div> <!-- end of navigation2 -->
<!-- end of outer -->

<!-- end of info -->

Simpan dan lihat hasilnya.

Keterangan :

• Silahkan pilih salah satu kode yang akan kamu gunakan kode-1 atau kode 2 ( kamu bisa gunakan kedua duanya sekaligus )
• Warna Merah, Nama nama menu sesuai dengan kebutuhan
• Warna Hijau,  Alamat URL yang akan kamu tuju sesuai dengan nama menu

________________________________________________________

Ok.. Selamat mencoba..!

Semoga bermanfaat....!!

Sumber : Web design and Assistance-css play