Smart Note

dah lama nulis di blog
sibuk kerjaan soalnya. :v

hmmh.. kmaren iseng2 blajar bikin web portal sendiri.
hasil googling nyari2 tiap elemen2 portalnya. salah satunya yaitu menu.
kmaren ktemu ama yg namanya rolling menu effect. pake jquery.
stelah utak atik sdikit. akhirnya jadi juga.
hasilnya bisa dilihat disini http://fake.hol.es


nah, gimana cara bikinnya?
langsung aja step by stepnya yak:

STEP 1
kita ambil dulu library jquery nya, ane ngambil dari http://ajax.googleapis.com , nah biar gampang. ambil aja ini. yg udah ane save di site ane.
taro script ini diatas tag


STEP 2
klo udah, skrang kita tambahin CSS nya


di bagian ini

yang warna merah, itu link gambar icon menunya. bisa aja diganti sesuai gambar yg senada sama warna webnya.


STEP 3
sekarang kita masukin div nya. ato yang munculin nih menu.
taro script ini ditempat dimana kita mau nempatin menunya. bisa di bawah head. ato dimana aja.


<!-----------------------------MENU START-------------------------------->
     <div id='rocking-rolling'>
    <div class='item'>
    <a class='link icon_chat'></a>
    <div class='item_content'>
    <h2>REACH ME via</h2>
    <p>
    <a href='#'>Email</a>
    <a href='#'>Facebook</a>
    <a href='#'>Twitter</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_archives'></a>
    <div class='item_content'>
    <h2>ARCHIVES</h2>
    <a href='#'>Shell</a>
    <a href="#">Bot</a>
    <a href="#">Local Root</a>
    <a href="#">Tools</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_tools'></a>
    <div class='item_content'>
    <h2>TOOLS</h2>
    <p>
    <a href='#'>MD5</a>
    <a href='#'>BASE64</a>
    <a href='#'>SHA1</a>
    <a href='#'>IP</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_profil'></a>
    <div class='item_content'>
    <h2>ABOUT</h2>
    <p>
    <a href='#'>Me</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_home'></a>
    <div class='item_content'>
    <h2>HOME</h2>
    <p>
    <a href='#'>Portal</a>
    <a href='#'>Blog</a>
    <a href='#'>Forum</a>
    </p>
    </div>
    </div>

    <div style='clear:both;'></div>
    </div>

    <script type='text/javascript'>  function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({wid​th:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(t​rue,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).​stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fade​In(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hov​er(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)})  </script>
<!---------------------------MENU END------------------------------------>



    
untuk menunya silakan disesuaiin sendiri.
di bagian:

<h2>REACH ME via</h2>
<p>
<a href='#'>Email</a>
<a href='#'>Facebook</a>
<a href='#'>Twitter</a>
</p>

yups.. selesai.
save.

coba di test.

DEMO | DOWNLOAD


klo masi bingung, silakan ditanyakan.
sekian dr ane.

kali aja ada yg bingung pas mo kasi warna di website, tp ga tau kode html nya. ato yg suka design. pas maen photoshop. masi kurang pas buat ngdapetin warna yg dimaksud. dibawah ini ane lampirin chart. kode warna HTML.

















moga bermanfaat.

ehmm.. sore2 update blog dulu lah, lama ga posting.. dapet ilmu lg td.. langsung praktek. sebaik2nya ilmu itu ilmu yg bermanfaat. jd ane share aja, kali aja bermanfaat ,drpada punya ilmu dewa tp ga dishare mungkin bagi yg uda jago design kaya gini mah cetek. tp mnurut ane yg masi amatiran bgini mah uda ribet bgt.

yaudah, latian yg simple aja..
yuuk
Step 1
Buat dokumen baru, atur lebar menjadi 800px dan Tinggi 600px.

step 3
pencet Ctrl+E di Keyboard, buat gabungin layer

step 4
klik Filter>Distort>Wave. Atur settingnya kek gambar dibawah , klo udah klik OK.

step 5
next.. klik Filter>Pixelate>Fragment sampe jadi kek gini

step 6
klik lg Filter>Style>Glowing Edges. Atur settingnya jadi begini. trus klik OK.


step 7
next.. tekan Ctrl+A trus Ctrl+C di keyboard buat ngopy, trus Paste (Ctrl+V) di bagian Channel, stelah klik New Channel yg ada di sudut kanan bawah (lihat gambar dibawah), Channel baru otomatis muncul dg nama "Alpha 1"


step 8
balik lg ke Layer Palette, klik icon New Layer trus pilih Select>Load Selection. trus buka channel palette Pilih "Alpha 1", smpe muncul bagian yang terseleksi (lihat gambar dibawah), isi bagian yang keseleksi itu pake warna putih gunain Paint Bucket Tool.

step 9
next.. Ctrl+J (buat duplikat layer) di bagian layer Background smpe muncul layer background copy, trus pilih Filter>Blur>Gaussian Blur. Atur radiusnya jadi 1.5 pixel, klik OK.


step 10
lanjut... ketik teks HACKER di keyboard,tempatin di atas NEWBIE pojok kanan. trus pilih Filter>Blur>Gaussian Blur. Atur
radiusnya menjadi 0.5 pixel, klik OK



 
step 11
bikin layer baru, trus pilih Filter>Render>Cluods, pastiin Foreground Putih dan Background nya hitam, trus double klik di bagian layer Clouds smpe muncul jendela Layer Style, centang pada bagian Gradient Overlay, atur kek gini

 
 step 12
Ubah Blending Mode nya jadi Screen dan turunin Opacitynya jadi 35 % , hasilnya kek gini


 
step 13
Masukin gambar lingkar-lingkar cahaya (donlot disini)
Sesuaiin ukurannya, klik Enter di keyboard

step 14
Ubah Blending Mode di layer gambar lingkar2 td jadi Soft Light trus turunin Opacitynya jadi 85 %.

 
step 15
trus pilih Image>Adjusments>Exposure. Atur settingnya kek gini




HASIL AKHIR