Pastinya sebagian dari kalian sudah tahu Windows 7 kan...???Yup, windows terbaru keluaran microsoft setelah windows Vista ini memang sekilas tidaklah berbeda dengan windows Vista.
Tapi bukan itu yang akan kita bahas. Yang akan kita bahas adalah bagaimana cara membuat "Button" atau "Tombol" untuk dipasang di web atau blog kita. Akan tetapi button ini akan kita buat berbada dari biasanya.
Kalau yang biasanya hanya kita buat hyperlink Seperti ini atau
maka akan kita buat
seperti ini
Menarik bukan...
Yup, style tersebut diadopsi dari button Windows 7 dimana Efeknya adalah "cahaya yang mengikuti mouse saat kita arahkan diatas tombol.
Efek ini Kompatibel Dengan : 6, 7, 8 |  3.0, 3.5 |  3 |  4 |
Oke, Langsung kita mulai aja.
Disini kita butuh bantuan dari dua javascript berikut ini :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js">
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
Script tersebut dapat kita letakkan di antara tag <head> dan tag </head>.
Selanjutnya yang kita butuhkan adalah Style CSS.
Tuliskan kode CSS berikut ini.
.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/AVvXsEhfsbNnSeoMDKai7zSe-zoQnNInN3CrcNBaYbAodBTymaL9lQ3qfOVoZrCn-VtWs-JopwxxJ2_ItlrOrjUXqWBTgyc8qQFfu5oRgcTfTKGHyS0i8Assk6io8gR3fP4Ywemep2D4F7Z04stP/) 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/AVvXsEhfsbNnSeoMDKai7zSe-zoQnNInN3CrcNBaYbAodBTymaL9lQ3qfOVoZrCn-VtWs-JopwxxJ2_ItlrOrjUXqWBTgyc8qQFfu5oRgcTfTKGHyS0i8Assk6io8gR3fP4Ywemep2D4F7Z04stP/) 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/AVvXsEhw5wZO7qPyChDFprGDzeO9WnaN55bCB6dX1J0vNWbwu7nnT_8N1iifMFrgT72fzJ4LUKDEfh0ooVH1H7m1pCkLxtiU99sdxIBKUQWNa1HPJerfKArMWolecW6nIkOoqylGBCWekFI2r1AI/) 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/AVvXsEjSaUIvRqaEL-mRxwZoA2zg24U_d4P8peR0YPfFEX7J6qdBWANKORn2Bk0KQ-tlfPvIXzNTrev4ksUW3U98r4lwC8tmGV0gZj-1lNhezFtNf_d6kyejP6ZOaZkkATD0SKRQM_rvzxLLvQ47/);
background-repeat:no-repeat;
}
.win7yellow div
{
width:100%;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSjtgr4tsz1RuK0sQZkmPcLtJEv1RgciYSA5YKFo_4mz4-6V4W5ZwtXwsF49pwy9eccp5W1L_bDIIDomQ_lKJc-Cxjz2bK0K2IE6dpHIIgLt5URwuiwDV-EO1K8U5QPAr8lulk6aGgTYjl/);
background-repeat:no-repeat;
}
.win7red div
{
width:100%;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH_sMWG37PVBb_-2tQmSmMPa_9BYS9w7iuwqeA6rGmJX2d8nsGtF6JFOcCj3xryoT5Hm3S5LtYXbA8XZzKFrxTtkHlCHbk2Q53K_ftSo505LwuDQaIqeCbLOy39f0KUhWZutTLgN6Zqtrl/);
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;
}
Nah, tulisan yang berwarna merah tadi tergantung dengan lokasi dimana kalian menyimpan/upload gambarnya. Untuk pemasangan di blogger, script CSS tadi dapat diletakkan diatas tag </style>.
Selanjutnya akan kita pasang JavaScript.
<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>
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>
Script tadi tinggal kita letakkan diatas tag </head>.
Nah, untuk proses instalasi sudah selesai, sekarang tinggal kita mengaplikasikannya.
Untuk memunculkan button-nya kita tinggal menggunakan script berikut :
<span class="win7">
<a href="Alamat Tujuan">Tombol Win7</a>
</span>
maka jika berhasil akan menjadi seperti :
Tombol 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]
*.:｡✿ Don't forget to come back again ✿.｡.:*
Visit Wahyudi Blog !
Special Thanks to : Coder.me For this.
bagus tutornya gan..ajarin ane donk gan..hehe
BalasHapusane nyoba kok g berhasil ya?kl tombolnya bisa tp kl di headnya jdnya jelek..
:106
@ CoreNetProject....
BalasHapusNah, tadi aku lihat udah bisa...
Blog "CoreNetProject" bagus juga... :D
Makasih udah berkunjung...
mantap kang izin sedot yah..^^ :124
BalasHapus