Login ke blogger
Buat Menu drop-down seperti ini
....Posting ini atas permintaan dari sobat Sigit Super... " oia gimana caranya buat biar menu di navbar bisa ada dua atau tiga menu.maksudnya dropdown menu plis ya bung ?" ...Widget MHD2 ini termasuk salah satu yang cukup rumit untuk dibahas...Btw setelah beberapa kali saya mencoba membuat sendiri MHD2 ini... sampai merumuskan kode script yang kurang lebih hampir sempurnalah (..menurut saya sih..).. karena telah banyak kode yang saya utak-atik di script MHD2 ini agar sesuai dengan keinginan imajinasi saya....dengan tampilan MHD2 yang Minimalis tapi Modern dan Cool...dan postingan inilah yang akan memuat hasil akhir dari Script MHD2 ala Andi Wong... Ecaknyo... Hehe.. :D ( Narsis.com... )
Jadi... Baca & Pahami langkah-langkah cara pembuatan MHD2-nya berikut ini :
1. Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget )...
2. Dan seperti biasa Copy-Paste dahulu seluruh kode HTML template widget blog kamu ke dalam Notepad dan simpan... untuk jaga-jaga..kan tinggal copy-paste saja lagi agar template blognya kembali seperti semula..
3. LANGKAH PERTAMA .... Cari (CTRL+F) kode " ]]></b:skin> " lalu Copy script dibawah ini dan Paste-kan diatasnya :
Contohnya seperti dibawah ini.......
/* MHD2 */
#bg_nav {
background: #FCF526; /* kuning_warna background dasar */
width: 760px; /* Panjang dari kotak menu dasar */
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: 28px;
margin: 0px auto 0px;
padding: 0px;
overflow: hidden;
-moz-border-radius:0px;
}
#bg_nav a, #bg_nav a:visited { /* bagian script yang ini dibiarkan saja ya */
color: #ffffff;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
}
#bg_nav a:hover { /* bagian script yang ini dibiarkan saja ya */
color: #ffffff;
text-decoration: underline;
padding: 0px 0px 0px 0px;
}
#navleft {
width: 760px;
color: #FFFFFF;
float: left;
margin: 0px;
padding: 0px;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited { /* Menu Utama */
background: #FCF526; /*Kuning_warna latar menu utama */
color: #053EFA; /*BIRU_warna teks menu utama */
text-shadow: 4px 4px 4px #aaa; /* Memberi efek bayangan di teks */
display: block;
height: auto;
width: auto;
font-weight: bold;
margin: 0px auto 0px;
-moz-border-radius:0px;
padding: 8px 15px 8px 15px;
opacity: 0.7;filter:alpha(opacity=70);zoom:1;
}
#nav a:hover {
background: #F7F68F; /*Kuning cerah_warna hover di Menu Utama*/
color: #3854F2; /* Biru_warna teks di menu drop-down n teks hover MU*/
margin: 0px auto 0px;
font-weight: bold;
padding: 8px 15px 8px 15px;
text-decoration: none;
-moz-border-radius:0px;
opacity: 0.7;filter:alpha(opacity=70);zoom:1;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 300px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #F7F68F; /*kuning cerah_warna latar menu drop-down*/
width: 200px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;000000;
}
#nav li li a:hover, #nav li li a:active {
background: #F8FABB; /*kuning cerah2_warna hover menu drop-down*/
padding: 7px 30px 7px 10px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
#nav li ul a {
width: 100px;
}
#nav li ul ul {
position: absolute;
margin: -30% 0 0 95%;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left:-999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto;
}
#nav li li li.sfhover ul {
left:auto;
}
#nav li:hover, #nav li.sfhover {
position:static;
}
/* eleman dibawah header */
#under_header{
margin:-20px 0 25px 0px;
padding:1%;
height;0px;
width:98%;
}
]]></b:skin>
#bg_nav {
background: #FCF526; /* kuning_warna background dasar */
width: 760px; /* Panjang dari kotak menu dasar */
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: 28px;
margin: 0px auto 0px;
padding: 0px;
overflow: hidden;
-moz-border-radius:0px;
}
#bg_nav a, #bg_nav a:visited { /* bagian script yang ini dibiarkan saja ya */
color: #ffffff;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 0px;
}
#bg_nav a:hover { /* bagian script yang ini dibiarkan saja ya */
color: #ffffff;
text-decoration: underline;
padding: 0px 0px 0px 0px;
}
#navleft {
width: 760px;
color: #FFFFFF;
float: left;
margin: 0px;
padding: 0px;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited { /* Menu Utama */
background: #FCF526; /*Kuning_warna latar menu utama */
color: #053EFA; /*BIRU_warna teks menu utama */
text-shadow: 4px 4px 4px #aaa; /* Memberi efek bayangan di teks */
display: block;
height: auto;
width: auto;
font-weight: bold;
margin: 0px auto 0px;
-moz-border-radius:0px;
padding: 8px 15px 8px 15px;
opacity: 0.7;filter:alpha(opacity=70);zoom:1;
}
#nav a:hover {
background: #F7F68F; /*Kuning cerah_warna hover di Menu Utama*/
color: #3854F2; /* Biru_warna teks di menu drop-down n teks hover MU*/
margin: 0px auto 0px;
font-weight: bold;
padding: 8px 15px 8px 15px;
text-decoration: none;
-moz-border-radius:0px;
opacity: 0.7;filter:alpha(opacity=70);zoom:1;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 300px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #F7F68F; /*kuning cerah_warna latar menu drop-down*/
width: 200px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;000000;
}
#nav li li a:hover, #nav li li a:active {
background: #F8FABB; /*kuning cerah2_warna hover menu drop-down*/
padding: 7px 30px 7px 10px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
#nav li ul a {
width: 100px;
}
#nav li ul ul {
position: absolute;
margin: -30% 0 0 95%;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left:-999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto;
}
#nav li li li.sfhover ul {
left:auto;
}
#nav li:hover, #nav li.sfhover {
position:static;
}
/* eleman dibawah header */
#under_header{
margin:-20px 0 25px 0px;
padding:1%;
height;0px;
width:98%;
}
]]></b:skin>
>> Untuk script diatas ini kalau tidak begitu memahami jangan terlalu banyak diubah2 ya.. biarkan saja seperti MHD2 punya saya diatas...jadi copas saja...takutnya nanti error loh..
> Hitam = Yang ada di bagian bg_nav dan navleft... ini untuk mengatur panjang menu horizontal..harus sinkronisasi ya...silahkan diatur sesuaikan dengan blognya...
> Hijau = Warna Latar menu.... bisa diubah & disesuaikan dengan keinginan...
> Pink = Warna hover menu ketika menu di mouseover... bisa diubah & disesuaikan dengan keinginan...
> Orange = Warna teks menu utama... bisa diubah & disesuaikan dengan keinginan...
> Biru = Warna hover ketika teks di mouseover.... bisa diubah & disesuaikan dengan keinginan...
4. LANGKAH KEDUA.... Cari (CTRL+F) kode " <div id='header-wrapper'> " lalu Copy script dibawah ini setelah kode " </div> " :
..Atau ( Jika tidak ada kode header-wrapper ).. Cari (CTRL+F) kode " <body> " lalu Copy script dibawah ini setelahnya :
....Paste-kan persis seperti Contoh dibawah ini :
<div id='under_header'>
<b:section class='header' id='underheader' preferred='yes'/>
<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://ecaknyo.blogspot.com/'> Home</a></li>
<li><a href='####' target='_blank'> Blogging</a>
<ul>
<li><a href='http://www.blogger.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Login ke blogger</a></li>
<li><a href='http://www.blogger.com/profile/07038241031299325975' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> blogger profil</a></li>
<li><a href='http://www5.shoutmix.com/?pumitabusan' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Blog Walking</a></li>
</ul></li>
<li><a href='#' target='_blank'> Demo</a>
<ul>
<li><a href='http://eksperimen284.blogspot.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> blog eksperimen284</a></li>
</ul></li>
<li><a href='URL tujuan utk menu 2'> ALAT</a>
<ul>
<li><a href='http://www.colorpicker.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> color picker</a></li>
<li><a href='http://centricle.com/tools/html-entities/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Encode/Decode HTML Entities</a></li>
<li><a href='http://www.iconfinder.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Icon Finder</a></li>
<li><a href='http://translate.google.co.id/#' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Translator</a></li>
<li><a href='http://myspace.laymark.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Smiley Emotion</a></li>
<li><a href='http://sites.google.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Site</a></li>
</ul></li>
<li><a href='#' target='_blank'> Download/Upload</a>
<ul>
<li><a href='http://www.filehippo.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> FileHippo</a></li>
<li><a href='http://www.ziddu.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> ziddu</a></li>
</ul></li>
<li><a href='#' target='_blank'> <blink>MAU DUIT</blink></a>
<ul>
<li><a href='http://www.neobux.com/?r=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Neobux</a></li>
<li><a href='http://www.idr-clickit.com/register.php/wong284.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> idr-clickit</a></li>
<li><a href='http://www.donkeymails.com/pages/index.php?refid=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> DonkeyMails</a></li>
<li><a href='https://www.vipclix.com/?ref=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> vipclix</a></li>
</ul></li>
<li><a href='http://ecaknyo.blogspot.com/2010/08/cara-membuat-menu-horizontal-drop-down.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow003.gif'/> Buat Menu drop-down seperti ini</a></li>
</ul>
</div>
</div>
</div>
</div>
<b:section class='header' id='underheader' preferred='yes'/>
<div id='bg_nav'>
<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://ecaknyo.blogspot.com/'> Home</a></li>
<li><a href='####' target='_blank'> Blogging</a>
<ul>
<li><a href='http://www.blogger.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Login ke blogger</a></li>
<li><a href='http://www.blogger.com/profile/07038241031299325975' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> blogger profil</a></li>
<li><a href='http://www5.shoutmix.com/?pumitabusan' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Blog Walking</a></li>
</ul></li>
<li><a href='#' target='_blank'> Demo</a>
<ul>
<li><a href='http://eksperimen284.blogspot.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> blog eksperimen284</a></li>
</ul></li>
<li><a href='URL tujuan utk menu 2'> ALAT</a>
<ul>
<li><a href='http://www.colorpicker.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> color picker</a></li>
<li><a href='http://centricle.com/tools/html-entities/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Encode/Decode HTML Entities</a></li>
<li><a href='http://www.iconfinder.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Icon Finder</a></li>
<li><a href='http://translate.google.co.id/#' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Translator</a></li>
<li><a href='http://myspace.laymark.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Smiley Emotion</a></li>
<li><a href='http://sites.google.com/' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Google Site</a></li>
</ul></li>
<li><a href='#' target='_blank'> Download/Upload</a>
<ul>
<li><a href='http://www.filehippo.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> FileHippo</a></li>
<li><a href='http://www.ziddu.com' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> ziddu</a></li>
</ul></li>
<li><a href='#' target='_blank'> <blink>MAU DUIT</blink></a>
<ul>
<li><a href='http://www.neobux.com/?r=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> Neobux</a></li>
<li><a href='http://www.idr-clickit.com/register.php/wong284.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> idr-clickit</a></li>
<li><a href='http://www.donkeymails.com/pages/index.php?refid=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> DonkeyMails</a></li>
<li><a href='https://www.vipclix.com/?ref=wong284' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow002.gif'/> vipclix</a></li>
</ul></li>
<li><a href='http://ecaknyo.blogspot.com/2010/08/cara-membuat-menu-horizontal-drop-down.html' target='_blank'><img src='http://icons.primail.ch/eyecatch/arrow003.gif'/> Buat Menu drop-down seperti ini</a></li>
</ul>
</div>
</div>
</div>
</div>
>> kalau kamu telah mengerti susunan menu drop-down diatas ini.... maka kamu akan bisa menambah maupun mengurangi menu drop-down nya... jadi pelajari dan pahami dulu...
> Hitam = Gantilah nama menu-menu nya sesuai keinginan...
> Biru = Ganti alamat URL-nya sesuaikan dengan Nama Menu yang kamu cantumkan...
5. Jika telah sesuai dengan langkah-langkah diatas... sudah kamu edit isi menu-nya sesuai keinginan kamu.. lalu Simpan & Refresh-lah dan lihat hasilnya....
.... Pahami benar2 Script MHD2 ini... .
158 komentar:
keren2..
thanks berat yah atas ilmu bloggernya..
^_^
masih belajar nih mas,dibantu laagi ya?/
sangat membantu kawan...
sob kalo div id='header-wrapper' ga ada gimana ya ? ~x
Serba Serbi > sama2 gan.. silahkan dimodifikasi lagi
iplock > oke... akan dibantu.. mudah2an sy bisa membantu dg baik.. ;)
BUNTU > silahkan dicoba2.. :)
Fhidi >... Gk ad "div id=header-wrapper" ?? aah masak sob.. aneh..template blogmu yg tipe apaan ya?... mungkin berbeda sedikit aj kali namanya..
Saya kasih clue ya :
..Kalo pake CTRL+F gk ketemu coba kamu cari manual... letaknya ada di bagian bawah template blog kamu..persisnya dibawah kode " <body> " cari yg mirip2 "header-wrapper" atau cari div id='content-wrapper' ...
Kalau ada div id='content-wrapper' ....kamu pastekan kode scrip isi MHD2-nya tepat diatasnya..
Bang Andi,,, Islam tidak secara spesifik menggambarkan bahwa tattoo itu haram (kecuali pndapat pemuka agama). Kutipan ayat dan hadits utk menbgharamkan tattoo pun belum relevan. Belum lagi klo yang dilihat dari asas manfaat/ kebutuhan org bertattoo. Tentunya tattoo punya nilai etis tersendiri jika kegunaannya dalam konteks yg baik. Salah satu contoh bagi tattoo yang ditempatkan bagi mereka yg disimbolkan sebagai figur2 teladan (sewperti org dayak yg sy contohkan di atas).
Taattoo dianggap pelaku kriminal, lagi2 karena orde baru mengkonstruksinya demikian. Siapa yang melakukan kejahatan, maka akan di tattoo. Akhirnya, kitapun menganggap tatto itu=Kriminal.
informasinya sangat bermanfaat sob, kebetulan saya mau memakai cara ini...^_^ terima kasih
Kodenya lumayan banyak y ^^
Wah2!! bagus2!!!
wah... perlu dicoba nih...
kayaknya baguss.....
buntu > saya hanya merunut dari hadis2 shahih & kisah para sahabat gan.. seingat sy ada sahabat yg bertanya mengenai tatto di badan kpd rasulullah tpi jawaban Nabi tegas tidak membolehkannya..haram gan.. mudah2an betul ingatan sy ini.. subhanallah.. :)
AZ COMSOFT > kalo begitu cobalah gan.. :)
Ka Damar > iya banyak... ini atas permintaan sobat sigit super.. makanya kalo sy bisa saya usahakan jawab dg contoh jadinya.. :)
ridho blog > thx gan.. cobalah ;)
akhyar.info > memang bagus gan.. wa aj mau pasang di blog ecaknyo ini.. :D
wah keren ,thanks infonya
met puasa cak :)
Nabi mengharamkan tatto pasti ada hal yg negatifnya sob bisa saja kalau tatto bisa menyebabkan kanker kulit , tatto gagal kan jadi jelek sob ga bisa di hapus lg :-t ..
@Andi Wong : ngga ada sob ~x( y udh gpp deh..
sob kalo mau post code gimana yah ? misalnya kayak diatas .. b-(
ini yg saya cari coba ah....hehhehe...
thx ya kawand,,,..
verry Nice good post...
:D
SALAM BERKAWAND
Tukar banner broooo
<a href=" http://www.gratizs.co.cc/ " title="UANG GRATIS"><img src="http://lh3.ggpht.com/_TSfalsMYJyA/TGRtECzSXAI/AAAAAAAAAHI/FShT3IfdoDI/60x60.gif" border="0" /></a>
trims ats jawabanny teman, ntar ak cb pelajari dl,...success 4 u...!Amin.
septian > :) ..met puasa jg sob..
Rizky Fhidi > lebih baik menghindari hal-hal yg dilarang rasulullah ..ow..post code..oke ntar wa jelasin ya.. ;)
anggar berkawand > silahkan dicoba gan :D
Uang Gratis > waah.. kalo tuker banner gk bisa diblogku sob (bikin berat loading).. tpi link banner lo sdh nongkrong tuh di blogroll ku...
tiwi > silahkan dipelajari tiwi.. :)
Link ku dikasi nama apa brooo??
SELAMAT BERIBADAH PUASA
Mampi sob,,, tulisan-menarik.blogspot.com
wah demonya kren ya sob, lumayan buat nambahin wawasan jika ada kesempatan saya akan praktekan sobat
Sukses Slalu!
hallo kawand....
mampir jalan2 lg ah smbil ngabuburit ketmpt sahabat..
SALAM BERKAWAND ,,,,..
iya sob tadi abis nyari di google eh ketemu thanks sob sebelumnya , tukeran link yuk link mu sudah ada di blog ku sob.. ^^
Komentar ini telah dihapus oleh penulis.
@Uang Gratis
ada tuh di blogroll abjad G gan.. :)
Patut di coba nih.. Makasih bwt tutorialnya gan! :)
Mantaph nie :)
wahhh bagus nihhh sobbb tutorialnya,,
lanjutkan kawan...
@mas kholiq
iya sama2 gan.. mhon maaf lahir & batin yaa.. oke sung ke TKP :)
@Bunglon Blog Indonesia
tapi ada loh yg lebih keren lagi..tpi pake jquery.. namun kayaknya berpengaruh trhdp loding blog kalo pake jquery script.. :)
@anggar berkawand
..halo anggar.. mo menu buka apa disini gan.. ? ntar tk siapin BLoger asam manis plus jus blogging... hehe.. :D
salam berkawan..
@Fhidi
..iya gw liat kamu udah bisa..tuh buktinya dah kamu post cara convert code html-nya..
btw OKE.. Link mu sdh terpasang di blogroll abjad F gan.. thx ya :)
Wah bisa mempercantik penampilan blog nich, tapi jika ku pasang kira-kira berpengaruh pada loading blog ga kawan? makasih atas infonya
@Ikhsan^funztoo
silahkan dibaca2 dulu gan.. ntar baru kapan2 kmu praktekan.. :D
@K-blogger
thx gan.. :)
wahhh tutorial yang bagus sobat,,
salam kenal dari ikomputer.co.cc..
@Gieterror
thx gan... tpi MHD2 ini masih menu drop-down yg sederhana..stidaknya tdk membuat loding blog lama.. hehe :D
@PIK Remaja Al-Hikmah
betul..akan mempercantik tampilan blog.. tenang sj gk akan memperberat loding blog MHD2 ini.. :) buktikan sj dg klik DEMO-nya..
Wikh..mantab sob
Bisa mempercantik blog,saya coba yakh
@ikomputer.co.cc
thx gan.. tuh kamu jg sudah menerapkan MHD2 ini .. :) manteb
WAH, tar ane plajari dulu deh...
ruwet jg kyknya...
hmmm..
ijin disave dulu ya kode htmlnya... bwt ane riset dulu...
hehe..
mksh share nya.. slm knl
JIakkakaka bisa aja lu brooo, pantes aja aku pantau di blog u tapi gak ada siapa-siapa. gimana have funnya??? asyik tentunya donk??
Nice share gan!. Tutorial yang sangat bagus skl, sistematis dan sangat mudah bwt dipelajari! gw kasih bintang 100 dari 10 :D . Great job! & Keep posting gan! :)
@Ibnu(dunia-klue)
silahkan kapan2 kamu coba ibnu.. ;)
@penghuni60
oke..pelajari aj dulu gan.. :)
@Science Box
silahkan di save & di riset dulu sob.. :D
@Uang Gratis
yg pasti senang sob.. bisa weekend sama keluarga... memang hri sbtu-mingu blogging gw liburkan.. ;)
@Glan@Flixnn
thx gan... kekekek... baguslah kalo emg tutor ini mudah utk dipelajari.. :D
Wahh menarik sekali masnn.. Tx tutornya
coba pake efek jQuery deh gan, lebih kinclong nanti blognya :)
lha mhd itu apaan mas.ntar tak coba ah
markasih banget mas atas tutornya
tulisan kaya ininya gak ada gan ]]>
oia mas aku dah download dreamweaver tapi cara pakenya gak tau.ajarin donk
@akhatam
thx..silahkan dicoba2 gan.. :)
@Muhammad Taqi
..betul itu.. tetapi saya pilih yg tanpa jquery gan.. :)
@sigit
MHD2 itu singkatan dari Menu Horizontal Drop-Down gan...
Dreamweaver itu bagusnya utk kita yg punya website di hosting..kalo blogger sih gk perlu pake ini program..kn sudah otomatis smua..
..sy udah gk pakai Dreamweaver lagi semenjak gk lagi fokus ke CMS(Drupal/mambo/joomla).. tutorial dreamweaver byk kok di internet gan.. cara pakenya mudah kok..kamu run dreamweaver lalu open file yg ber-extensi.html atupun file javascript.. tapi pengunaan dreamweaver ini mesti didampingi oleh Adobe Photoshop biar desainnya langsung bisa diterapkan di website..
wah sob terimaksih tutorialnya
MERDEKA!!! MERDEKA!!!
wah sob terimaksih tutorialnya
MERDEKA!!! MERDEKA!!!
nice tutorial....masih banyak bnyak ya.....tapi terlalu panjang...:D ..wkkkwwkwkwk
komen balik dong :)
knp gak pake jQuery bukannya lebih cadas :)
@mas kholiq:
sama2 gan.. merdeka!!!!.. :)
@Bang Roy:
tergantung bahasannya roy...kalo agak rumit..ya otomatis jd lebih panjang tutornya..biar mudah dipahami.. :)
@Muhammad Taqi:
udah gw komen balik gan..tapi kok belum masuk daftar komentarmu ya.. ? masuk ke spam kali ya ?...
emg lebih bagus kalo MHD2 ini pake jquery tpi itupun perlu memanggil file.js ..ini yg akan menambah berat loding blog...krn sebagian sobat blogger sdh byk yg widgetnya pake jquery + file.js ..jd kalo ditambah dg MHD2 jquery jg dikhawatirkan akan byk keluhan..hehehe.. :D
..tapi nanti akan sy postingkan MHD2 JQUERY.. :)
saya cobain nih,, kebetulan nav blog saya belum pakai dropdown. tapi masih kesulitan mengatur warna dan lebarnya biar pas.
btw thanks ilmunya gan,, selamat menjalankan puasa..
makasih banyak mas andi...
berguna bgd nie...
@Dwi:
Silahkan dipelajari gan... sy jg ucapkan met menunaikan ibadah puasa jg.. :)
@Ubhay Sthrezh:
:) ..baguslah kalo emg berguna bwt kamu sob..
maaf nih OOT, saya mau tanya gimana caranya menampilakn widget follower berada di halaman postingan, saya dah coba g berhasil, kl widged yg lain berhasil tinggal followersnya aja yg belum berhasil
terima kasih mas,,post'na menarik dan sgt brgna...
wah keren nih jcuma tampil judul postingannya doang
mampilagi sob
makasih infonya sob...ane coba dulu..
@Rizky2009:
menampilkan widget follower google pd hal.postingan ?... heuum.. ntar wa utak-atik dulu riz.. :) ..mo bikin tampilan blogspot-mu kayak blogazine (freestyler blog).. :D siip
@Make You Smile:
makasih gan.. syukurlah kalo emg berguna.. ;)
@mas kholiq:
Siip..ntar wa jg mampir sob.. ;)
pake demo sob. Biar mantep
@Manchester United Tech:
ya silahkan saja kalo mo dicoba MHD2 yg simple ini .. :)
@KANG uchiha:
kan emg ada DEMO-nya sob.. lu klik aj tuh link demo yg ada dibawah gambar MHD2.. :)
ntar kl ada kesulitan ak konsul lg ya.., tp kayaknya ribet nih..he3..btw, tnx dah mampir mas, anakku dh baikan kok skrg lg recovery kmren skt DB n Typhus..tq....success 4 u..!
wah mantap nih blog ane blom ada drop down
mas di template saya kok g ada ya code <div id='header-wrapper'? nya?
@Sir_Remo_Jr:
..silahkan dicoba gan.. :D
@Fauzan:
gak "header wrapper" ya..
itu letaknya di bagian bawah template blog.. (coba centang expand template-nya).. lalu cari pake CTRL+F... kalo masih gk ad berarti harus ditambah dulu elemen header tambahan sob.. :)
aku uda nyoba tapi kug hasilnya gag kayak contohnya gan?? gmn niy solusinya??
OK SOB link udah d pasang balik. follow balik jg. thank
Mksie ats infox....
@yan_zhen:
..ow.. mw yg sma persis kayak punyaku ya.. :)
oke... silahkan donlod script CSS-nya di sini.. >>
http://www.ziddu.com/download/11451462/MHD2ECAKNYO.txt.html
@ILMU KOMPUTER:
Siip... thx ya :)
@Dhiyas Music Centre:
..yups.. sm2 gan.. thx krn udah berkomentar.. :)
makasih gan..
jaya terus!!
salam blogger
@yan_zhen:
..senang bisa membantu.. salam blogger.. ;)
Mantap Bener dah....
Bener2 Hebat Gan....
Sneng bsa tau blog ini.... :)
@dhe_romantiic:
Makasih.. sering2 singgah ksini sobat.. :)
exchange link with PR 5
thanks ya mas
Ini blog emang paling yahud dah... Informasinya sangat membantu. Di follow aah... :D
@Business and Finance:
oke.. xchange link ;)
@jual beli paypal:
yups.. :)
@M. Helmi Akbar W.:
trima kasih...gw bls FOLLOW jg.. :)
Bro, bole tanya? di html saya g ada
div id='header-wrapper.
itu buat nampilin apa ya mas di web ny?
kok malah vertikal mas jadinya? apa gag cocok dengan tempalte saya ya?
@CrazyPolar:
itu header wrapper buat nampilin header image (background gambar / warna) secara wide sesuai template blognya..
kalo gk ada header wrapper ya bisa diakalin..ditambahkan sendiri ..atau ..ikuti saja cara2 berikut ini.. :)
1. Copy kode dibawah ini dan Paste- letakan di atas kode ]]></b:skin>
/* eleman dibawah header */
#under_header{
margin:-20px 0 25px 0px;
padding:1%;
height;0px;
width:98%;
}
2. lalu Copy kode dibawah ini lagi dan Paste -letakan sesudah kode <body> (kalo emg gk ad div id header wrapper)..
kode-nya kamu donlod dulu ya..ringan kok..ini linknya >> https://sites.google.com/site/ecaknyo/blog/backup-script-widget-ecaknyo/KODEMHD2MENU?attredirects=0&d=1
soalnya gw paste disini gk bisa krna over kuota..
3. SElesai..Simpan template Blog..
..Smoga bisa membantu..
@BoxOfficeIndo:
jadinya vertikal ?.. bisa jadi bentrok dg kode header blogmu gan.. tapi kalo mw di akal2in masih bisa kok.. ikuti cara di bawah ini..
1. Copy kode dibawah ini dan Paste- letakan di atas kode ]]></b:skin>
/* eleman dibawah header */
#under_header{
margin:-20px 0 25px 0px;
padding:1%;
height;0px;
width:98%;
}
2. lalu Copy kode dibawah ini lagi dan Paste -letakan sesudah kode <body> (kalo emg gk ad div id header wrapper)..
kode-nya kamu donlod dulu ya..ringan kok..ini linknya >> https://sites.google.com/site/ecaknyo/blog/backup-script-widget-ecaknyo/KODEMHD2MENU?attredirects=0&d=1
soalnya gw paste disini gk bisa krna over kuota..
3. SElesai..Simpan template Blog..
..Smoga bisa membantu..
@Andi Wong:
wah makasi mas, ntar saya coba.
Wah, maap mas, widget follow nya lupa dipasang. tuh dah saya pasang di blog saya.
@CrazyPolar:
silahkan dicoba gan.. :) ..oke i will follow u... ke TKP skrg ;)
Ok Makasih Mas,.. Saya coba dulu.. maklum blogger baru. Bisa Link Exchange?? Saya ada 2 blog... http://www.rudycyber.co.cc
http://boxofficeindo.blogspot.com Banner anda sudah saya taruh di blog ane.. trims..
@BoxOfficeIndo:
Oke.. Link Exchange...skrg sung sy pasang di blogrollku..silahkan check di abjad B dan R gan.. ;)
penuh sekali blognya mas
@mawardi:
apa yg penuh sob.. :D
Gan saya kok jadi g ngudeng ea...udah tak coba 2 kali gagal trus.....itu kode di atas setelah di COPAS perlu di edit lagi ea tata letaknya...mohon bantuan
http://warisansylva.blogspot.com/
gan ni yg saya coba kok mleset dr perkiraan ea,,kira2 salahna dmn ea ???
http://img219.imageshack.us/img219/69/14345762.jpg
http://img257.imageshack.us/img257/1659/62765147.jpg
bagus banget mas... bantu saya yang lagi belajar ya......
hebat bro!!
Link exchange bro!!!!
@Warisan:
..oke nanti saya bantu... tungu sbentar ya..:)
@acep miftahul anwar:
iya sob.. akan dibantu... ;)
@si-stmik-mdp2010:
Oke Link Exchange ya.. ;)
Terima kasih info bloggernya .. cara menjelaskannya cukup detail dan mudah dipahami.
numpang copy...
Langkah kedua nya kok tidak ada kode script di edit html aku yah..??
tolong saya gan.;)
salam, ana buat pake css menu generator (www.mycssmenu.com) dgn script html d laman elemen (cm klo d laman edit html lupa apa pake script jg/tdk), tp ketika kursor diarahkan k menu, bagian bawahnya sprti postingan &widget malah turun, apanya yang salah, ya? mohon dilihat
Anak'nya komeng keren Blogging'nya....
@Ahmad:
baguslah kalo mudah dipahami.. :)
@vj Not-i:
pasti ada...kn cuma kode body script.. coba dicentang dulu expand template widget blognya..
@derdekind:
oww.. ehm.. kayaknya kamu masukin script menunya ke bagian posting.. bukan di header... coba di check lagi gan..cari bagian header menu... atau bisa jg setingan CSS-nya ada yang salah.. kayaknya widht sm high = brp gituu..
@Zainal Mubarox:
:D haha.. bisa aj gan..
nice tutorial ni..
gan uda saya follow balik tu..
tukarin link yu..?
keren bgt.......sukses dah
@arsitektur blogger:
beres gan.. udh sy FOLLOW n LINKmu sdh trpasang.. :)
@rickyMJ:
thx gan.. ;)
wah aq jd malu nich,kan aq ru buat blog tuch,belum ada postingan,cuma lagi ngedit tampilannya doank
hehhehe
@rickyMJ:
gkppa..riz.. tdk ada bedanya blogger pemula dg blogger senior.. kebetulan kami saja yang duluan blogging..otomatis ilmu bloggernya jadi tahu duluan.. :)
Kren gan Postingan y',,, V' msih bnyak yang mw d pljari,,, tlong bmbingannya ya,,,,
please visit my blog
www.syahrulhadi.blogspot.com
@Syahrul Hadi:
mudah2an sy bisa membantu gan.. :)
msh perlu bnyk belajar neh ane bro,,, ckckckkk
keren2,,,, :-)
@Cysers:
mari sma2 saling sharing knowledge ttng blogspot..
Wah keren banget artikelnya, sayang di pasang di blogku gak bisa.
@budi2610:
gk bisa ya.. emg sih ada bbrp template blog yg kdg gk bisa dipasang widget tertentu...
kk masa galat sih....
namanya sama aja boong dunk
kk ecaknyo
numpang lapak ye...
http://agocheateryph.blogspot.com
bagaimana cara memberi link adf.ly di blog
?
gan kok di tpt saya ga ada header wraper ato bodynya ya?mohon bantuannya
ma kasih..keren menu nya..tapi nyoba lom berhasil..hehe
Waaahhhhh.. T.O.P.B.G.T mas....
saluutt sallutt buat bang ecaknyo.... :D
ijin copas bang.... :)
salam kenal dari kingkong... ;)
dah aku fooloow gan, infonya berguna banget buat alu yg masi pemula.
thanks gan.
jangan lupa followbck yah.
gb
ruwet banget =))
:-L
Gan ko saya drop down nya di bawah terus gi mna cara naruh drop downnya ke atas gan...
hahah maaf masih newbie
wah rumit juga nih caranya ya, kalo mau nyoba harus save template dulu biar aman. btw thanks tipsnya sob.
gan nga ketemu kode < body > nya
mas saya menemukan kode yang salah mas...karena saya cobak error... kode "]]>" ada dua... jadinya error... jadi saya hapus saja yang satunya... alhamdulillah sukses gan.... makasih gan...
kok we malah di bawah menunya gimana gan please check dulu ya :D :D
:))
thank artikelnya keren bangeet
wah bagus oom...
mampir dan do follow yah...
mantap gan. mksh ye
gan,,,napa kok menu list.na ada di bawah?kok g di atas kayak punya blog ini?,,,,,,trus g drop down lgi
jdi.na kayak gini
-blablabla
-bhsbcbdshc
-ghbfffhgf
-gfgvfvf
-vfdvfvbf
-vfcb cbv
dan seterus.na
coba liat di the-blogger-is-arif.blogspot.com
Masih bingun gan...
thanks gan,
ane udah coba dan udah berhasil,
cuma yang saya mau tanyakan,
gimana caranya pengen menu di dalem menu barnya itu aga ketengah, yang saya masih ada dipinggir??
mohon penjelasannya ..
gan di blog saya ini :
div id='header-wrapper'>
ga ada
ne juga ga da :
]]></b:skin>
mohon bimbingan nya :)
thankz :) :D
Poskan Komentar
KAMU KOMENG SAYA BALAS KOMENG... KAMU FOLLOW SAYA BALAS FOLLOW... MAU XCHANGE LINK JUGA BOLEH.... TAPI JANGAN BUAT SPAM KOMENTAR YA...