MEMBUAT MENU NAVIGATION BAR WARNA WARNI

Cara Membuat Menu Navigation Bar Warna Warni Di Blog Dengan Mudah

Lanjut lagi artikel tentang menu bar spoter. Setelah sebelumnya membahas tentang menu navigation bar flying style, kali ini tentang menu bar cool sprite navigation. Penampakan bisa lihat gambar di atas, sama seperti sebelumnya cara membuat atau memasang nya tidak sulit. Cukup sedikit edit kode HTML template anda, maka jadilah seperti di atas.

Untuk spoter yang ingin menerapkan nya di blog cara nya bisa ikuti tutorial di bawah ini.

Menu Navigation Bar Cool Sprite Widget

1. Buka Blogger dan tentu saja login.
2. Buka template dan pilih edit HTML.
3. Temukan kode <div id='content-wrapper'> gunakan ctrl+F
4. Jika sudah ketemu copy dan paste kode di bawah tepat sebelum kode <div id='content-wrapper'>

<div class="kreatifspot-navi1">
  <ul>
    <li class="sm1"><a href="#"></a></li>
    <li class="sm2"><a href="#"></a></li>
    <li class="sm3"><a href="#"></a></li>
    <li class="sm4"><a href="#"></a></li>
    <li class="sm5"><a href="http://spotkreatif.blogspot.com/"></a></li>
  </ul>
</div>

NB : Ganti tanda # dengan url anda

5. Lanjut temukan kode ]]></b:skin> pakai ctrl+F
6. Copy lalu paste kode di bawah ini tepat di atas kode ]]></b:skin>

/*menubar by kreatifspot.com */
.bloggertrix-navi1 {
    display:block;
    height:72px;
    margin:30px auto;
    position:relative;
    width:525px; }
.bloggertrix-navi1 ul {
    float:none;
    list-style-image:none;
    list-style-type:none;
    margin:3px 0; }
.bloggertrix-navi1 ul li {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxi-x7yvGADGduXdgW4RkG3CNohtvn75qRzNrkmWX2il2MWGGuG2l9p8jF7MeW7hvB4yGTsYJ9W0AMmK69FUcY9S8N8cbELAegBY1kMm4vXVj-j383EXFk85XiGS1DEswRXD6Y8cI6AK0/s1600/bloggertrix.com-tab-1.png);
    background-repeat:no-repeat;
    float:left;
    height:72px;
    margin:0px;
    padding-top:5px;
    position:absolute; }
.bloggertrix-navi1 ul li a {
    display:block;
    height:100%;
    width:100%; }
.bloggertrix-navi1 ul li.sm1 {
    background-position:0 0;
    left:0px;
    width:125px; }
.bloggertrix-navi1 ul li.sm2 {
    background-position:-125px 0;
    left:100px;
    width:124px; }
.bloggertrix-navi1 ul li.sm3 {
    background-position:-249px 0;
    left:200px;
    width:124px; }
.bloggertrix-navi1 ul li.sm4 {
    background-position:-373px 0;
    left:300px;
    width:125px; }
.bloggertrix-navi1 ul li.sm5 {
    background-position:-498px 0;
    left:400px;
    width:126px; }
.bloggertrix-navi1 ul li:hover {
    z-index:1000; }
.bloggertrix-navi1 ul li.sm1:hover {
    background-position:0 -75px; }
.bloggertrix-navi1 ul li.sm2:hover {
    background-position:-125px -75px; }
.bloggertrix-navi1 ul li.sm3:hover {
    background-position:-249px -75px; }
.bloggertrix-navi1 ul li.sm4:hover {
    background-position:-373px -75px; }
.bloggertrix-navi1 ul li.sm5:hover {
    background-position:-498px -75px; }
/*menubar by kreatifspot.com */

7. Terakhir simpan template dan selesai.

nah spoter saya rasa sampai disini menu navigation bar warna warni ini sudah jadi di buat. Jika tidak ada langkah yang salah pasti berhasil dengan baik. Kalau ada pertanyaan bisa taruh di komentar. Oke sekian dulu postingan kali ini, semoga saja dapat membantu blogger yang memang sedang mencari tutorial ini, baca juga tentang membuat menu navigation bar multi level. Terima kasih.