Salah satu cara menghemat ruang di dalam blogger adalah dengan membuat menu, yang biasanya terletak di atas
Pembuatan menu ini berlaku untuk semua template blogger, dikarenakan kode terlampir di bawah ini akan membuat area widget sendiri, yang terletak di bawah head.
langsung aja... caranya coba cari kode ]]></b:skin> kemudian copy kode css di bawah ini tepat diatasnya.
Selanjutnya carilah kode di bawah ini
lalu copy kode di bawah ini tepat di bawah kode di atas..
apabila telah selesai kemudian simpan dan lihat di menu setting kemudian page element, coba perhatikan dibawah head akan ada area widget baru... langkah selanjutnya klik add widget , dan pilih HTML/JavaScript, kemudian copy kode di bawah ini ke dalamnya.
Ganti link sesuai dengan link anda... beres.
Update :
Sehubungan banyak yang respon mengenai postingan ini... untuk lebih mempermudah pembuatan CSS Menu, coba lihat di postingan Generator CSS Menu, dimana kita tinggal customize CSS Menu, kemudian generate kodenya, dan pastekan kode tersebut di Blogger - Design - Page Element - Add Gadget - HTML/Script dan posisikan Gadget tersebut di bawah header.
Update :
Untuk mempermudah di dalam pembuatan Menu, coba lihat postingan berikut ini :
1.GENERATOR MENU CSS DI BLOGGER
2.GENERATOR MENU CSS3 DI BLOGGER (New)
Pembuatan menu ini berlaku untuk semua template blogger, dikarenakan kode terlampir di bawah ini akan membuat area widget sendiri, yang terletak di bawah head.
langsung aja... caranya coba cari kode ]]></b:skin> kemudian copy kode css di bawah ini tepat diatasnya.
#menuq{ font-family: Verdana; padding:10px;}
.menuq a { color:yellow; border:1px #EDEEF0 solid; padding:5px; text-decoration:none;}
.menuq a:hover {color:red; border:1px #000000 solid; text-decoration:none;}
.menul .widget { border-bottom-width: 0;}
.menuq a { color:yellow; border:1px #EDEEF0 solid; padding:5px; text-decoration:none;}
.menuq a:hover {color:red; border:1px #000000 solid; text-decoration:none;}
.menul .widget { border-bottom-width: 0;}
Selanjutnya carilah kode di bawah ini
<div id='header-wrapper'>
<b:section .......dst>
</b:section>
</div>
<b:section .......dst>
</b:section>
</div>
lalu copy kode di bawah ini tepat di bawah kode di atas..
<div id='menuq'><br /> <b:section class='menuq' id='menul' preferred='yes'/> </div>
apabila telah selesai kemudian simpan dan lihat di menu setting kemudian page element, coba perhatikan dibawah head akan ada area widget baru... langkah selanjutnya klik add widget , dan pilih HTML/JavaScript, kemudian copy kode di bawah ini ke dalamnya.
<div id="menuq"><a href="http://www.karsono.co.cc">Home</a>
<a href="http://www.google.com/s2/profiles/108276204690151158049">My Profile</a> <a href="http://id-id.facebook.com/karsono.sajah">My Facebook</a></div>
<a href="http://www.google.com/s2/profiles/108276204690151158049">My Profile</a> <a href="http://id-id.facebook.com/karsono.sajah">My Facebook</a></div>
Ganti link sesuai dengan link anda... beres.
Update :
Sehubungan banyak yang respon mengenai postingan ini... untuk lebih mempermudah pembuatan CSS Menu, coba lihat di postingan Generator CSS Menu, dimana kita tinggal customize CSS Menu, kemudian generate kodenya, dan pastekan kode tersebut di Blogger - Design - Page Element - Add Gadget - HTML/Script dan posisikan Gadget tersebut di bawah header.
Update :
Untuk mempermudah di dalam pembuatan Menu, coba lihat postingan berikut ini :
1.GENERATOR MENU CSS DI BLOGGER
2.GENERATOR MENU CSS3 DI BLOGGER (New)
145 comments:
tolong sambangi saya di www.pakdekaryo.blogspot.com
makasih.....
harus diganti sesuai link fb akang sendiri...
#menuq { font-family:.....(Verdana, Arial, Times New romans)
sedangkan untuk warna font, rubah aja warna
.menuq a { color:...(yellow, blue atau #fff dll.)
.menuq a:hover {color:...(red, blue atau #fff dll)
untuk menambah warna background, tambahin kode
.menuq a { background:...(yellow, red dll.) atau
.menuq a:hover { background:...(yellow, red dll.)
pada intinya semuanya dicoba-coba... thx
ilmunya sngat bermanfaat...
:-)
Dan kalau tidak salah pertanyaan diatas adalah animasi dengan menggunakan image gif...
Kalau benar caranya, siapkan dulu image gif-nya dan upload ke photobucket, copy kode dibawah ini ke add widget atau postingan atau edit html, terserah sajah, sesuai minat :
<img border="0" src="http://i608.photobucket.com/albums/tt169/karsono29/show.gif" /> ganti link yang ditebalin dengan link yang didapat dari photobucket, contoh hasilnya, bisa dilihat di http://www.karsono.co.cc/2010/03/membuat-tombol-hide-dan-show-di-blogger.html
Sedangkan untuk flash copy kode dibawah ini, dan ganti linkya sesuai dengan link sendiri :
<object data='http://Daffa.fileave.com/daffaku.swf' height='169' type='application/x-shockwave-flash' width='850'>
<param name='movie' value='http://Daffa.fileave.com/daffaku.swf'/></object>
contoh : http://www.daffasyafiqadisathallah.co.cc/
sampe sini aja yach... untuk animasi javascript, mootols dll dibahas nanti... soalnya terlalu puanjang.
berguna sekali..
saya juga pakai tutornya..
oiya mas, saya mau tanya..
di blog saya jadinya trlalu ke tengah..
yang saya mau tanyakan, bagaimana mengatur posisi menu nya supaya tepat di atas postingan..
lebih ke sebelah kiri maksudnya..
sebelumnya trimakasih banyak..
#menuq{ font-family: Verdana; padding:10px; float:left}
beberapa penggantian kode float
left = kiri
right = kanan
center = tengah
justify = rata kiri-kanan
http://shinobi-cell.blogspot.com/
Kode Css header-wrapper biasanya ada di template yang lama, sedangkan untuk template yang baru biasanya pake header-outer.
w r a p p e r ' >
kalau membuat menu contohnya menu exchange link dan ngarahnya di lembar kosong dalam 1 blog gimana bos
@mas koori... jadi malu
langsung k TKP..
http://ahmadbasic.blogspot.com
jd gmna donk mas..??
jd gmna donk mas..??
Prefix each tweet with:???????????????
tolong pencerahanya ya mas
cara mengganti menu tinggal diganti aja link href="http://www.karsono.co.cc" sesuai dengan link yang dipunyainya... lihat jawaban saya diatas.
kode yang kedua tadi di blog saya gak ada, biar bisa digunakan caranya gmana bos,,,,?? Trimakasih,,,,
btw nice info lah...
hehehehe....
btw templatenya bagus euy, kabita !!!
bagi2 donk,
maklum masih newbie
#menuq{ margin:50px 0px 0px 75px; font-family: Verdana; padding:10px;} .menuq a {color:#663A2A; border:1px #EDEEF0 solid; padding:5px; text-decoration:none;} .menuq a:hover {color:red; border:1px #000000 solid; text-decoration:none;} .menul .widget { border-bottom-width: 0;}
dan posisi div menuq diletakkan pada edit html dan diposisikan diantara div header wrapper
Untuk meng-edit posisi atas dan kiri menu... coba edit kode css : margin:50px 0px 0px 75px;
contohnya kan aq bua menunya nama nya MY adventure trus aq mau masukin postingan aq ke menu tersebut tapi ga tampil di menu home nya giman itu mas??
maaf mas kalau merepotkan
terimaksi sebelumnya
cuman menunya nyangsang di pojok atas sebelah kiri
jd ganggu pemandangan
#menuq{ margin:150px 200px; font-family: Verdana; font-family: Times New Roman; float:right; font-size:12px}
#menuq a {color:#d78564; font-weight: bold; padding:5px; text-decoration:none;}
#menuq a:hover {color:#900; text-decoration:none;}
dan posisikan kode link menu tepat diantara kode div header-wrapper yang paling akhir...
kalau dilihat sourcenya coba posisikan kode link menu tepat diatasnya kode dibawah ini :
</div>
<!-- (Header-wrapper End) -->
mas kalau ada cara buat mempercantik blog di beritahu aku dong script2nya....biar aku bisa tau skaligus bisa belajar gitu.....tolong yach mas....
och iya salam kenal juga mas....
rezastartband.blogspot.com
bagaimana caranya supaya tampilan keseluruhan blog bisa pindah ke kiri supaya si gambar background tidak terhalangi...
terima kasih dan mohon bantuannya
ternyata selama ini menu yang saya pengen buat itu udah ada dari sononya
tapi kode html yang di kasih tau, juga berguna di blog satunya lagi
makasih ya ommm
punten...
arrofi-klikaja.blogspot.com
1. GENERATOR MENU CSS DI BLOGGER
2. GENERATOR MENU CSS3 DI BLOGGER (New)
div id='header-wrapper
kok g ada di blog saya sihh,knp yakk ?
maaf pemula,mohon bantu yak
makasih...
untuk kode css-nya tambahin kode dibawah ini
#menuq-outer {background:#ccc; padding:5px}
dan untuk kode htmlnya tambahin kode diatas, dimana hasilnya akan seperti dibawah ini :
<div id="menuq-outer"><div id="menuq">......</div></div>
@yanda: untuk CO.TV settingannya hampir sama dengan CO.CC, url forwarding tinggal dikasih link yang mo diforward apa dan pilih normal atau frame (full page)
@khirulfqih: tinggal nambah link menu
@angsa putih : link labelnya curahan hati pada menu salah, ganti menjadi link ini http://angsaputih17.blogspot.com/search/label/curahan%20hati
:)
@Ahong... sama2x
maklum nd ngerti..
o y kang q mw buat menu yg dari satu judul menu terdiri dari beberapa link...
jd klo judul menu nya di pilih link nya akan slide ke bawah...ntu gimana cara buat nya ya kang
tolong kirimin ke email ku, dimasfardian@rocketmail.com
trimakasih
http://arekdeso-mc.blogspot.com/
www.metallcore.blogspot.com
terima kasih (suksma :bahasa Balinya)
he...he...he...he..(JOKE Kang karsono)
Contoh penggunaannya <a href="http://www.karsono.co.cc" target="_blank">
Untuk mempelajari lebih lanjut coba buka postingan http://www.karsono.co.cc/2010/04/generatur-css-menu-di-blogger.html
nice....
:)
id='header-wrapper'>
dimna za kira2 persisnya
baru punya blog nih.. lumayan tambah ilmu..
http://tomyseptyonugroho.blogspot.com
yang sdng om pake di blog ini
mau nyoba yg generator menu nya :)
@Tomy Septyo Nugroho : sama-sama
@Alfast Blog : pake link label
@Dex Jaya : template ini namanya acak-acak... he.. he bcanda boz... aku ga tahu... pokoknya aku bikin template ini... moodnya yach... hasilnya seperti ini.
@Azamz bloG : boleh... tinggal send email aja....klo ada waktu.. bisa diusahain
@lynn : sama-sama
your help is useful for our..
saya pengen buat menu yang tampilanya seperti yg ada di blog ini mas, agak miring geto. soalnya cocok banget kalo di pake di blog saya
kalo boleh saya minta tolong minta scriptnya ya mas karsono yg baik, terus kasih tau di copy paste dimana
kalo bisa kirim ke email saya ya mas,,,
terima kasih banyak sebelumnya saya banyak belajar dari anda
saya akan menampilkan link anda
slam knal aja buat smua'a,,,
www.arraiis.blogspot.com
b:section .......dst
/b:section
/div
yang kode ini mana ta?tlong di kasih penjelasan??
jadi gini ceritanya gan, kemaren kan saya abis ganti templet, karena templet yang saya pake sebelumnya eror. nah pas saya udah ganti templetnya berhasil gan dan bagus, dan juga di situ ada menu bawaan dari templet tersebut saya pengen ganti url menu tersebut tapi gax tau caranya gan, mohon bantuannya gaan...
kalau agan mau membantu saya tolong hubungi saya via email andreantoandre96@yahoo.co.id atau di blog saya gan michaellandresteven96.blogspot.com
sebelumnya saya ucapkan terimakasih gan.
trims
saya: aku cari2 gak ada yg ketemu cuman header-line-1'/> duh susahh
kang karsono :template baru coba cari header-outer
saya: aku cari2 gak ada yg ketemu cuman header-line-1'/> duh susahh
gimana cara agar tampilan di menu home berbeda dengan tampilan di menu-menu lainnya???.
maklum masih newbie ne di dunia blogging..
tolong email di buzy_boy14@yahoo.com
thanks
cara tambahainnya gmna
Tapi bagaimana ya agar menu di tampilan blog seluler tidak memanjang ke samping seperti tampilan di web? Misalnya menjadi beberapa baris menyesuaikan dengan lebar tampilan seluler? terimakasih :)
gmna??pa g da cra lain??
Posting Komentar