Cara Membuat Navigasi Menu Full Color di Bloggermodel gaya mengikuti trend sekarang yaitu Metro UI
pemasangan kode
Copy kode CSS berikut ini, lalu taruh di atas kode ]]></b:skin> kemudian Simpan template
Taruh kode berikut di atas kode <body>
pemasangan kode
Copy kode CSS berikut ini, lalu taruh di atas kode ]]></b:skin> kemudian Simpan template
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;}
Taruh kode berikut di atas kode <body>
<div class='navmenu'>
<ul class='navfullcolor'>
<li><a expr:href='data:blog.homepageUrl' class='blue'>Home</a></li>
<li><a href='http://templatedesignphp.blogspot.com' class='red'>Menu 1</a>
<ul>
<li><a href='http://templatedesignphp.blogspot.com'>Sub Menu 1</a></li>
<li><a href='http://templatedesignphp.blogspot.com'>Sub Menu 2</a></li>
<li><a href='http://templatedesignphp.blogspot.com'>Sub Menu 3</a></li>
<li><a href='http://templatedesignphp.blogspot.com'>Sub Menu 4</a></li>
<li><a href='http://templatedesignphp.blogspot.com'>Sub Menu 5</a></li>
</ul>
</li>
<li><a href='http://templatedesignphp.blogspot.com' class='yellow'>Menu 2</a>
<ul>
<li><a href='http://templatedesignphp.blogspot.com'>Sub Menu 1</a></li>
<li><a href='http://templatedesignphp.blogspot.com'>Sub Menu 2</a></li>
<li><a href='http://templatedesignphp.blogspot.com'>Sub Menu 3</a></li>
<li><a href='http://templatedesignphp.blogspot.com'>Sub Menu 4</a></li>
</ul>
</li>
<li><a href='http://templatedesignphp.blogspot.com' class='green'>Menu 3</a>
<ul>
<li><a href='http://templatedesignphp.blogspot.com'>Sub Menu 1</a></li>
<li><a href='http://templatedesignphp.blogspot.com'>Sub Menu 2</a></li>
<li><a href='http://templatedesignphp.blogspot.com'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='http://templatedesignphp.blogspot.com' class='purple'>Menu 4</a>
<ul>
<li><a href='http://templatedesignphp.blogspot.com'>Sub Menu 1</a></li>
<li><a href='http://templatedesignphp.blogspot.com'>Sub Menu 2</a></li>
</ul>
</li>
<li><a href='http://templatedesignphp.blogspot.com' class='red'>Menu 5</a></li>
<li><a href='http://templatedesignphp.blogspot.com' class='yellow'>Menu 6</a></li>
<li><a href='http://templatedesignphp.blogspot.com' class='green'>Menu 7</a></li>
</ul>
</div>
0 Response to "Membuat Navigasi Blogger rasa metro"
Post a Comment