Menu di dalam sebuah blog sangat berguna, dengan menu kita bisa memasang beberapa link yang mempunyai peran pokok dalam blog tersebut. Seperti di menu kita bisa memasang profil penulis, daftar isi, topik, link teman atau bisa juga di gunakan untuk memasang posting yang sangat-sangat berguna. Seperti contohnya di blog ini, top menu yang lumayan menarik menurutku karena jika di sentuh dengan kursor bisa memperbesar dirinya ^^
![Top]()
Semua blog pastinya udah mempunyai top menu sendiri-sendiri dengan tampilan yang berbeda-beda. Tapi kalian juga bisa merubahnya dengan top menu yang aku temukan ini dan akan aku bagi buat kalian yang ingin merubah top menu blog kalian. Ada beberapa warna yang tersedia.. ada warna merah muda, biru muda, kuning, hitam dan orange. Sudah siap merubahnya ? Silahkan ikuti langkah-langkah berikut ini !
Semua blog pastinya udah mempunyai top menu sendiri-sendiri dengan tampilan yang berbeda-beda. Tapi kalian juga bisa merubahnya dengan top menu yang aku temukan ini dan akan aku bagi buat kalian yang ingin merubah top menu blog kalian. Ada beberapa warna yang tersedia.. ada warna merah muda, biru muda, kuning, hitam dan orange. Sudah siap merubahnya ? Silahkan ikuti langkah-langkah berikut ini !
- Login Blogger.com
- Klik Design > Edit HTML
- Pasang kode berikut di atas kode ]]></b:skin>
/*LAVALAMP START*/
.lavalamp {
position: relative;
border: 1px solid #d6d6d6;
background: #fff;
padding: 15px;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
border-radius : 10px;
-moz-border-radius : 10px;
-webkit-border-radius : 10px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
height: 18px;
}
.magenta {
background : rgb(190,64,120);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
border: 1px solid #841144;
}
.cyan {
background : rgb(64,181,197);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
border: 1px solid #2f8893;
}
.yellow {
background : rgb(255,199,79);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
border: 1px solid #c08c1f;
}
.orange {
background : rgb(255,133,64);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
border: 1px solid #c04f11;
}
.dark {
background : rgb(89,89,89);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
border: 1px solid #272727;
}
.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.40);
}
a {
text-decoration: none;
color: #262626;
line-height: 20px;
}
ul {
margin: 0;
padding: 0;
z-index: 300;
position: absolute;
}
ul li {
list-style: none;
float:left;
text-align: center;
}
ul li a {
padding: 0 20px;
text-align: center;
}
.floatr {
position: absolute;
top: 10px;
z-index: 50;
width: 70px;
height: 30px;
border-radius : 8px;
-moz-border-radius : 8px;
-webkit-border-radius : 8px;
background : rgba(0,0,0,.20);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
}
- Pasang kode berikut di atas kode </head>
<script src='http://yourjavascript.com/3131111161/jquery-1.4.1.min.js'/><script src='http://yourjavascript.com/1414311106/lavalamp.js'/>
- Terakhir kita pasang kode nya di Design > Add Gadget > HTML/Javascript
<div class='lavalamp'>
<ul>
<li class='active'><a href='http://www.paulsantosh.com/'>Home</a></li>
<li><a href='YOUR-LINK-HERE'>About</a></li>
<li><a href='YOUR-LINK-HERE'>Blog</a></li>
<li><a href='YOUR-LINK-HERE'>Services</a></li>
<li><a href='YOUR-LINK-HERE'>Portfolio</a></li>
<li><a href='YOUR-LINK-HERE'>Contacts</a></li>
</ul>
<div class='floatr'/>
</div>
<span class='Apple-style-span' style='font-size: xx-small;'><a href='http://dopind.blogspot.com/2012/07/top-menu-fancy-lavalamp.html'>Design by Deo Pradipta</a></span>
#Ganti YOUR-LINK-HERE dengan link yang ingin kalian pasang
- Semoga bermanfaat buat keindahan blog kalian.. Makasih ^^
Referensi : http://bloggerbin.com/css3-fancy-lavalamp-menu-for-bloggers/
Artikel Terkait
Langganan:
Posting Komentar (Atom)
27 komentar:
keren sob menu navigasinya :)
hehe.. kerenan yg nulis kok B|
bos, gimana cara menampilkan menu pada blog ? maklum masih sangat newbi
kalo template dapet download biasanya langsung di layout klik edit pada 'menu' ..
kadang ada juga yg lewat edit HTML, klik F3 ketik '#' lalu ganti pagar dengan link anda.. sesuaikan dgan nama menunya yaa , jgan sampe salah pasang ^_^
*gunakan tanda petik juga
Ini yang aku cari-cari ....
makasih infonya ..
kalau cara bikin kayak kakak itu gimana?
home|Topik|daftar isi|
ehehehe.. makasih juga yaa sob :)
silahkan cek sendiri di view page source ^_^
kk Bisa Minto Tolong Gak.?
kk Gimana yah caranya buat menu lalu kalau menu itu terdiri dari menu lagi??
cek di blog sebelah http://allfreetips4u.blogspot.com/2009/12/membuat-menu-navigasi-dengan-sub-menu.html _^
gan bisa ajarin cara ngisi menu2 blog ?
sperti menu about me, kontak, servis dl.
ane bingung cara masukan Descriptions ?
kalo itu caranya cek di template -> edit html , trus F3 ketik '#' , ganti tanda # jadi link ... misal 'http://dopind.blogspot.com' ^_^
descriptons ? di Settings terus Basic :)
ane paham gan klo cara elo pertama di atas wal hasil akan seperti ini kan jadi nya ( ane lampirin HTML/JavaScript dalam bentuk gambar gan biar jelas).
{IMAGE}http://s15.postimage.org/4rz2hyrnv/capture_20120925_003328.jpg{IMAGE}
nah pertanya ane gan, di ane kudu masukin di descriptons nya ?
contoh nih gan misal ane mau jelasin tentang "Kontak" produk ane ?
gitu gan makasud ane!!
mohon bimbinganya gan yg baik hati
terima kasih.
jelasin tentang kontak ? gapaham ane sob.. kalo ngerubah link seperti diatas tadi..
kalo di tambah keterangan gitu tambahin aja setelah
a href=...' title='keterangan loe'>
ya maksud ane sprti kata2 penjelasan elo diatas,
a href=(#)diganti link blogs>title "about me"<tambah keterangan ,,
tapi gitu ane masukin keterangannya, pada berantakan semua keluar tulisannya gan, gak kyak di blogs elu, klo klik baru kebaca keterangannya.
sumpah ane gapaham kata2 ente ._.
bisa lebih dijelasi lagi sob ? bingung bacanya ane..
oke bro, pertama template -> edit html , trus F3 ketik '#' , setalah tu akan muncul,a href=..."title ", maksud ane gan, pengen masukin keterangan nya !
misal nich, pada klo clum kontak maka, mau ane masukin keterangan kontak ane gan,,,
seperti punya elu diatas, pada bagian About Me, ente jelasin mulai dari NISN, Nama Lengkap, Nama Panggilan sampe segudang Prestasi elo.
gue juga pengen masukin sperti itu gan pada clum yg ane tentukan nanti nya,,
klo ga paham2 juga nyerah dech ane gan !!
oalah paham2 sob, maaf sebelumnya ane ga liat positngan ane sendiri.. ternyata yg diganti itu yang bertuliskan YOUR-LINK-HERE diganti dg link posting/pages sobat , mohon maaf bgt yaa :)
ow jd cuma ganti links doank,
terus gimana munculin keterangannya sob,
nah pada bagian ini2 ane kagak paham2 nich,,
utak atik seharian belum nemuin caranya sob,
iya cuma diganti aja link nya sob :)
munculinnya ? kan tadi di pasang di postingan sob, linknya di pasang di menu itu ^_^
oke2 paham gan,,
bisa kasih tips ga supaya postingnya rapi,,
seperti yg elo buat about me blogs elo gan..
kalau aku sendiri sih di kira2.. kalau seumpamanya gak lurus gitu ya di 'space' sampe pas, manual aja kok :D
kereeenn, dari tadi yang gk bisaa, langsung bisaa (y) thanks brotha
waaa.. ini diaa akhirnyaaa.. makasih juga sob :D
mantab,, btw blog mu canggih sahabat,,
thanks gan
gaada cara lebih gampang gan, ane pernah nyoba beginian sekali gagal trus malah nongol bacaan banyak banget.. kalo bisa mah kasih screenshotnya gitu maklum ane masih pemula
Posting Komentar