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....
36 komentar:
lihat demonya boleh juga tuh...
jadi sekarang punya rumah(blog) berapa nih?
salut deh... :)
kalau nyoba harus bikin blog lagi nih...
takut gagal...hehe...
kayaknya keren nih...ane coba dulu sob, moga aja berhasil..
thx udh share n happy blogging..
Sonten kang, hari ini mampir dua kali nyambangi sahabat.
Meluncur ke TKP Demo, ternyata hasilnya mangstaf dan menarik. benar-benar 180 derajat celcius
ra mudeng kang...
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
wah mantap tuh om, kebetulan saya baru bikin blog so bisa dipraktekin nih.
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
ane uda liat sob, keren pisan...
kodenya panjang sekali
ngintip dulu aja deh om. lagi di warnet neh susah buat uprak uprek
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.
Sekarang banyak kode yang pake jsquery ya
ih lucu, kalo dideketin kursor, itunya naik.. *sempet mainin itu beberapa menit* wkekekeke ^^
Thanks dah di sharing Ferdinand! meskipun gak tahu banyak mengenai CSS.. cuma ingin terus belajar>>walaupun otodidak.
Sukses sll DJ-Site!
oke fer aku lansung liat ke demonyaaaa :D
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...
bikin pgn ganti menu horizontalku...asem kok....
Aduh maniz banget menunya,vertikal limit.Kalau yang model horizontal gimana?
Mantap mas,thanks atas tutorialnya..
Wah... keren banget sob menunya.... animasinya naik turun gitu kalao di klik,,,, keren dech....
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.. :)
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 :)
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-
hmmm...ora ngeh...he3..., ntr aja kl ada kesulitan konsul lgsg sm suhunya DJ SITE ini...he3..,tq...
dari dulu pengen tombol yg kayak gini, akhirnya ketemu juga hehehehe.... Ntar Kapan2 aku coba Sobat... Happy Blogging juga dan selamat beraktivitas yah...
Belajar banyak disini...Thanks DJ-Site!
Happy Blogging Ferdinand!
terlalu ribet dan norak, bukan malah bagus tapi malah norak sob
wadooh chika gx ngarti >.<
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
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..:)
wah mantepp tuhh ane dah lihatt sobb..bisa nongol2 gitu yahh..ngerjain ini bisa mumet 7 keliling dehhh,,,
yihaaaaaaaaaaaaaaaa
Aku terus terang aja waktu baca judulnya bingung, gak paham maksudnya. Tapi waktu lihat demo-nya langsung terpana... bagus bener... :)
Mampir lagi, setelah beberapa hari terpaksa absen blogging.
Selamat malam,,,bagi yg langsung ke TKP jgn lupa makan dulu ya...!biar mantap !
Post a Comment