Saturday, November 2, 2013
Browse Manual »
Wiring »
color
»
fading
»
hover
»
jquery
»
navigation
»
with
»
Navigation Color Fading Hover With jQuery
jquery
widget
SEO
Javascript
langkah-langkah membuatnya di bawah ini :
Seperti biasanya masbro masuk dulu Dasboard >> Template >> Centang Expands Widget Templates
-Lalu taruh kode berikut di atas ]]></b:skin>
-Kemudian cari kode </head> dan taruh kode jQuery berikut tepat di atasnya
Catatan :
- Teks ang Berwarna hijau adalah scriptnya, jika sobat sudah pernah memasangnya, maka script diatas tidak perlu lagi (biar gak double).
-Selanjutnya sobat tinggal pilih mau di taruh dimana menunya misalnya di widget caranya Tambah Widget >> HTML/JavaScript and masukin deh kodenya nih ada di bawah ( atau bisa juga di bawah Tag <body> ).
Selanjutnya tinggal simpan,gimana gampang kan bikinnya,,?? jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^
Navigation Color Fading Hover With jQuery
Fading Hover Effects
CSSjquery
widget
SEO
Javascript
langkah-langkah membuatnya di bawah ini :
Seperti biasanya masbro masuk dulu Dasboard >> Template >> Centang Expands Widget Templates
-Lalu taruh kode berikut di atas ]]></b:skin>
/*Jquery Color Fading Hover*/
#pageWrap {
width:100%;
background-color:transparent;
margin:10px auto;
}
#pageBody {
width:100%;
}
.hoverBtn {
position:relative;
float:left;
background:#444 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2wMHk-0pTSsxivLe1z8w16RlR6-Lhubh1IWrjIpuApt6I-huogdPLAFzWteQxf5huoVYSQbA3mSN5DHLNn1BfD8kmv6rGv_KA4DlCvbypxq1NXPRWG2QaCgyAjQfd0X7P8s57iq_Mqviw/s1600/untitled.png);background-repeat:repeat;
border:2px dashed darkolivegreen;
-moz-box-shadow: 0px 10px 20px #000;
}
.hoverBtn a {
position: relative;
z-index:2;
display: block;
width:100px;
height:30px;
line-height:30px;
text-align: center;
font-size:1.1em;
text-decoration:none;
color:#fff;
text-shadow: 0px 2px 1px #000,0px 3px 1px #000;
background:transparent none repeat-x 0 0 scroll;
}
.hoverBtn div {
display:none;
position:absolute;
z-index:1;
top:0px;
background:#FAA907 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2wMHk-0pTSsxivLe1z8w16RlR6-Lhubh1IWrjIpuApt6I-huogdPLAFzWteQxf5huoVYSQbA3mSN5DHLNn1BfD8kmv6rGv_KA4DlCvbypxq1NXPRWG2QaCgyAjQfd0X7P8s57iq_Mqviw/s1600/untitled.png);background-repeat:repeat;
-moz-box-shadow: -2px 1px 40px #FAA907;
}
-Kemudian cari kode </head> dan taruh kode jQuery berikut tepat di atasnya
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js type=text/javascript></script>
<script src=http://-blogspot-com.googlecode.com/files/jQueryColor.js type=text/javascript></script>
<script src=http://-blogspot-com.googlecode.com/files/FadingColor.js type=text/javascript></script>
Catatan :
- Teks ang Berwarna hijau adalah scriptnya, jika sobat sudah pernah memasangnya, maka script diatas tidak perlu lagi (biar gak double).
-Selanjutnya sobat tinggal pilih mau di taruh dimana menunya misalnya di widget caranya Tambah Widget >> HTML/JavaScript and masukin deh kodenya nih ada di bawah ( atau bisa juga di bawah Tag <body> ).
<div id="pageWrap"><div id="pageBody"><h1>Fading Hover Effects</h1><a class="hoverBtn" href="http://.blogspot.com/search/label/CSS3">CSS</a>
<a class="hoverBtn" href="http://.blogspot.com/search/label/jQuery">jquery</a>
<a class="hoverBtn" href="http://.blogspot.com/search/label/Widget">widget</a>
<a class="hoverBtn" href="http://.blogspot.com/search/label/SEO">SEO</a>
<a class="hoverBtn" href="http://.blogspot.com/search/label/Javascript">Javascript</a>
<div class="clear"></div></div></div>
Selanjutnya tinggal simpan,gimana gampang kan bikinnya,,?? jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment