Cara Mudah Membuat Menu Tab Horizontal Warna-Warni di Blogger

Sebelumnya saya sudah posting  Cara Mudah Membuat Menu Tab Horizontal Cantik di Blogger. Kali ini saya akan posting Cara Mudah Membuat Menu Tab Horizontal Warna-Warni di Blogger, tanpa basa basi langsung saja ikuti caranya beriktu ini

1. Login ke Account Blogger Anda.
2. Pilih menu Tata Letak  >> Edit HTML >> Lanjutkan dan beri tanda centang  
    Expand Template Widget.
3. Cari kode ]]></b:skin> dengan Ctrl F atau F3.
4. Letakkan kode dibawah ini diatas /sebelum  ]]></b:skin>

nav {
    background: #fbfbfb;
    border-top: 2px solid #FFFFFF;
    overflow: hidden;
    position: relative;
    width: 100%;
}
nav:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: white;
}
nav ul {
    background: -moz-linear-gradient(left,#666 0%,#666 50%,#41d05f 100%);
    background: -webkit-gradient(linear, left top, right top,color-stop(0%,#fbfbfb),                color-stop(50%,#fbfbfb),color-stop(50%,#41d05f),color-stop(100%,#41d05f));
    list-style: none;
    overflow: hidden;
    padding: 0 0 0 10px;
    width: 960px;
}
nav li {
    display: inline;
}
nav a {
    color: white;
    display: block;
    float: left;
    font-family: HelveticaNeue, Helvetica, Arial, Sans-Serif;
    font-size: 16px;font-weight:800;
    padding: 10px 0;
    text-decoration: none;
    text-align: center;
    width: 15%;
    -webkit-transition: width 0.12s ease;
    -moz-transition: width 0.12s ease;
    -o-transition: width 0.12s ease;
    transition: width 0.12s ease;
}
nav a:hover {
    color: white;
}
nav a:hover span {
    border-bottom: 2px solid white;
}
nav .a-home {
    background: #ff8400;
    z-index: 100;
    position: relative;
}
nav .a-forums {
    background: #e42b2b;
}
nav .a-videos {
    background: #a800ff;
}
nav .a-downloads {
    background: #49a7f3;
}
nav .a-contato {
    background: #41d05f;
}
nav .a-login {
    background: #444;
}
.home nav {
    border-bottom-color: #ff8400;
}
.forums nav {
    border-bottom-color: #e42b2b;
}
.videos nav {
    border-bottom-color: #a800ff;
}
.downloads nav {
    border-bottom-color: #49a7f3;
}
.contato nav {
    border-bottom-color: #41d05f;
}
nav li:hover a {
    width: 20%;
}
nav ul:hover .active {
    width: 19%;
}
nav ul:hover .active:hover {
    width: 20%;
}
nav li a.active {
    width: 20%;
}
.bub
{
-moz-border-radius:50px;
-webkit-border-radius:50px;
background-color:#3CF;
border-radius:50px;
color:#FFf;
font-family:Calibri, Helvetica, sans-serif;
font-size:130%;
font-weight:700;
height:60px;
left:200px;
line-height:1.8em;
position:absolute;
text-align:center;
text-decoration:none;
top:200px;
width:60px;
}
.bub:hover
{
-moz-border-radius:400px;
-moz-transition:ease 1s;
-webkit-border-radius:400px;
-webkit-transition:ease 1s;
border-radius:400px;
height:200px;
left:130px;
top:130px;
width:200px;
z-index:10;
}
.bub i
{
font-size:90%;
position:relative;
text-transform:none;
top:12px;
}
.bub span
{
display:none;
position:relative;
text-decoration:none;
top:80px;
}
.bub:hover span
{
display:block;
}

Kalau anda sedikit lebih jeli dan teliti melihat kode diatas tentu anda bisa memodif sesuai keinginan, karena disini hanya dibuat 6 manu tab dengan 6 pilihan warna. Silahkan dicoba untuk membuat lebih dari 6 menu tab dengan pilihan warna yang lebih kreatif. Untuk kode warna bisa dilihat disini

5. Selanjutnya letakkan kode dibawah ini tepat di atas kode  <div id='content-wrapper'> atau bisa juga di Rancangan >> Tambah Gadget >> HTML/JavaScript (dibawah Header).
 

<nav>
            <ul>
            <li>
                <a class='a-home active' href=Link'>
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a class='a-forums' href='Link'>
                    <span>Daftar Isi</span>
                </a>
            </li>
            <li>
                <a class='a-videos not-active' href='Link'>
                    <span>Pasang Iklan</span>
                </a>
            </li>
            <li>
                <a class='a-downloads' href='Link'>
                    <span>Pesan Blog</span>
                </a>
            </li>
            <li>
<a class='a-login' href='Link' target="_blank">
                    <span>Tukar Link</span>
                </a>
            </li>
            <li>
                <a class='a-contato' href='Link' target="_blank">
                    <span>Contact Us</span>
                </a>
            </li>
        </ul>
</nav>   

6. Sebelum disimpan, ganti dulu tulisan yang berwarna merah sesuai kebutuhan. 
8. target="_blank" maksudnya jika link/tab ini diklik maka akan terbuka di Tab Baru / New Tab
    kalau tidak mau seperti itu, dihapus saja. 
9. Simpan, lihat hasilnya

Selamat mencoba, semoga berhasil