13 March 2014

Cara Membuat Navigasi Menu Full Color Di Blog

Navigasi Menu Full Color

Cara Membuat Navigasi Menu Full Color Di Blog - Sekarang saya akan memberikan Tutorial ''Cara Membuat Navigasi Menu Full Color Di Blog'' ada pengunjung di blog ini yang bertanya, ''bagaimana cara membuat menu navigasi berwarna'' dan saya berfikir apa ada orang lain yang bertanya demikian,,, dengan itu sekarang saya akan membagikan tips cara membuat navigasi menu berwarna, (Full Color) ternyata membuat navigasi menu berwarna itu cukup mudah, hanya menambahkan class yang berisi background untuk setiap warnanya pada link menu satu per satu. Untuk lebih jelasnya silahkan ikuti tutorial dibawah ini...

1. Masuk ke Akun Blogger
2. Pilih Dashboard > Template > Edit HTML
3. Masukan kode CSS ini di atas kode ]]></b:skin> Kemudian Simpan Template
.navmenu { background: #111; border-bottom: 5px solid #0091d6; position: relative; height:35px; margin: 0 auto; text-transform: uppercase; z-index: 1; }
ul.navfullcolor { list-style: none; padding: 0; font: 14px Arial; font-weight: bold; width:auto; line-height: 15px; margin: auto; }
ul.navfullcolor li { float: left; position: relative; margin: 0px 1px 0px 0px; }
ul.navfullcolor li a, ul.navfullcolor li a:link { color: #fff; text-decoration: none; display: block; padding: 10px 26px; transition: all 0.2s ease; }
ul.navfullcolor li a:hover { color: #fff; transition: all 1s ease; }
ul.navfullcolor li ul { display: none; top: 35px; border-top: 5px solid #FF8000; }
ul.navfullcolor li:hover ul { position: absolute; display: block; padding: 0; list-style: none; }
ul.navfullcolor li ul li { float: none; background: #282321; border-bottom: 1px solid #191614; border-top: 1px solid #3a3230; width:210px; }
ul.navfullcolor li ul li a, ul.navfullcolor li ul li a:link { color: #aaa; display: block; }
ul.navfullcolor li ul li a:hover { background: #FF8000; }
.green{background-color:#01A451 !important;} .green:hover{background-color:#52e052 !important;}
.yellow{background-color:#FBC700 !important;} .yellow:hover{background-color:#FFE500 !important;}
.red{background-color:#D52100 !important;} .red:hover{background-color:#ff0000 !important;}
.purple{background-color:#660099 !important;} .purple:hover{background-color:#D580FE !important;}
.blue{background-color:#0091d6 !important;} .blue:hover{background-color:#80C8FE !important;}
4. Selanjutnya taruh HTML ke dalam template, letaknya bisa menyesuaikan template lama atau agar lebih mudah masuk Tata Letak > Tambah Widget > HTML/Javascript.
5. Copy kode berikut ini, lalu paste ke dalam widget HTML/Javascript kemudian klik Simpan.
<div class='navmenu'>
<ul class='navfullcolor'>
    <li><a expr:href='data:blog.homepageUrl' class='blue'>Home</a></li>
    <li><a href='http://blanter-forever.blogspot.com' class='red'>Menu 1</a>
        <ul>
        <li><a href='http://blanter-forever.blogspot.com'>Sub Menu 1</a></li>
        <li><a href='http://blanter-forever.blogspot.com'>Sub Menu 2</a></li>
        <li><a href='http://blanter-forever.blogspot.com'>Sub Menu 3</a></li>
        <li><a href='http://blanter-forever.blogspot.com'>Sub Menu 4</a></li>
        <li><a href='http://blanter-forever.blogspot.com'>Sub Menu 5</a></li>
        </ul>
    </li>
    <li><a href='http://blanter-forever.blogspot.com' class='yellow'>Menu 2</a>
        <ul>
        <li><a href='http://blanter-forever.blogspot.com'>Sub Menu 1</a></li>
        <li><a href='http://blanter-forever.blogspot.com'>Sub Menu 2</a></li>
        <li><a href='http://blanter-forever.blogspot.com'>Sub Menu 3</a></li>
        <li><a href='http://blanter-forever.blogspot.com'>Sub Menu 4</a></li>
        </ul>
    </li>
    <li><a href='http://blanter-forever.blogspot.com' class='green'>Menu 3</a>
        <ul>
        <li><a href='http://blanter-forever.blogspot.com'>Sub Menu 1</a></li>
        <li><a href='http://blanter-forever.blogspot.com'>Sub Menu 2</a></li>
        <li><a href='http://blanter-forever.blogspot.com'>Sub Menu 3</a></li>
        </ul>
    </li>
    <li><a href='http://blanter-forever.blogspot.com' class='purple'>Menu 4</a>
        <ul>
        <li><a href='http://blanter-forever.blogspot.com'>Sub Menu 1</a></li>
        <li><a href='http://blanter-forever.blogspot.com'>Sub Menu 2</a></li>
        </ul>
    </li>
    <li><a href='http://blanter-forever.blogspot.com' class='red'>Menu 5</a></li>
    <li><a href='http://blanter-forever.blogspot.com' class='yellow'>Menu 6</a></li>
    <li><a href='http://blanter-forever.blogspot.com' class='green'>Menu 7</a></li>
</ul>
</div>
Keterangan:
Ganti http://blanter-forever.blogspot.com dengan label link blog anda.

6. Setelah tersimpan silahkan lihat hasilnya.



Apabila bagi yang masih kesulitan dalam melakukan Edit HTML template, bisa langsung memasukan seluruh kode diatas ke dalam widget HTML/Javascript agar lebih mudah. Caranya seperti di bawah ini:
<style type="text/css" scoped>

Taruh CSS yang terdapat pada point 3 disini

</style>

Taruh HTML yang terdapat pada point 5 disini
Kemudian Simpan.

Itulah Tutorial ''Cara Membuat Navigasi Menu Full Color Di Blog'' Jangan Lupa Like, Komen, dan Follownya ya,,, Terimakasih sudah berkunjung... dan semoga Tutorial ini Bermanfaat untuk sobat semua.... :D

Source : http://mas-andes.blogspot.com/2013/10/cara-membuat-navigasi-menu-full-color-blogger.html
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic