Cara buatnya gampang sob silahkan terapkan seperti langkah-langkah berikut :
- Login blog
- Rancangan>>Edit HTML
- Jangan lupa expand Widget
- Masukkan kode CSS berikut tepat di atas kode ]]></b:skin>
PERINGATAN! Download Template lengkap dulu, guna mengantisipasi adanya kesalahan!!!, Terimakasih.
<!-- Menuq Cah Dabloeng -->
.menuqu ul li{display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #000000; border: 2px solid #000000; list-style: none;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #000000; list-style: none;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu1:hover, .menuqu2:hover{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
.menuqu ul li{display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #000000; border: 2px solid #000000; list-style: none;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #000000; list-style: none;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu1:hover, .menuqu2:hover{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
- Kemudian cari lagi kode <body>
- Masukkan Script berikut tepat di bawahnya!
<div class="menuqu">
<ul>
<li class="menuqu1"><a href='URL ANDA'>News</a></li>
<li class="menuqu2"><a href='URL ANDA'>Artikel</a></li>
<li class="menuqu1"><a href='URL ANDA' title='Lucu dan Unik'>Dunia Unik</a></li>
<li class="menuqu2"><a href='URL ANDA' title='Download Mp3 Gratis'>Mp3</a></li>
</ul>
</div>
</div>
<div class='clear'></div>
<ul>
<li class="menuqu1"><a href='URL ANDA'>News</a></li>
<li class="menuqu2"><a href='URL ANDA'>Artikel</a></li>
<li class="menuqu1"><a href='URL ANDA' title='Lucu dan Unik'>Dunia Unik</a></li>
<li class="menuqu2"><a href='URL ANDA' title='Download Mp3 Gratis'>Mp3</a></li>
</ul>
</div>
</div>
<div class='clear'></div>
Keterangan :
~ Warna Merah silahkan ganti dengan url sobat!!
~ Simpan dan lihat hasilnya?
PERINGATAN! Bagi Yang Suka COPAS! Harap Cantumkan Link Sumbernya!!!, Terimakasih.
You Might Also Like
.jpg)
Udah Saya Coba Liat : sahrul21.blogspot.com
ReplyDeletecakep blognya ..
Delete