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:
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....
* 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....
jadi sekarang punya rumah(blog) berapa nih?
salut deh... :)
takut gagal...hehe...
thx udh share n happy blogging..
Meluncur ke TKP Demo, ternyata hasilnya mangstaf dan menarik. benar-benar 180 derajat celcius
Cuman pengen blog walking ke rumahnya mas ferdinand aja, sukses selalu mas :D
kaLi aja ada tempLate yg mau diwarisin enggak apa2, dari pada cuma nganggur buat ngetes doang. hehehe... ngarepdotcom.
Sukses sll DJ-Site!
btw. desig templatenya juga mantap tu, nngak ada link downloannya ya hee..he...
nek jumla mudeng -dikit- mbajak modul punya temen he he, tak simpen odene buat koleksi.. teng qiyu :)
bakal banyak yang naksir dan pasang di blognya (termasuk ane) xexexe -kabuur-
Happy Blogging Ferdinand!
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..:)