Tutorial ini diBeri judul"Cara Bikin Button/Tombol Windows7 Pada Blog" karena modelnya diadopsi dari button Windows 7 dimana Efeknya adalah "cahaya yang mengikuti mouse saat kita arahkan diatas tombol.
Efek ini Kompatibel Dengan :
Oke, Langsung kita mulai saja, Ikuti Ketiga tahapan pemasangan berikut ini dengan seksama, agar tidak terjadi kesalahan:
Pertama, letakkan dua javascript berikut ini diatas kode </head>:
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
kedua, letakkan kode css ini diatas kode ]]></b:skin>
.clear-both
{
clear:both;
}
.win7
{
font-family:"Segoe UI", Arial, Helvetica, sans-serif;
font-size:12px;
height:29px;
float:left;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxSFpYtR3pjx756TZIdbblHj-FnAW_1PWPV97TawmRYtZ45Rh27yVSU7rrRc-YcCtwkEAqhUojNU6C1kuuvmuQkrVVfW2kVY-t_kWjOd5RfzjKqNvbeRlwzwqZrSRGkDcn98suvV5KmKyl/) repeat-x top left;
width:100%;
position:relative;
}
ul.win7,
ul.win7 li
{
padding:0px;
margin:0px;
list-style-type:none;
}
ul.win7 li
{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxSFpYtR3pjx756TZIdbblHj-FnAW_1PWPV97TawmRYtZ45Rh27yVSU7rrRc-YcCtwkEAqhUojNU6C1kuuvmuQkrVVfW2kVY-t_kWjOd5RfzjKqNvbeRlwzwqZrSRGkDcn98suvV5KmKyl/) repeat-x top left;
height:29px;
line-height:29px;
display:inline;
position:relative;
float:left;
text-align:center;
}
.win7 div
{
position:absolute;
top:0;
left:0;
width:100%;
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiozAGHcfOMeyl0TtWABZP6ws4tT1vMO3QY7WQIlx5KgFe8zv0udiiJbC5wycilQsi2C1IUPHxhSAIyqA-i0r_Fi8GsztnDIAY7l5ZJQv8hEw_fZyG0Vuqj2VW1LYNPZFdQ28NGbzkxrT6G/) no-repeat center;
z-index:0;
}
.win7 a
{
text-align:center;
display:block;
z-index:2;
position:relative;
padding:0 25px;
line-height:29px;
}
.win7 a:link,
.win7 a:visited
{
color:#FFFFFF;
text-decoration:none;
}
.win7green div
{
width:100%;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqoJv0FbChNi5FRZurQBJE7vdz0v6l-osgwsAj28tYTinQDLXauLnhBS8P-3WYD-iS9M2cMSejdsH5QtdDb_Iz5GqlRD_NXKPYZ5jG3p3r2TeX2ICaCemu6PsYG5ocSMoQ_dfE5Rew89Dd/);
background-repeat:no-repeat;
}
.win7yellow div
{
width:100%;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvB_wcPidDewd2euGpKqpstMfe9HnnhXyuB_7f6ztY5h83EyNpEOGCt-Nr1s6HJNxJT2zKe5Xg1SOr-QJq08Cz00UjG2_EOrTs6zyi1ET5Xw2Yrj2EL4aN2gAAnYSDiO3ivLAoL5lgdf0z/);
background-repeat:no-repeat;
}
.win7red div
{
width:100%;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTxulKDu_OzbuEC-pZdbYt7nIcD3POzZvkAJW-EBDDD2XmsAswHNErO8TY4VgLvOkaQXs9OF1OqzP39G6SG6Ro_frfOROpIuEZ7sFViNnQdML75sawevUhMkcZKx5hdJmV5uKAfb7sEjdW/);
background-repeat:no-repeat;
}
span.win7
{
width:auto;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
border:2px solid #deded2;
overflow:hidden;
}
span.win7 div {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
border:2px solid #deded2;
top:-2px;
left:-2px;
}
Ketiga, pasang kode JavaScript berikut diatas kode </head>.
<script type='text/javascript'>
window.addEvent('domready', function() {
if (Browser.Engine.trident4) {
try { document.execCommand("BackgroundImageCache", false, true); }
catch(err) {}
}
$$('.win7 a').each(function(el) {
el.win7BG = new Element('div', {'styles':{'opacity':0}}).injectBefore(el);
el.win7BG.set('morph', {'duration':300});
el.addEvent('mousemove', function (ev) {
el.win7BG.setStyle('background-position', - ((600/2) - (ev.event.layerX||ev.event.offsetX||0))+'px top');
});
el.addEvent('mouseenter', function (ev) {
el.win7BG.morph({'opacity': 1});
});
el.addEvent('mouseout', function (ev) {
el.win7BG.morph({'opacity': 0});
});
});
});
</script>
usai sudah proses pembuatan button/tombol windows7 pada blog. Selanjutnya untuk memunculkan button-nya kita tinggal menggunakan script berikut :
<span class="win7">
<a href="Alamat%20Tujuan">Tombol Win7</a>
</span>
button win7
Nah, itu tadi yang berbentuk button. Nah, kalau kita ingin membuat toolbar bisa juga. Kita tinggal menggunakan script berikut:
<ul class="win7">
<li><a href="#">Home</a></li>
</ul>
dan hasilnya seperti ini :
Gimana, mudah bukan...???
agar lebih menarik, kita dapat menggantinya dengan warna lain yaitu dengan merubah text yang berwarna merah berikut ini
class="win7"
dengan pilihan berikut :
* "win7yellow" [untuk warna kuning]
* "win7green" [untuk warna hijau]
* "win7red" [untuk warna merah]
