Cara Membuat Sprites Menu Keren Dengan CSS

Cara Membuat Sprites Menu Keren Dengan CSS - 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://syacom.blogspot.com/"></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/AVvXsEhxu4ShjTGHUcRu2sIN3Uudf2VigD2mzmJ7WPVL6qk-1aoL4OzgPxXZZkIJk9lQl63BXI5GpVsYRgkd1jBDMBTxcnMlYtEuMBTJeW-pQryBtTrMlpqVGEaPLFBO-TTcyqKKFyd1xnXFHiY/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/AVvXsEiEeH1cPuZSOpCcyXTr2Pgmtbt0q3xcA3jz6-F45JdUMJgkehlD650Pq03m639a7PEYdjpbQP70FB-nARN9OvjyJyRD7GNxw9rXKmLZ21x_1v-mGsA0OqfBKEh7z1ct6EdnT7_tBVpnQNU/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

Anda baru saja membaca artikel yang berkategori trik blogger dengan judul Cara Membuat Sprites Menu Keren Dengan CSS. Anda bisa bookmark halaman ini dengan URL http://blogberkah.blogspot.com/2012/10/cara-membuat-sprites-menu-keren-dengan.html. Terima kasih!

Ditulis oleh: Unknown - Jumat, 26 Oktober 2012