MUSHAF GRUP Sejak 26 Juni 2015

Mari bergabung bersama Komunitas Penghafal al-Qur'an; Chatt WA ke 0856 7100 375 (Ikhwan) atau 0823 2798 1491 (Akhwat): Ketik : nama.umur.alamat; untuk info selengkapnya klik MUSHAF

Cara Memasang Menu Bar dan Sub Menu Bar di Halaman Blog

Jika anda memperhatikan tampilan blog jadipintar.com, lihatlah sederetan kotak berwarna biru dengan tulisan berwarna putih berisi daftar menu seperti; SALAM I DO'A, SHALAT I PUASA I MATI I WARIS I KIAMAT, dll, (tampilan sebelum ini, yang sekarang lihat model 2 di bawah-red) lalu jika kursor disentuhkan, akan tergulung layar yang memuat sekian banyak judul artikel, Itulah yang disebut dengan Menu dan Sub-Menu bar.
Menu dan Sub-menu Bar sangat dibutuhkan guna mencari informasi berdasarkan pada kategori atau sub menu . Memberi sub menu bar juga membuat Semua judul artikel bisa ditampilkan di layar dalam satu tatapan mata; blog kita tampak lebih ilmiah, teratur, dan simpel. 
Jika anda berminat memasangnya di blog, artinya anda orang yang berfikir sistimatis dan menyukai keteraturan.Selamat mencoba.

Langkah Pemasangan

- Klik  Desain 
- Pilih  Template lalu pilih  Edit HTML 
- Pilih/klik  Lanjutkan
- Pilih/klik  Expand Template Widget
Cari scrift berikut :
<div class='main-outer'>  atau
<div id='main-wrapper'> atau 

<div id='main'>
Agar lebih mudah, klik saja F3 pada keyboard lalu pilh salah satu scrift diatas. Berdasarkan pengalaman saya setelah membolak balik informasi di www.google.com maka yang cocok adalah :
div class='main-outer'>
Bisa jadi beda dengan template yang lain…
Setelah dapat, copas scrift berikut tepat diatas scrift yang dicari tadi : 
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu2 a</a></li>
<li><a href='#'>Sub Menu2 b</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu3a</a></li>
<li><a href='#'>Sub Menu3b </a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu4a</a></li>
<li><a href='#'>Sub Menu4b </a></li>
</ul>
</li>
<li><a href='#'>Menu5</a></li>
</ul>
</div>

PENJELASAN :
1. Cara memasukkan alamat URL:
Ganti tanda # (warna biru) dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.
2. Cara menuliskan judul menu atau judul postingan: 
Ganti Tulisan warna biru dengan nama menu dan nama sub menu yang anda inginkan.
3. Cara merubah lebar menu: silakan  cari kode:
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;} ---> baris ke-3. Kemudian tambahkan kode (width:900px) di antara { dan }, sehingga menjadi :
#cat-nav {background:#156994;width:900px;margin:015px;padding:0;height:35px;} 
Angka 900px hanya sebagai contoh saja, silakan rubah angka 900  dengan ukuran lebar yang kamu inginkan, bisa juga mengganti kode 900px dengan kode 100%.
4. Untuk mengatur tinggi menu silakan ganti angka 35 pada kode 35px di atas dengan tinggi yang kamu mau. 
5. Untuk tambah atau kurangi jumlah menu, silakan copas atau hapus Skrip dengan blok warna hijau (1 porsi menu) , jumlah sub-menunya bisa ditambah sesuai selera, misalnya submenu ..c, d, e, f, dst.
6. Untuk mengganti warna, background dan huruf, perhatikan skrip di bawah ini.
[1]. <style>   
[2]. /* -- Menu Horizontal + Sub Menu-- */
[3]. #cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
[4]. #cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px ..........    
A. Mengganti warna background menu: Silakan ganti warna pada baris ketiga yang saya beri warna merah, dengan warna yang anda sukai, silakan klik daftar kode warna.
B. Mengganti warna tulisan/huruf, silakan ganti warina pada baris ke-4 yang saya beri warna hijau dengan warna yang anda sukai (ganti kodenya saja).
C. Mengganti model huruf (font), perhatikan skrip urutan ke-14; gantilah tulisan berwarna ungu dengan jenis font kesukaan anda,
[14]. #secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-
- Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar . 
- Lalu simpanlah/save
Saran 
* back up dulu template anda sebelum merubah/menambah scrift diatas, agar bisa dimanfaatkan kembali jika ada masalah dengan penambahan srcritf diatas. 
*  Untuk menghilangkan tampilan tampilan dobel dengan Laman Utama, 
- Maka ikutilah saran berikut :
- Masuk ke Menu Laman 
- Lalu pilih tampilan halaman dengan memilih "jangan tampilkan"
- Simpan setelan, maka laman utama akan tampil sendiri sesuai dengan scrift yang kita ketikkan tadi.
Blog sudah bisa dipublikasikan...
Apabila melalui cara yang kami bagikan ini belum berhasil, coba sahabat ulangi lagi dengan sabar. jika berkali-kali memang tidak bisa, sahabat bisa berkonsultasi  melalui komentar di bagian bawah ini. 

Tips Memasang Sub Menu Di Tata Letak/Side Bar Blog

Setelah tutorial di atas memasang menu dan sub menu pada halaman artikel, kali ini masih tetap memasang menu dan subnya, tapi di sisi luar halaman postingan (side bar), caranya:
1. Masuk ke dasbor blogger anda
2. Pilih Tata Letak atau Lay Out
3. Klik Add Gadget/ Tambah Gadget
4. Pilih HTML/JAVASCRIPT
(Biarkan kolom judul nama gadget kosong, lalu copy paste kode di bawah ini ke  kolom HTML yang tersedia)

<div id="RickyMenu">
       <div id="Rickybox">
      <ul id="punch">
        <li><a href="#">Home</a></li>
        <li>
          <a href="#">Sample Page</a>
          <ul>
            <li>
              <a href="#">Sub Page #1</a>
              <ul>
                <li><a href="#">Sub Sub Page #1</a></li>
                <li><a href="#">Sub Sub Page #2</a></li>
                <li><a href="#">Sub Sub Page #3</a></li>
              </ul>
            </li>
            <li><a href="#">Sub Page #2</a></li>
            <li><a href="#">Sub Page #3</a></li>
            <li><a href="#">Sub Page #4</a></li>
            <li><a href="#">Sub Page #5</a></li>
          </ul>
        </li>
        <li><a href="#">Sample Post</a></li>
        <li><a href="#">Blog Page</a></li>
      </ul>
    </div>
  </div>
Edit semua nama menu sesuai keinginan anda. Jangan lupa mengganti tanda # dengan alamat URL yang anda inginkan
5. Klik Save/Simpan
Atur posisi gadget drop down menu horizontal ini di tempat yang anda inginkan, lalu klik tombol SIMPAN SETELAN di bagian kanan atas layar.
Jika anda melakukan langkah-langkah di atas dengan benar, anda akan melihat sebuah horizontal drop down menu di tempat yang anda inginkan. 
Untuk Menambah Item di dalam drop down menu horizontal ini sangatlah mudah:
Silahkan cari pada bagian akhir ada kode seperti ini:
<li><a href="#">Blog Page</a></li>
      </ul>
Tepat di bagian atas </ul> bisa disisipkan menu baru, dan akan terlihat seperti di bawah ini:
<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU">TEKS BARU</a></li>
      </ul>
Jika menu tambahan lebih dari satu akan terlihat seperti di bawah ini
<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU 1</a></li>
<li><a href="LINK BARU 2">TEKS BARU 2</a></li>
<li><a href="LINK BARU n">TEKS BARU n</a></li>
</ul>

Jika salah satu menu tambahan mempunyai sub menu, maka perhatikan kode </li> menu tersebut yang diturunkan untuk membuka ruang baru bagi sub menu di dalam menu tersebut
<li><a href="#">Blog Page</a></li>
<li><a href="LINK BARU 1">TEKS BARU 1</a></li>
<li><a href="LINK BARU 2">TEKS BARU 2</a> 
        <li><a href="LINK BARU SUB MENU 1">SUB MENU 1</a></li>
        <li><a href="LINK BARU SUB MENU 2">SUB MENU 2</a></li>
</li>
<li><a href="LINK BARU n">TEKS BARU n</a></li>  


Model ke-2. 

(terpasang di jadipintar.com saat ini)
Ini adalah model drop down bertingkat yang bisa mengakomodir anatara menu dan submenu kemudian sub submenu dst. terserah kebutuhan; juga bisa saja hanya memasang menu saja (label) untuk lebih simpelnya. Untuk contoh silakan lihat di bagian atas blog ini.
Skripnya adalah:

<style>
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 0px #9c9c9c;
-webkit-box-shadow: 0 2px 0px #9c9c9c;
box-shadow: 0 2px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href='/'>Home</a></li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Drop menu</a>
<ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 2</a>
<ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a>
<ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.2</a></li>
<li><a href='http://namablog.blogspot.com' rel='dofollow' target='_blank'>Menu 3.3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 3.4</a></li>
</ul>
</li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='http://namablog.blogspot.com/' rel='nofollow' target='_blank'>Drop menu 3</a>
<ul>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 1</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 2</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 3</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 4</a></li>
<li><a href='http://namablog.blogspot.com/' rel='dofollow' target='_blank'>Menu 5</a></li>
</ul></li></ul>

Keterangan:
1. Silakan ganti tulisan berwarna merah namablog.blogspot.com dengan URL alamat blog anda.
2. Skrip ini bisa dipasang di side bar (luar artikel) atau pun di dalam artikel.
   - Untuk di sede bar, seperti bisa anda ke edit blogger- Tata letak - Tambah Gadget, dst.
   - Untuk di dalam artikel, anda mesti ke Template-Edit HTML dst., dan agar bisa terpasang di bagian paling atas blog, silakan copas skrip ini di atas kode </head>.

7 Pertanyaan Terbanyak Untuk Materi Ini

1. Ganti Warna background
Aldy Madani28 Februari 2014 18.33
Tanya:
Gimana Cara Ganti Warna Background Barnya ?
Jawab:
Gampang, pada skrip baris ke-3 ada tulisan ......#156994
gantilah kode warna background tersebut dengan kode warna sesuai selera anda. Daftar kode warnanya silakan klik di sini.
Selamat berkreasi.

2. Memasukkan Artikel ke Sub menu
Boby.12AB2 Maret 2014 20.37
Tanya:
gan cara agar postingan kita ada di submenu gimana caranya
Jawab:
Cara mengisi url, masuklah dari BLOGGER, lalu pilih POS, klik DITERBITKAN, lalu pada judul artikel yang akan kita masukkan klik LIHAT. Copy alamat url yang tampak di atas, lalu pastekan ke kolom submenu
Semoga bisa dipahami.

3. Cara Memasang Sub menu
Iwhante Evendi15 Maret 2014 13.27
Tanya:
Maksih ilmunya Gan!
Gan ane dah buat menunya, tp gk bsa buat submnunya. Trus cara biar submnu tadi mngrah ke postingan trntu gmna ya?
Jawab:
Pada skript yang memuat "Menu 1, Menu 2 dll, rubahlah kode '#' dengan alamat URL postingan yang akan dipasang, kata "Menu 1" rubah dengan judul yang ingin ditampilkan di layar.
'#' = Alamat URL postingan yang akan ditampilkan (sub menu)
"Menu 1, Menu 2 ......= Judul postingan yang akan ditampilkan di layar.
1. Cara memasang "'#'" (URLs)
- Masuk dari dasbor (jangan copy-paste alamat URL dari homepage)
- Pada judul postingan yang ingin kita pasang klik "lihat"
- Akan tampil alamat URl-nya di kotak pencarian atas, lalu "copy"
- Paste-kan pada posisi '#' di skript 
2.Cara memasang "Menu 1, Menu 2..... ", anda tinggal tulis judul yang ingin ditampilkan dari postingan tersebut, terserah apa yang sesuai dengan judul saja. Misalnya "cara membuat blog keren", "Pengertian Blog Dofollow", atau apa saja terserah.
Gampang kan ?
SELAMAT MENCOBA.

4. Cara Back Up Template
Tanya:
Marsudijono21 Mei 2014 18.19
Gan, back up templete itu gimana caranya?....Tx
Jawab:
Maksudnya membuat salinan skrip HTML untuk berjaga-jaga jika proses mengalami kegagalan dan tidak bisa kembali ke tampilan semula. 
Caranya:
- Masuk BLOGGER
- Klik TEMPLATE
- Pilih HTML (akan muncul kotak HTML, centang kotak di kiri atas atau tanda panah hitam di seluruh sisi kiri kotak, untuk membuka semua kode yang tersembunyi).
- Copy seluruh isi skrip, paste-kan ke Noteped
Jika proses anda mengalami gangguan, anda akan bisa kembali ke tampilan semula dengan copas skrip yang di simpan di notepad tadi.
Semoga menjadi paham.

5. Mengatur Lebar Background Menu dan judulnya
Tanya:
Akah 20LEgend23 September 2014 11.17
Nyang masih blon berhasil, coba terus dan jangan takut salah asal kita inget "Pratinjau" dulu!
Semangaaaat.....!!
oh iye gan ane udah hampir berhasil tinggal dikit lagi, ane punya 2 pertanyaan:
1. Script yang mana nyang buat ngatur lebar Back ground menu Bar? 
itu lho block warna biru klo dr contoh yg agan kasih diatas! ane udah coba ganti beberapa script 
yang menurut ane mengatur soal ukuran tapi masih gagal.
makasih banyak gan, ane doain tambah ganteng.... :))
2. Apakah kita bisa mengatur Panjang pendeknya text "nama" Menu atau Sub Menu?
Soalnye Sub menu nyang mo ane buat lumayan panjang, udah ane coba tp begitu ane 
Pratinjau Textnya kepotong gan.... 
Jawab:
1. Sudah saya tambahkan di artikel atas, silakan lihat "Penjelasan" poin 3.
2. Bisa dicoba, skrip baris ke-18, "width" nya ditambah jadi 300 px atau lebih terserah ente, kasih tahu kalau berhasil ya ?
Lain kali jangan pakai memuji, anda orang ke 2.000 yang ndoain begitu.

6. Cara Mengklasifikasi Sub Menu
Tanya:
Ade Rahmat26 November 2014 19.10
Gan gmna caranya nulis di menu atau submenu? tp bukan link ya, kalau link saya tau. contohnya di blog punya agan ada menu salat, puasa dll. nah kan pas di klik langsung ke halaman tuliasan blog agan. Tks
Jawab:
Klasifikasikan artikel anda berdasrkan label, nama pada menu hakikatnya adalah nama label, sehingga ketika anda klik menu "X", maka akan ditampilkan semua artikel dari label "X" tersebut, dicoba lagi ya, anda pasti bisa.

7. Cara Memasukkan URL
Tanya:
surya adi saputra7 September 2014 19.28
trima kasih mas berhasil,,, oya mas kalo yang tanda # kan di ganti Url menu atau sub menu, itu caranya gimana ya mas saya kurang paham, trima kasih,,
Jawab:
- Buka "Dasbor blogger"
- klik "Pos" lalu klik "diterbitkan"
- Pilih artikel yang mau di masukkan URlsnya, klik "lihat", nanti di kotak pencarian bagian atas (search bar) alamat URL nya akan tampil. Blok laku copy.
- Hapus tanda # ganti dengan alamat URL tadi (paste).

Ayo bergabung menjadi PENGHAFAL AL-QUR'AN dalam grup whatsapp. Info dan pendaftaran untuk ikhwan klik MUSHAF 1 dan untuk akhawat klik MUSHAFAH 1
Semoga Bermanfaat
Sumber:
http://kanginanjaya.blogspot.com/
http://trikmudahseo.blogspot.com/2012/08/bagaimana-cara-membuat-dropdown-menu.html
Editan Pribadi

359 komentar:

  1. CARA MEMASUKKAN URLs
    - Buka "Dasbor blogger"
    - klik "Pos" lalu klik "diterbitkan"
    - Pilih artikel yang mau di masukkan URlsnya, klik "lihat", nanti di kotak pencarian bagian atas (search bar) alamat URL nya akan tampil. Blok laku copy.
    - Hapus tanda # ganti dengan alamat URL tadi (paste).
    Silakan mencoba.

    BalasHapus
  2. Balasan
    1. Terima kasih atas kunjungan dan apresiasinya, Mas Gunanto Zidan.

      Hapus
  3. selamat siang mas,saya mau tanya saya sdh bisa memasukan skript nya dan mengganti tanda # dengan link yang di tuju namun yang saya binggung misal saya memasukan link yang dituju untuk beranda adalah superprofit88.blogspot.com dan saat mengklik beranda di blog saya itu jadinya address superprofit88.blogspot.com/www.superprofit88.blogspot.com jadi double addres gitu pak,mohon pencerahan.Trims

    BalasHapus
    Balasan
    1. Mas, link yang dipasang adalah alamat (URL) dari superprofit88, bukan ditulis manual. Caranya lihat di halaman blogger, klik pos, pada artikel superprofit88 klik lihat, nah alamat yang tertera di kotak pencarian (bagian atas) itulah yang harus dicopas menggantikan tanda "#". Dicoba lagi ya ?

      Hapus
  4. Kak, kok tetep gak bisa ya :(

    BalasHapus
    Balasan
    1. Coba diulang lagi dari awal, pelan-pelan. Yang lain pada bisa kok, selamat mencoba.

      Hapus
  5. Terimakasih mas berhasil nih :)
    di tunggu kunjungannya ya di blog saya :)

    http://ridwanip.blogspot.com/

    BalasHapus
    Balasan
    1. Selamat. Semoga makin sukses, akan meluncur....

      Hapus
  6. Sangat Membantu mas ..
    makasih

    BalasHapus
  7. thank you gan bermanfaat bgt ,, hehe

    BalasHapus
  8. Gan..
    Kalo buat memperbanyak posting di salah satu menu atau sub menu gimana..??
    Kalo posting 1 saya ngerti..tp kalo pengen nambah bnyak ga ngerti..

    BalasHapus
    Balasan
    1. CARA MENAMBAH JUMLAH POSTINGAN
      Skrip yang pertama dan terakhir memang hanya berisi satu postingan, tapi yang diantaranya (tengah) bisa untuk sebanyak mungkin postingan, OK ?

      Hapus
  9. Nyang masih blon berhasil, coba terus dan jangan takut salah asal kita inget "Pratinjau" dulu!
    Semangaaaat.....!!

    oh iye gan ane udah hampir berhasil tinggal dikit lagi, ane punya 2 pertanyaan:

    1. Script yang mana nyang buat ngatur lebar Back ground menu Bar?
    itu lho block warna biru klo dr contoh yg agan kasih diatas! ane udah coba ganti beberapa script
    yang menurut ane mengatur soal ukuran tapi masih gagal.

    makasih banyak gan, ane doain tambah ganteng.... :))

    2. Apakah kita bisa mengatur Panjang pendeknya text "nama" Menu atau Sub Menu?
    Soalnye Sub menu nyang mo ane buat lumayan panjang, udah ane coba tp begitu ane
    Pratinjau Textnya kepotong gan....

    BalasHapus
    Balasan
    1. CARA MENGATUR PANJANG MENU DAN TEKS NAMA SUB MENU
      1. Sudah saya tambahkan di artikel atas, silakan lihat "Penjelasan" poin 3.
      2. Bisa dicoba, skrip baris ke-18, "width" nya ditambah jadi 300 px atau lebih terserah ente, kasih tahu kalau berhasil ya ?
      Lain kali jangan pakai memuji, anda orang ke 2.000 yang ndoain begitu.

      Hapus
  10. Makasih banyak gan.. sangat bermanfaat... setelah dicoba berkali-kali, dan lebih teliti ternyata mudah. Maaf saya copas ya gan. Boleh kah?

    BalasHapus
    Balasan
    1. MINTA IZIN COPAS.
      Terima kasih kembali, anda memang gigih. Silakan disebarkan ulang.

      Hapus
  11. Kalo mau tambah gambar gmna mas :/ tolong penjelasannya mas :) terima kasih sebelumnya..

    BalasHapus
    Balasan
    1. CARA MENAMBAH GAMBAR
      Kalau gambar di baris menu/submenu saya belum coba, tapi tidak ada salahnya anda mencoba memasukkan kode HTML gambarnya, siapa tahu bisa, jangan lupa pratinjau dulu sebelum "save". salam.

      Hapus
  12. mas.. kalo buat gamba di atas gmn???

    BalasHapus
  13. makasih banyak mas, newbie banget buat blog..bermanfaat banget ijin share di blog ane yah.

    BalasHapus
  14. TERIMA KASIH BANYAK, ATAS TUTORIALNYA,INI SANGAT MEMBANTU,SEMOGA ALLOH MEMBALAS KEBAIKAN KAMU.

    BalasHapus
    Balasan
    1. Amin....., terima kasih kembali mbak Siti Julaeha, Kata Jamal Mirdad sih dari Malaysia.

      Hapus
  15. Terima kasih atas info nya Mas, sangat membantu.
    Tapi kalau ingin membuat Menu dan sub menunya *rata tengah * gimana?

    BalasHapus
  16. Terimakasih atas cara yang telah diberikan, smoga ilmu yang dibeikan dapat bernilai pahala. Amin

    BalasHapus
  17. Terima Kasih Gan, Akhirnya Bisa juga buat Sub Menu Setelah sekian Lama :')

    BalasHapus
  18. KAYAKNYA BEDA SAMA SEKARANG GAN,, JADI SAYA KESULITAN MENGIKUTINYA

    BalasHapus
  19. Gan ane cari2 jawaban di komentar gk nemu caranya masukin artikel ke menu bar. Tolong bantuannya, thx

    BalasHapus
    Balasan
    1. CARA MEMASUKKAN ARTIKEL
      Silakan lihat artikel di atas pada "Penjelasan."

      Hapus
  20. mau nanya nih gan. kalau misal kita salah masuki java scriptnya, itu kenapa gan?? soalnya pingin coba buat, eh tapi pas udah liat script jadi kendor hehehehe :".
    makasihh :)

    BalasHapus
  21. maaf om sebelum nya , kalau kode div nya
    , kok kode yang itu saya cari ga ketemu - ketemu ya mohon secepat nya bales :) terima kasih :)

    BalasHapus
    Balasan
    1. MENCARI KODE DIV
      Ada 3 kode div, carilah satu per satu, pakai "ctrl+F" biar lebih cepat.

      Hapus
  22. terima kasih. sangat bermanfaat. semoga mendapatkan pahala yang setimpal :) dan menjadi semakin pintar :) Amiiin

    BalasHapus
  23. thanks gan
    infonya sangat membantu

    BalasHapus
  24. gan, klo mau ganti font hurufnya gmn?hehe..

    BalasHapus
    Balasan
    1. CARA MENGGANTI MODEL/JENIS FONT
      Silakan lihat isi artikel lagi, baca "Penjelasan 6 C" sudah saya tambahi khusus untuk anda.

      Hapus
  25. mas kalo cara ganti font menu bar nya gimana ya? terima kasih banyak sebelumnya :)

    BalasHapus
    Balasan
    1. CARA MENGGANTI MODEL/JENIS FONT
      Silakan lihat isi artikel lagi, baca "Penjelasan 6 C" sudah saya tambahi khusus untuk anda.

      Hapus
  26. salam kenal mas, saya alan zulfikar dari aceh. Alhamdulillah saya berhasil mencobanya seperti yang mas ajarkan. tapi saya ingin menambahkan lagi ilmunya mas.
    mas, bagaimana caranya menambah-nambahkan url didalam sub menu. karena didalam sub menu itulah saya banyak membagikan pengalaman ilmu elektronik saya ke public.
    terima kasih banyak mas.

    salam hangat,
    alan zulfikar.

    BalasHapus
    Balasan
    1. Salam kenal kembali Mas Alan Zulfikar, terima kasih telah mengunjungi blog ini. Jika yang anda maksud adalah submentu bertingkat, saya mohon maaf belum menyiapkannya. Mudah-mudahan bisa anda cari di blog lain, maaf ya ? salam untuk keluarga .

      Hapus
  27. gan saya bingung cara ngatur kolom menunya supaya panjangnya sama antara menu1,2,3 dan seterusnya, supaya panjangnya gak mengikuti banyaknya huruf,, mohon infonya?

    BalasHapus
    Balasan
    1. MENGATUR PANJANG MENU
      Gan, rasanya panjang kolom menu sudah sama kok, coba diperiksa lagi.

      Hapus
  28. Makasih Info'a mas cuy berhasil dan mudah di mengerti (y)

    BalasHapus
  29. trima kasih gan... di tempat lain saya gak bisa. di sini langsung bisa

    BalasHapus
  30. Bro....ilmu anda sangat mantap, kita bikin tambahan menu dan sub menu, gmna to caranya thank...

    BalasHapus
  31. gan pnya saya ngak ada scrift nya,,,,
    newbie

    thanks

    BalasHapus
  32. saya masih belum bisa gan.
    ni blog deadline banget buat tugas ebisnis saya :"(

    BalasHapus
  33. thanks ya mbakakk / ni udah mumeeetttttt bangetttt

    BalasHapus
  34. oya mas, kenapa script tersebut tidak bisa dicari di HTML y?

    dicari di blog ko g da y

    BalasHapus
    Balasan
    1. AGAR SEMUA SKRIP TERBUKA
      Barang kali ini membantu. Coba klik semua mata panah di kotak HTML, agar semua skrip terbuka, barulah cari kodenya.
      Semoga berhasil.

      Hapus
  35. gan saya udah nyoba, tapi pas ngeposting, postingannya di halam depan ada, di sub menu yg saya inginkan juga ada, jdi doubel, gmna ga?

    BalasHapus
    Balasan
    1. POSTING BARU SELALU TAMPIL DI BERANDA
      Postingan baru memang ditampilkan di halaman depan (beranda), nanti kalau sudah menyusul postingan berikutnya, tampilannya sudah berganti yang baru (tidak dobel lagi). Apakah itu yang anda maksud?

      Hapus
  36. Terima kasih banyak Gan, sudah beberapa kali saya coba dengan tips yang lain semuanya gagal. tapi setelah saya coba cara di atas....alhamdulillah.........luar biasa. skali thanx.

    Sukses selalu

    BalasHapus
    Balasan
    1. Sama-sama, terbukti.... sekarang anda JADIPINTAR.

      Hapus
  37. makasihh sangat bermanfaat sekali mass

    BalasHapus
  38. mas saya udah buat, tp ada sedikit masalah ini sudah saya kirim ke facebook karna saya sertakan gambar, mohon solusinya..

    BalasHapus
    Balasan
    1. Sudah saya cek di inbox fb, tidak ada kiriman anda.

      Hapus
  39. terima kasih mas, jelas sekali ilmunya

    BalasHapus
  40. Gan, terima kasih infonya. Saya dah berhasih memasang menu dan sub menu. Yang jadi persoalan sekarang adalah bagaimana cara memesukkan artikle kita ke masing-masing menu sub menu tersebut.

    BalasHapus
    Balasan
    1. Sudah dijelaskan dengan detil di atas, silakan baca ulang bab "Penjelasan", Kamu pasti bisa !!!

      Hapus
  41. thanks yaaa kaaa jadi pinter nih heheheh sesuai sama judul blog nya heheh :D

    BalasHapus
  42. Dengan Mengikuti tutorial postingan diatas ternyata berhasil dan sukses. maaf masih pemula dan lg belajar ngeblog. Terima kasih atas ilmunya ya mas. Semoga barokah. Amiin.

    BalasHapus
    Balasan
    1. Tks kembali, semoga keberkahan juga selalu meliputi anda dan keluarga.

      Hapus
  43. Terimakasih Ilmunya ya, dah diprakteki, tapi belum siap semua. Masih sangat2 Pemula.Saya Minta untuk di share di blog saya ya.

    BalasHapus
  44. gimana kalau isi menu di blog.?

    BalasHapus
    Balasan
    1. Baca saja artikel di atas, sudah lengkap kok.

      Hapus
  45. Nyimak dulu sob. baru newbie...

    BalasHapus
  46. Gan gmna caranya nulis di menu atau submenu? tp bukan link ya, kalau link saya tau. contohnya di blog punya agan ada menu salat, puasa dll. nah kan pas di klik langsung ke halaman tuliasan blog agan. Tks

    BalasHapus
    Balasan
    1. MENU ITU IDENTIK LABEL
      Klasifikasikan artikel anda berdasrkan label, nama pada menu hakikatnya adalah nama label, sehingga ketika anda klik menu "X", maka akan ditampilkan semua artikel dari label "X" tersebut, dicoba lagi ya, anda pasti bisa.

      Hapus
  47. Ass. Gan cara diatas sy udah sukses alhamdulillah dan terima kasih.
    cuma gimana caranya supaya menu dan submenunya jika di klik keluar tulisan saya.
    sy kesulitan mohon bantuannya. soalnya saya cari d google kebanyakan menu dan sub menunya pas di klik malah link ke web orang lain.bls ya heheeeee. Jazakallah

    BalasHapus
  48. COBA ULANGI PERCOBAAN
    'Alaikum salam, saran saya, ulangi pemasangan skrip dari awal, karena jika mengikuti dengan benar, pasti linknya akan mengarah ke artikel ente,. Wa iyyakum

    BalasHapus
  49. saya sudah membuat menu dan sub menu sesuai dengan yang sudah anda berikan tutorialnya diatas, tetapi di sub menu tersebut saya ingin menambahkan kembali sub sub menu kalau begitu bagaimana ya caranya mas? terimakasih. :D

    BalasHapus
    Balasan
    1. MENU BERTINGKAT.
      Mbak Widi Novelita, sayang sekali yang anda minta tidak ada, ilmu saya belum sampai ke sana, mohon maaf dan tetap semangat!

      Hapus
  50. Tks infonya mantap. Gan gmana caranya mambah submenu dengan sub menu lg gmana? contoh
    1. Kampus-----------------------------> Menu
    a. Jurusan-------------------------> Sub Menu
    * Manajemen Bisnis-------> Bagian dari sub menu
    * Akuntansi-------------------> Bagian dari sub menu
    * Ekonomi Pembangunan--> Bagian dari sub menu
    Nah untuk menambahkan yg 3 itu gmana?
    Jazakallah sblmnya.

    BalasHapus
    Balasan
    1. MENU BERTINGKAT BELUM TERSEDIA
      Sayang sekali untuk menu dan submenu bertingkat belum ada, mohon maaf, terima kasih.

      Hapus
  51. kok ada tulisan gini mas "Kesalahan saat mengurai XML, baris 22, kolom 2: The markup in the document following the root element must be well-formed."

    BalasHapus
    Balasan
    1. ULANGI SAJA
      Hal itu terjadi karena kesalahan memasukkan posisi skrip, ada kode yang kurang/terhapus, atau yang lainnya, cobalah ulangi lagi atau jatuhkan posisinya di skrip lain yang serupa, semoga berhasil.

      Hapus
  52. Terimakasih atas ilmunya , untuk kesekian kali saya merubah tdk bisa berhasil, tp yg ini langsung berhasil. Sekali lagi terimakasih

    BalasHapus
    Balasan
    1. Wicky Barcelonista dan Arik S. terima kasih kembali, semoga sukses selalu.

      Hapus
  53. mas terima kasih
    tapi kok sering ada kata kata
    Kesalahan saat mengurai XML, baris 22, kolom 2: The markup in the document following the root element must be well-formed.
    makasih

    BalasHapus
    Balasan
    1. ULANGI SAJA
      Hal itu terjadi karena kesalahan memasukkan posisi skrip, ada kode yang kurang/terhapus, atau yang lainnya, cobalah ulangi lagi atau jatuhkan posisinya di skrip lain yang serupa, semoga berhasil.

      Hapus
  54. Sebelumnya terima kasih untuk ilmunya, sangat bermanfaat sekali buat saya
    Just info mas kuapurworejo kopas
    Cara membuat sub menu di tata letak dalam daftar link
    masukkan copas scriftnya diatas

    Semoga bermanfaat :)

    BalasHapus
  55. terimakasih, sangat membantu :)

    BalasHapus
  56. kodenya tidak ada di templet ku sayang sekali

    BalasHapus
  57. terima kasih postingannya bermanfaat khususnya ane yg lagi belajar blog.... izin copas gan...

    BalasHapus
  58. waaah terimakasih sekali mas :D
    berhasil banget ! :)

    BalasHapus
  59. Min mau nanya nih.....
    kalau mau memperbagus tampilan menu bar itu gimana ya???...........

    BalasHapus
    Balasan
    1. Silakan berimprovisasi dengan merubah, warna, ukuran dll. jangan takut untuk mencoba -coba.

      Hapus
  60. cara menaruh scrol di main blog kita gmana gan,,,,

    BalasHapus
    Balasan
    1. Scroll apa maksudnya? scroll menu atau scroll umum ? tolong dirinci yang jelas.

      Hapus
  61. gan saya udah bikin menu bar dan sub menu.. lalu bagaimana agar sub menunya bisa di klik??

    BalasHapus
    Balasan
    1. AGAR SUBMENU BISA DIKLIK
      Sebaiknya anda membaca ulang tutorial di atas, semua sudah dijelaskan detail, kalau saya jawab pun akan sama seperti artikel di atas, kamu pasti bisa !!!!

      Hapus
  62. Gan makasi banget yaaaaaaaaaa

    BalasHapus
  63. cara nampilkan laman beranda biar jadi hgalam utamanya gimnan yaa mas bro

    BalasHapus
    Balasan
    1. Maaf setahu saya halaman utama selalu menampilkan postingan terbaru, entahlah kalau ada cara yang lain, silakan share blogger senior lain.

      Hapus
  64. maaf ini saya lagi bikin blog trus ada asalah ....
    saya sudah bikin menu dan sub menu di blog saya , tpi cara ngisi ( posting ) di sub menu gimana ?

    BalasHapus
    Balasan
    1. Coba baca lagi tutorial di atas, nanti jadi paham caranya, intinya, cara memasukkan alamat URLsnya dari dasbor blogger, klik lihat baru copas, Anda pasti bisa.

      Hapus
  65. informasi yang sangat membantu,terimakasih sudah share :)

    BalasHapus
  66. Segera aku praktekin di blog aku

    purbamas.blogspot.com

    BalasHapus
  67. Terima kasih mas ilmunya, saya berhasil..tapi buat halaman utamanya kenapa bukan di home setelah saya pasang URLnya...mhn jawabannya mas..

    BalasHapus
  68. gan bagaimana menambahkan banyak posting pada satu sub menunya ?

    BalasHapus
    Balasan
    1. Gampang, tinggal tambah skrip untuk submenu yang sudah ditulis diatas, 1 skrip submenu untuk 1 artikel tambahan.

      Hapus
  69. makasih,,,,

    www.pelajarsmkpgri.blogspot.com

    BalasHapus
  70. mas kok background menunya nggak bisa diganti?
    www.bankcurhat.blogspot.com

    BalasHapus
    Balasan
    1. MENGGANTI BACKGROUND
      Silakan ulangi lagi Bab "Penjelasan" nomor 6, pasti bisa sebagaimana yang lain juga sudah berhasil. OK?

      Hapus
  71. assalamualaikum
    ini baru masuk akal..
    thanks, bro..

    BalasHapus
  72. gan bagaimana mengatur letak menu bar agar pas sama headingnya?

    BalasHapus
    Balasan
    1. Silakan diatur lebar backgraundnya; anda bisa membaca kembali "Penjelasan" poin 3, pasti bisa...

      Hapus
  73. Terimakasih atas ilmunya. sangat membantu sekali. sukses selalu. ditunggu artikel berikutnya.

    BalasHapus
    Balasan
    1. Sama-sama, salam sukses juga untuk anda, terima kasih.

      Hapus
  74. mas wabseit mas sudah saya masukan di tukar lingk ww.ticania.blogspot.com,saya juga ingin wabseit saya di masukin di tukar lingk wabseit ini.kode tukar lingk wabseit saya ada di http://ticania.blogspot.com/p/copy-paste-kode-diatassetelah-itu.html#/

    BalasHapus
  75. Terima kasih! Saya mau nanya, bagaimana cara agar hanya ada 3 menubar dan tanpa ada sub menunya gan?

    BalasHapus
    Balasan
    1. Hilangkan skrip submenunya, cukup skrip menu1, menu2, menu3

      Hapus
  76. makasih om atas tutorialnya...setelah sekian lama saya mencari akhirnya menemukan juga apa yang saya cari...thanks berat om

    BalasHapus
  77. makasih akang...
    sekarang sudah aga sedikit mengerti hehehe

    BalasHapus
    Balasan
    1. Mengerti jangan sedikit, tapi sedikit-sedikit mengerti....

      Hapus
  78. thanks ya gann..sangat membantu

    BalasHapus
  79. assalammualaikum???

    mas kalo buat hosting gratis gimana caranya???

    jdi alamat web nya nggak pake blogger atau wordpress terlebih dahulu..
    mohon bantuannya..
    trima kasih..

    BalasHapus
    Balasan
    1. 'Alaikum salam wr. wb.
      Caranya gampang!!! beli atau sewa domain dari pihak ketiga, seperti blog ini, membeli dari idwebhost, tidak mahal kok, sekitar Rp.100 ribu pertahun. Ente bisa pilih nama blog yang diinginkan (jika belum dimiliki orang).

      Hapus
  80. Terima kasih, akhirnya ada yang membantu memecahkan masalahku.

    BalasHapus
  81. Infox bermanfaat banget...mantap...thanks ya....

    BalasHapus
  82. Salam. Mas ada tulsan ini -> Error parsing XML, line 1338, column 3: The element type "li" must be terminated by the matching end-tag ""

    gimana ngatasinya ya?

    BalasHapus
  83. Thanks bantuannya...gan. Ane udah coba n berhasil, tp ane mau nanya nich knp sub menu saya ttp muncul(maksudnya ga hilang) gmn yach spy yang muncul cuma menunya aja.Jazakallahkhairan.

    BalasHapus
  84. Sangat membantu,,, saya sendiri sudah mencobanya dan blog saya berhasil diatur sesuai keinginan,, terimakasih gan atas infonya

    BalasHapus
  85. saya lagi belajar juga nih tentang blog,, salam kenal

    BalasHapus
  86. Sama aku juga lagi nyari yang ada anak sub menu gimana caranya ya?

    BalasHapus
  87. saya mau tanya cara menghapus menu dengan tuntas gimana ????saya tidak tahu
    tolonggg ya ..........

    BalasHapus
  88. PERHATIAN !!!
    Untuk semua penanya berikut: mohon kiranya membaca ulang artikel di atas, karena jawabannya sudah ditulis lengkap, jika belum berhasil cobalah ulangi lagi dengan sabar. Harap maklum.

    BalasHapus