widget ini di adaptasi dari safeermusafir dan HowDoBlog.com dan saya coba terapkan dengan versi bahasa indonesia, agar memudahkan dalam menginstalnya ke blog anda.
ok, bagi anda yang ingin memasangnya di blog silahkan ikuti lang kah berikut
1. masuk ke blogger.com
2. pilih tata letak → edit HTML→ expand template widget
3. cari kode ]]></b:skin>
tekan f3 pada keyboard atau ctrl+f untuk mempermudah pencarian.
4. setelah anda temukan kodenya silahkan tempatkan kode di bawah ini tepat diatas kode ]]></b:skin>
silahkan copy - paste
5. lalu cari kode <head> dan letakan kode berikut ini tepat di bawah/setelahnya.
#page_paramsInspector-shell .tabShell {
width:480px;
}
#page_paramsInspector-shell .tabShell {
width:480px;
}
#page_paramsInspector_settings {
width:400px;
height:286px;
font-size:12px;
}
#page_paramsInspector_preview {
width:466px;
}
.menuLinks {
position:relative;
width:200px;
background:#364040;
padding:10px;
padding-bottom:5px;
}
.menuLink, .menuLink:link, .menuLink:visited, .menuLink:hover, .menuLink:active {
display:block;
font-size:12px;
text-transform:uppercase;
font-weight:bold;
text-align:center;
letter-spacing:4px;
color:#bbb;
background:#000;
border:2px solid #000;
width:182px;
padding:5px 7px;
margin-bottom:5px;
text-decoration:none;
overflow:hidden;
}
<script src='https://dl.dropbox.com/u/24344387/How%20Do%20Blog/UIZE-JavaScript-Framework/js/Uize.js' type='text/javascript'/>6. SIMPAN/SAVE template anda.
7. lalu masuk ke Tata letak → add gadget → pilih HTML java script
8. masukan kode di berikut ini kedalam kotak html
9. ganti tulisan URL TUJUAN dengan url/link yang anda inginkan. dan save.
<script type="text/javascript">
Uize.module ({
required:[
'UizeDotCom.Page.Example.library',
'UizeDotCom.Page.Example',
'Uize.Widget.HoverFader',
'Uize.Curve.Rubber',
'Uize.Fx.xShadows'
],
builder:function () {
/*** create the example page widget ***/
var page = window.page = UizeDotCom.Page.Example ();
/*** create the hover fader instance ***/
page.addChild (
'hoverFader',
Uize.Widget.HoverFader,
{
nodes:{className:/\bmenuLink\b/},
defaultStyle:{marginLeft:0,marginTop:0,
color:'f',borderColor:'#9F9797',
backgroundColor:'044',
textShadow:'-3 0 3 #0,3 0 3 #0,#0ff -30 0 .5em,#0ff 30 0 .5em,#0f0 -20 0 1em,#0f0 20 0 1em'
},
hoverStyle:{marginLeft:5,marginTop:5,borderColor:'0',
color:'8',
backgroundColor:'000',
textShadow:'0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em'
},
fadeIn:{duration:350},
fadeOut:{duration:1000}
}
);
/*** wire up the page widget ***/
page.wireUi ();
}
});
</script>
<table border="0" cellspacing="0" cellpadding="4" style="margin:auto;">
<tr valign="top">
<td>
<div>
<div style="left:20px; top:0px;">
<a href=" YOUR_PAGE_URL " style="
textShadow:0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em;">About Us</a>
</div>
<div style="left:77px; top:93px;">
<a href=" URL TUJUAN " style="background:#0;">Products</a>
</div>
<div style="left:176px; top:17px;">
<a href=" URL TUJUAN " style="background:#0;">Services</a>
</div>
<div style="left:232px; top:158px;">
<a href=" URL TUJUAN " style="background:#0;">Technology</a>
</div>
<div style="left:319px; top:-8px;">
<a href=" URL TUJUAN " style="background:#0;">Solutions</a>
</div>
<div style="left:390px; top:73px;">
<a href=" URL TUJUAN " style="background:#0;">My Account</a>
</div>
<div style="left:506px; top:-3px;">
<a href=" URL TUJUAN " style="background:#0;">Store Locator</a>
</div>
<div style="left:559px; top:90px;">
<a href=" URL TUJUAN " style="background:#0;">Investors</a>
</div>
<div style="left:42px; top:176px;">
<a href=" URL TUJUAN " style="background:#0;">Support</a>
</div>
<div style="left:447px; top:176px;">
<a href="URL TUJUAN" style="background:#0;">Contact Us</a>
</div>
</div>
</td>
<td id="page_paramsInspector-shell"></td>
</tr>
</table>
.png "English"){kind=small}
0 komentar:
Post a Comment