Tuesday, September 21, 2010

Membuat Menu Buttom Slide Out Dengan Jquery Dan CSS3


Selamat Sore Sahabat DJ Site Semua,

Sebenernya sih dari pagi niat untuk bikin postingan di DJ Site udah ada hhe, cuma berhubung lagi cinta-cintanya sama CSS3 jadi malah Blog Catatan pribadi yang jadi korban postingan saya tadi pagi hhe... Dan waktu mau posting di DJ Site ternyata udah siank, jadi saya mesti buru-buru Offline wkwkwk... Dan baru sore ini saya bisa kembali Posting hhe...

Nah, Sore ini saya mau posting tutorial lagi untuk anda. Berhubung di Blog sebelah saya udah bikin tutorial bikin Table kaya Hostingan, jadi disini saya mau ngasih tutorial yang lain untuk anda. Sebenernya Tutorial ini pernah saya aplikasikan di Blog Joomla terdahulu dan pernah juga dipake di salah satu blog saya dulu cuma berhubung waktu itu saya belum kenal sama CSS3(kayanya masih belum di publikasikan hhe), jadi serba ribet klo dibikin tutorial apalagi mesti Upload banyak gambar untuk Backgroundnya hhe... Dan berhubung sekarang Udah ada CSS3 yang gak butuh Background, barusan saya isenk nyoba Bikin Menu Button Slide Out ini lagi tapi gak pake gambar banyak-banyak kaya dulu wkwkw.... Dan hasilnya ternyata sama kaya yang di Joomla untuk itu sekalian aja saya share ke anda....

Untuk yang mau preview atau ng'liat Demonya dulu silahkan klik DISINI, dan klo loadingnya udah selesai silahkan arahkan kursornya ke Menu yang ada diatas....

Disini saya gak memasukkan Url link di Menu tersebut, jadi klo anda berminat dan ingin membuat menu tersebut dengan Link Url anda silahkan anda rubah Tag HTMLnya dan tambahkan linknya.....

Okeh langsung aja yach:

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

]]></b:skin>

5. klo udah ketemu masukkan Kode CSS dibawah ini tepat diatas kode ]]></b:skin> tersebut

.container{
width:900px;
height:130px;
margin:0 auto;
position:relative;
overflow:hidden;
border:3px solid #fff;
background-color:#fff;
-moz-box-shadow:1px 1px 6px #000;
-webkit-box-shadow:1px 1px 6px #000;
-moz-border-radius:0px 0px 20px 20px;
-webkit-border-bottom-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
border-radius:0px 0px 20px 20px;
}
ul#menu{
list-style:none;
position:absolute;
bottom:0px;
left:20px;
font-size:36px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
color:#999;
letter-spacing:-2px;
}
ul#menu li{
float:left;
margin:0px 10px 0px 0px;
}
ul#menu a{
cursor:pointer;
position:relative;
float:left;
bottom:-95px;
line-height:20px;
width:210px;
}
.icon_about,
.icon_work,
.icon_help,
.icon_search{
width:64px;
height:64px;
display:block;
left:140px;
top:50px;
position:absolute;
}
.icon_about{
background:transparent url(http://i785.photobucket.com/albums/yy131/djnand/id_card.png) no-repeat top left;
}
.icon_work{
background:transparent url(http://i785.photobucket.com/albums/yy131/djnand/globe.png) no-repeat top left;
}
.icon_help{
background:transparent url(http://i785.photobucket.com/albums/yy131/djnand/help.png) no-repeat top left;
}
.icon_search{
background:transparent url(http://i785.photobucket.com/albums/yy131/djnand/find.png) no-repeat top left;
}
ul#menu span.title{
display:block;
height:26px;
text-shadow:1px 1px 1px #000;
color:#B7B7B6;
text-indent:10px;
}
ul#menu span.description{
width:140px;
height:80px;
background-color:#B7B7B6;
border:3px solid #fff;
color:#fff;
display:block;
font-size:24px;
padding:10px;
-moz-box-shadow:1px 1px 6px #000;
-webkit-box-shadow:1px 1px 6px #000;
box-shadow:1px 1px 6px #000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
ul#menu a:hover span.description{
background-color:#54504F;
}
ul#menu a:hover span.title{
color:#54504F;
}

Udah belum? klo udah kita beralih lagi dan cari kode <body>

Klo udah ketemu masukkan HTML ini dibawah kode tersebut

<div class="container">
<ul id="menu">
<li>
<a>
<i class="icon_about"></i>
<span class="title">About</span>
<span class="description">
Learn about us and our services
</span>
</a>
</li>
<li>
<a>
<i class="icon_work"></i>
<span class="title">Work</span>
<span class="description">
See our work and portfolio
</span>
</a>
</li>
<li>
<a>
<i class="icon_help"></i>
<span class="title">Help</span>
<span class="description">
Talk to our support
</span>
</a>
</li>
<li>
<a>
<i class="icon_search"></i>
<span class="title">Search</span>
<span class="description">
Search our website
</span>
</a>
</li>
</ul>
</div>

Udah? klo udah jangan ngopi dulu kerjaan anda belum tuntas.. sekarang beralih dan cari kode </head>

Udah Ketemu? klo udah masukkan Javascript ini tepat diatasnya

<script src='http://djkeren.googlecode.com/files/djbuttomslider.js' type='text/javascript'/>

Atau klo anda lebih suka yang ribet nie saya kasih Javascript aslinya:

$(function() {
$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-15px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'-10px'
}, 400);
},
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-95px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'50px'
}, 400);
}
);
});

Gimana baik kan saya haha.... klo semua tahap diatas udah anda lakukan silahkan save template anda dan ambil Cangkir kopi anda hhe.....

* Image Icon di Kode CSS-nya terpaksa saya gunakan karena saya gak bisa bikin Gambar Bola dunia dan lainnya itu pake CSS hhe... dan klo Sahabat DJ Site ada yang bisa nggeh monggo silahkan di Share cara bikin Icon tanpa Imagenya hhe... Dan untuk keterangannya silahkan ganti dan rubah sesukanya karena disini saya cuma memberi contoh hhe....

Buat Sahabat DJ Site Semua, Happy Blogging N Have A Nice Day....


36 komentar:

narti said...

lihat demonya boleh juga tuh...
jadi sekarang punya rumah(blog) berapa nih?
salut deh... :)

sda said...

kalau nyoba harus bikin blog lagi nih...
takut gagal...hehe...

Manchester United Tech | Berita Sepak Bola said...

kayaknya keren nih...ane coba dulu sob, moga aja berhasil..
thx udh share n happy blogging..

Djangan Pakies said...

Sonten kang, hari ini mampir dua kali nyambangi sahabat.

Meluncur ke TKP Demo, ternyata hasilnya mangstaf dan menarik. benar-benar 180 derajat celcius

aliem said...

ra mudeng kang...

saka hero said...

sebelumnya makasih mas tutorialnya, jujur lagi males banget nih oprek template. Pusing tugas sana-sini mas.
Cuman pengen blog walking ke rumahnya mas ferdinand aja, sukses selalu mas :D

bajul ijo said...

wah mantap tuh om, kebetulan saya baru bikin blog so bisa dipraktekin nih.

orang kampung said...

met malem sobat, lama gak main kesini tambah keren tuh tutorialnya, saya ijin save aja dulu.. soalnya kalo diliat dari previewnya gak mungkin diterapin diblog saya, sudah terlalu rame widget soalnya, ntar kalo mau bikin blog baru bisa kepake deh.. thank's for share brader

Rock Theory Bontang said...

ane uda liat sob, keren pisan...

tomo said...

kodenya panjang sekali

rawins said...

ngintip dulu aja deh om. lagi di warnet neh susah buat uprak uprek

om rame said...

keren Fer, jadi kepingin. tapi apa daya beLakangan ini waktu ngebLog Lg menipis, paLing cuma bisa update dan baLas komen pengunjung terus kunjungi beberapa teman akrab aja. seLebihnya offLine Lg.

kaLi aja ada tempLate yg mau diwarisin enggak apa2, dari pada cuma nganggur buat ngetes doang. hehehe... ngarepdotcom.

fb said...

Sekarang banyak kode yang pake jsquery ya

Rela Rahmah said...

ih lucu, kalo dideketin kursor, itunya naik.. *sempet mainin itu beberapa menit* wkekekeke ^^

deasy-world said...

Thanks dah di sharing Ferdinand! meskipun gak tahu banyak mengenai CSS.. cuma ingin terus belajar>>walaupun otodidak.

Sukses sll DJ-Site!

Shudai Ajlani said...

oke fer aku lansung liat ke demonyaaaa :D

rizal said...

sy udah lihat demonya dan sanagt mantap sekali, jadi lebih hidup blog kita...

btw. desig templatenya juga mantap tu, nngak ada link downloannya ya hee..he...

Unknown said...

bikin pgn ganti menu horizontalku...asem kok....

Unknown said...

Aduh maniz banget menunya,vertikal limit.Kalau yang model horizontal gimana?

dinohp said...

Mantap mas,thanks atas tutorialnya..

Unknown said...

Wah... keren banget sob menunya.... animasinya naik turun gitu kalao di klik,,,, keren dech....

Unknown said...

waaah Tpo neh..demona keren.. Menu nya bagus bgt gan... tpi gw lagi meminimalisir penggunaan script .js... suka bikin loding blog berat or suka bikin salah satu widget-ku error.. :)

Kumpulan Soal CPNS Lengkap said...

keren surantap tenan, menunya bisa ciluk- baa.. wkwkwk..
nek jumla mudeng -dikit- mbajak modul punya temen he he, tak simpen odene buat koleksi.. teng qiyu :)

Domain Forwarding said...

pokoke ane usule teteuup: bikin dj-template.blogspot.com khusus, kayaknya mantep pak dj..
bakal banyak yang naksir dan pasang di blognya (termasuk ane) xexexe -kabuur-

tiwi said...

hmmm...ora ngeh...he3..., ntr aja kl ada kesulitan konsul lgsg sm suhunya DJ SITE ini...he3..,tq...

Eka ninjitsu said...

dari dulu pengen tombol yg kayak gini, akhirnya ketemu juga hehehehe.... Ntar Kapan2 aku coba Sobat... Happy Blogging juga dan selamat beraktivitas yah...

deasy said...

Belajar banyak disini...Thanks DJ-Site!

Happy Blogging Ferdinand!

DJ Site said...

terlalu ribet dan norak, bukan malah bagus tapi malah norak sob

Ummi Ubay said...

wadooh chika gx ngarti >.<

Berpikir Positif said...

saya selalu salut dengan para blogger tutorial yang selalu siap sharing pengetahuan mereka, seandainya nggak ada blogger seperti itu mana bisa blog aku jadi , maklum nggak ngerti html , atau css sob jadi kalau udah tingkat tinggi seperti ini cuma bisa uji coba saja

TUKANG CoLoNG said...

aku gag ngopi brader..hehe
tumben gag pake cheers..hehe

eh aku mau masukin link url, tapi aku bingung mau masukin link apa terus dimana? haha

oia, ajarin dong brader biar warna latar komen admin beda ama yang lain..:)

perawatan ac said...

wah mantepp tuhh ane dah lihatt sobb..bisa nongol2 gitu yahh..ngerjain ini bisa mumet 7 keliling dehhh,,,

attayaya speedtest said...

yihaaaaaaaaaaaaaaaa

catatan kecilku said...

Aku terus terang aja waktu baca judulnya bingung, gak paham maksudnya. Tapi waktu lihat demo-nya langsung terpana... bagus bener... :)

the others.... said...

Mampir lagi, setelah beberapa hari terpaksa absen blogging.

situsonline said...

Selamat malam,,,bagi yg langsung ke TKP jgn lupa makan dulu ya...!biar mantap !

DJ Site - Since 2009 Until Now

Creative Commons License
Blog Content by Ferdinand is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Based on a work at https://dj-site.blogspot.co.id/.

Themes by blogcrowds. Design With ❤ for Blogger Serabutan