Sprites Menu Keren Dengan CSS

By Unknown

Minggu, 30 September 2012

Langsung saja gan...saya hanya mau share Sprites Menu menggunakan css dari bloggertrix. Tampilannya keren dan dijamin menarik. Sebelumnya makasih kepada bloggertrix atas scriptnya. Sekarang ikuti langkah berikut.

Log in ke blogger
Klik Template
Klik Edit HTML
Klik Lanjutkan
Masukkan kode HTML berikut di atas kode <div id='content-wrapper'>

<div class="bloggertrix-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://MASUKKAN ALAMAT BLOG ANDA DI SINI/"></a></li>
  </ul>
</div>

Selanjutnya masukkan kode css berikut di atas kode ]]></b:skin>. Pilih salah satu dari dua kode di bawah ini.

.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/AVvXsEiv384fw9xt41mvC3Llz8vtNwYopSff3oucvviPIZQQGRxfXPQsxFGHZfnpszhHYzhBROimPU1MSjvZCgtDcPYBwgq5F2LNGiuEWxCcB3PsGoMmq6jX4EHgKZYG-HW30lGoFcSAwy8PSB8/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}

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

Selanjutnya klik Simpan Template dan lihat hasilnya
Selamat mencoba dan sukses selalu

"keep spirits and do the best"

Share :

Facebook Twitter Google+