CSS Collor Style Menu Bar - Nungguin adzan maghrib yang masih lama mending kita berbagi bagaimana caranya membuat menu bar yang cukup atractive untuk diterapkan pada sebuah blog. ya daripada bengong terus ngayal yang gak jelas kan bisa ngurangin pahalanya puasa hehe. Menu yang [OBC] tawarkan kali ini cukup sederhana tapi masih tetep bisa jadi pilihan brada dalam membuat menu . Kalau menunya cocok silahkan brada ikuti cara pasangnya , tapi alangkah baiknya brada cek dulu demonya dibawah ini.
Kustomisasi
Untuk menempatkan posisi menu sekarang cari kode <div id='content-wrapper'> dan tempatkan kode dibawah ini sebelum kode <div id='content-wrapper'>
Brada juga bisa menempatkan menunya langsung pada Tata letak >> Add Gadget / HTML Javascript dan masukan kodenya lalu SAVE dan lihat hasilnya.
Selamat menjalankan ibadah puasa !!!
- Masuk Edit HTML
- Cari kode </head>
- Masukan kode dibawah ini tepat diatas sebelum kode </head>
<style>
*{padding:0; border:0; margin:0;}
#default a,
#example a{
display:block;
width:90px;
height:46px;
margin-right:3px;
float:left;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqzjcpzus_EE93PDHC3SqrtBTWtLnf6edJ1E4MwI0nZgrDizRrxlFMUf8g7Ay2z2OrRbjU0N2lfhmXJI-iKVjASux9Yx6kf5E8glbEOQs_q4-v8rqWrW6Ay2YdXVcQE4qxbRbh3S9ZcHc/s1600/nav-sprite.png);
background-repeat:no-repeat;
cursor:pointer;
text-indent:-9999px;}
#example_home{background-position:0 0;}
#example_home:hover,#example_home.hover{background-position:0 -48px;}
#example_blog{background-position:-90px 0;}
#example_blog:hover,#example_blog.hover{background-position:-90px -48px;}
#example_demo{background-position:-180px 0;}
#example_demo:hover,#example_demo.hover{background-position:-180px -48px;}
#example_about{background-position:-270px 0;}
#example_about:hover,#example_about.hover{background-position:-270px -48px;}
#example_services{background-position:-360px 0;}
#example_services:hover,#example_services.hover{background-position:-360px -48px;}
#example_contact{background-position:-450px 0;}
#example_contact:hover,#example_contact.hover{background-position:-450px -48px;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'/>
<script src='jquery.blend.js'/>
<script>
$(document).ready(function(){
$("#example a").blend();
$("#example2 a").blend();
});
</script>
Untuk menempatkan posisi menu sekarang cari kode <div id='content-wrapper'> dan tempatkan kode dibawah ini sebelum kode <div id='content-wrapper'>
<div id='demo'>
<div id="example">
<a href="#" id="example_home">Home</a>
<a href="#" id="example_blog">Blog</a>
<a href="#" id="example_demo">Demo</a>
<a href="#" id="example_about">About</a>
<a href="#" id="example_services">Services</a>
<a href="http://www.s2free.org/" id="example_contact">Add This</a>
</div></div>
Brada juga bisa menempatkan menunya langsung pada Tata letak >> Add Gadget / HTML Javascript dan masukan kodenya lalu SAVE dan lihat hasilnya.
Selamat menjalankan ibadah puasa !!!
mantapp kang rul demo menunya..
BalasHapusmaaf baru bisa berkunjung lama gak blogging kena gangguan koneksi, nih udah ngebut lagi bisa bolak balik kesini lagi deh..
wis baru nongol neh
Hapusselamat datang di zona bebas hambatan hahaha
waduh id nya banyak banget yaa gan hehe
BalasHapusmaklum seharian puasa jadi makannya banyak he
Hapuskomenna meuni promo blog pisan.... wkwkwkkwkwkwk
Hapuswkwkwkwk haha lah kang hehe
Hapushemm... gak ngerti bahasa sunda nih kang hehe
HapusTunggu aja google translate hehe
Hapuskapan2 aku praktekin ah kang... hehehe... keren nih tutorial css color style menu bar nya ... :)
BalasHapusSahur kang .....
monggo silahkan kang ...
Hapuslagi sibuk y .. nembe nongol yeuh
weits mantapp mas
BalasHapusweits lumayan hehe
Hapusfollow back ya.. sy sdh follow blogmu
Hapusoks sob ....
HapusWah ini memang sangat keren mas, bisa dicoba kayaknya nih
BalasHapusterima kasih tutorialnya
monggo silahkan mas ...
Hapuswew mantab banget dah. ^_^
BalasHapuslumayan brada .....
HapusAdmin blog demonya cewek lagi. Maknyuss.. :D
Hapusya itulah art of blogging mas hehe
Hapusternyata dalam blogging ada seninya juga yah mas Ruly keren deh hehe...
Hapusdalam semua hal ada seni nya sob hehe korupsi juga ada seninya ( seniwen ) hehe
HapusHebat juga penguasaan css-nya. Lumayan ngerti sedikit. Cuma untuk pemanggilan javascript dan cara buatnya yang belum mengerti. Ane malah tertarik cara membuat javascriptnya. Kalau asal copy paste semua orang bisa kan?
BalasHapusIlmunya itu yang penting.
lumayan sob hehe
Hapusnice tutor ini sebenarnya untuk jadikan saling belajar aja
Keren mas Ruly menu barnya bisa berwarna warni, kapan-kapan saya coba, makasih buat tutorialnya :)
BalasHapuslumayan ,, silahkan sob di cicipi he
HapusIzin nyobaan kang ah :) hatur nuhun tutorna. hhe
BalasHapusmangga kang raosan bisi kirang uyah mah punten we maklum nuju saum hehe
Hapuslumayan ribet juga ya kode-kodenya.
BalasHapusgak juga sob ,, tapi iya juga y hehe
Hapusbhahahah, tapi keren hasilnya
Hapuslumayan sob ...
HapusKeren sob,,,,,tapi kalo buat menu buka puasa gak cocok neh he,,he,,,
BalasHapuscocok ki .. apalagi buat yng ompong hehe
Hapushahah bisa wae eunk si aki heuheu
Hapusnyaeta atuh kang hehe ...
HapusGlek... :D
HapusMa’af banget kang Bro baru bisa berkunjung lagi kesini,karena urusan DUTA yang sangat menyita waktuku hehe
BalasHapusBTW selalu ada tutor yang anyar wae eunk heuheu,,,
ya pastilah .. lebaran datang pasti panen kang
Hapusumayan kang daripada mikiran daging sapi mahal ...
Jadi hidup lebih hidup..penuh warna :)
BalasHapusKeren pisan kang Rul...tutorialnya :)
ya itu yg penting mas
Hapusbikin hidup lebih hidup
belum mudik ?
keren sangat nih , hehehhehe
BalasHapusback
lumayan sob ...
HapusBanyak banget kodenya sob. Udah puyeng duluan kalau berurusan dengan kode. Baru belajar ngeblog sob.
BalasHapus