Menu gambar dengan posisi sembarangan

Menu gambar dengan posisi sembarangan. Maksudnya adalah membuat menu menggunakan gambar, dengan posisi gambar yang tidak beraturan. Gambar bisa ditempatkan diatas, bawah, kanan, kiri sesuai dengan yang kita inginkan. Contohnya seperti dibawah ini.

• 

• 

• 

• 

• 

---

Cara membuatnya, ikuti langkah-langkah dibawah ini.

---

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Dan klik Tambahkan Gadget di bawah header atau disidebar. Dan pilih HTML/Javascript.
3. Selanjutnya copi kode HTML dibawah ini, dan pastekan didalam Gadget HTML/Javascript tadi.
<div id="satu1">
<ul>
<li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
</ul>
</div>

<div id="dua2">
<ul>
<li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
</ul>
</div>

<div id="tiga3">
<ul>
<li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
</ul>
</div>

<div id="empat4">
<ul>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html" title="Daftar isi"><img alt="Daftar Tutorial Desain Blog" height="74" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzV2qt2ogbiJW66HbPOml9vBXNiiBFo-MACGqk1YZfE19_g3ZOnRtpwVsgQiEILvFDEHs9KXDTHNaHC5YZ_KPmPO1yY13fIyWdNwI0tcdDq_b_I_zrM07pRUhTLUH5bGFx-DheE5rfbHWR/s133/Daftar%2520Isi.PNG" title="Daftar isi" width="133" /></a></li>
</ul>
</div>

<div id="lima5">
<ul>
<li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
</ul>
</div>
4. Selanjutnya, simpan HTML/Javascript.

Keterangan kode:

• Silakan isi URL Menu dengan URL/Halaman web anda.
• Silakan isi URL dari Gambar dengan URL dari gambar anda.
• Contoh URL bisa dilihat di div id="empat4" 

---

Setelah itu ke tahap pengaturan posisi gambar, caranya klik Desainer Template(masih pada pengaturan Tata Letak). Lalu Klik Tingkat Lanjut > Tambahkan Css. Dan masukan kode CSS dibawah ini kedalamnya.

---

#satu1{background:transparent;margin:-10px 0px 0px -100px;float:left;}
#satu1 ul{list-style:none}

#dua2{background:transparent;margin:-40px 0px 0px 0px;float:left;}
#dua2 ul{list-style:none}

#tiga3{background:transparent;margin:-10px 0px 0px 0px;float:right;}
#tiga3 ul{list-style:none}

#empat4{background:transparent;margin:40px -390px 0px 0px;float:right;}
#empat4 ul{list-style:none}
#empat4 img{position:relative;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .1s ease-in-out;transition:all .4s ease-in-out}
#empat4 img:hover{-o-transform:scale(1) rotate(720deg);-moz-transform:scale(1) rotate(720deg);-webkit-transform:scale(1) rotate(720deg)}

#lima5{background:transparent;margin:-40px -160px 0px 0px;float:right;}#lima5 ul{list-style:none}

---

Keterangan Kode:

---

• margin:40px -390px 0px 0px; fungsinya untuk mengatur gambar ke posisi yang kita inginkan, formatnya kode tersebut adalah 40px(atas) -390(kanan) 0px(bawah) 0px(kiri).
• float:right;  dan float left fungsinya untuk memudahkan kita menempatkan gambar ke bagian kiri atau kanan
• #empat4 img{ dan #empat4 img:hover{ kode tambahan agar gambar berputar ketika disentuh mouse.

Atur posisi dari gambar tersebut sesuai dengan yang kalian inginkan.  Setelah selesai mengatur posisi gambar, baru lah klik Terapkan Ke Blog, Selesai.

Dengan memasukan kode Css ke bagian Tambahkan Css, kita dapat melihat perubahan posisi gambar secara langsung, ketika kita merubah nilai dari kode Css. Contoh gambar penempatan kode Css didalam ruang Tambahkan Css.

Silakan baca juga artikel tentang cara membuat menu blog dengan gambar, yang dapat dijadikan pilihan dalam pembuatan menu gambar diblog. Semoga bisa bermanfaat untuk anda.

Cara membuat menu HTML dan Css

Cara membuat menu html dan css serta cara mengisi menu tersebut dengan link atau url yang kita inginkan. Perlu diketahui bahwa menu terdiri dari kode HTML sebagai pokok utama dari menu dan CSS sebagai penghiasnya. Akan saya coba jelaskan sedikit demi sedikit.

---

Kode dasar HTML dari sebuah menu, kira-kira seperti ini.

---

<div id="menu">
<ul>
<li><a href="URL alamat web">Beranda</a></li>
</ul>
</div>

Maka hasilnya akan menjadi seperti ini.

• Beranda

Selanjutnya kita coba tambahkan menu yang lainnya. Seperti Profil, Contact, dan Daftas isi.

<div id="menu">
<ul>
<li><a href="URL alamat web">Beranda</a></li>
<li><a href="URL alamat web">Profil</a></li>
<li><a href="URL alamat web">Contact</a></li>
<li><a href="URL alamat web">Daftas Isi</a></li>
</ul>
</div>

Maka hasilnya akan menjadi seperti ini.

• Beranda
• Profil
• Contact
• Daftar Isi

Dari contoh diatas, setiap menu mempunyai kode sendiri.
Seperti Beranda kodenya: <li><a href="URL alamat web">Beranda</a></li>.
Jadi jika ingin menambahkan menu lagi, kita dapat menambahkan kode dengan format
<li><a href ="URL address">Nama menu yang akan dibuat</a></li>

Dari kode HTML menu diatas. Menu akan berbentuk menurun/vertical dengan bullet-list disamping kirinya. Sekarang masuk ke bagian CSS/Penghias menu. Dari kode CSS inilah kita dapat membuat menu menjadi bentuk Horizontal atau memanjang kesamping. Mengatur warna tulisan, warna background, jarak antar tulisan dan lain-lainnya. Kode Css akan berjalan sesuai dengan kode HTML yang kita buat.

Untuk cara memasangnya di blog, ke pengaturan tata letak > klik tambahkan gadget > pilih HTML/Javascipt, lalu masukan kode HTML dan CSS kedalamnya Dengan format seperti dibawah ini.

<style>
kode Css
</style>
kode html

Lalu Save, selesai.

Lanjut ke bagian Css. Seperti contoh kode HTML diatas. Kita membuat menu dengan Kode id=menu maka dikode Css nya juga harus menu. Contoh:

#menu { background:#eee;border:1px solid #444444;}

Maka hasilnya akan menjadi seperti ini.

• Beranda
• Profil
• Contact
• Daftas Isi

Selanjutnya menghilangkan bullet list. Tambahkan kode #menu ul {list-style:none;} Maka hasilnya akan menjadi seperti ini.

• Beranda
• Profil
• Contact
• Daftas Isi

Mengatur jarak antar tulisan. Tambahkan kode #menu ul li {padding:5px;} hasilnya.

• Beranda
• Profil
• Contact
• Daftas Isi

Mengatur warna,ukuran,tebal tulisan tambahkan kode Css #menu ul li a{color:#aaaaaa;font-size:12px;font-weight:bold;} Hasilnya:

• Beranda
• Profil
• Contact
• Daftas Isi

Mengatur warna tulisan ketika disentuh mouse. tambahkan kode #menu ul li a:hover{color:#aaa;} Hasilnya.

• Beranda
• Profil
• Contact
• Daftas Isi

---

Jadi kode keseluruhan dari kode HTML dan CSS diatas adalah seperti ini.

---

<style>
#menu { background:#eee;border:1px solid #444444;}
#menu ul {list-style:none;}
#menu ul li {padding:5px;}
#menu ul li a{color:#000;font-size:12px;font-weight:bold;}
#menu ul li a:hover{color:#aaa;}
</style>

<div id="menu">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
</ul>
</div>

---

Sekarang ke tahap pembuatan menu horizontal. Kode HTML nya sama seperti cara diatas, yang berbeda hanyalah kode Css nya kita tambahkan kode float;left pada bagian #menu ul li {padding:5px;float;left; } dan juga kode height:40px; pada bagian #menu { background:#eee;border:1px solid #444444;height:40px;} . Contoh:

---

<style>
#menu { background:#eee;border:1px solid #444444;height:40px;}
#menu ul {list-style:none;}
#menu ul li {padding:5px;float;left}
#menu ul li a{color:#000;font-size:12px;font-weight:bold;}
#menu ul li a:hover{color:#aaa;}
</style>

<div id="menu">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
</ul>
</div>

---

HASILNYA

---

• Beranda
• Profil
• Contact
• Daftas Isi

Dari contoh2 diatas, kita dapat melihat perbedaan antara menu horizontal dan vertical terletak pada kode Cssnya sedangkan kode HTML nya tetap sama. Silakan berkreasi sendiri. Artikel diatas hanyalah sedikit tutorial sederhana dari saya, yaitu tentang dasar pembuatan menu menggunakan kode HTML dan Css, yang dapat anda kembangkan sendiri sesuai dengan keinginan anda. Semoga Bermanfaat.

Menu Vertical Fandra Juani

Menu Vertical Fandra Juani. Menu vertical ini berisi tulisan dengan warna yang berbeda disetiap hurufnya, ditambah dengan icon disamping kirinya. Icon yang dipasang dibuat dengan bentuk bulat. Dan ketika disentuh kursor mouse icon tersebut akan berputar.

• Fandra Juani
• Facebook
• Twitter
• Google +

Cara membuatnya ikuti langkah² dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Selanjutnya, pilih tambahkan Gadget, dan pilih HTML/Javascript. Lalu masukan kode dibawah ini.
<style>
#tentang{background:transparent;height:150px}
#tentang ul{float:left}
#tentang ul li{width:200px;float:left;list-style:none}
#tentang ul li span{float:left;font-family:Trebuchet;text-transform:uppercase;font-size:14px;padding:0 0 0 10px;text-shadow:2px 2px 5px #1780dd;font-weight:bold}
d{font-size:180%;color:DarkCyan}
g{color:red}
h{color:blue}
i{color:#ee3e80}
j{color:pink}
k{color:black}
l{font-size:180%;color:violet}
m{color:DarkCyan}
n{color:blue}
o{color:pink}
r{color:red}
t{font-size:180%;color:yellow}
x{font-size:180%;color:#3af}
#tentang ul li span:hover{padding:0 0 0 20px}
#tentang ul li img{padding:0;border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px;float:left;position:relative;-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .1s ease-in-out;transition:all .8s ease-in-out}
#tentang ul li img:hover{-o-transform:scale(1) rotate(360deg);-moz-transform:scale(1) rotate(360deg);-webkit-transform:scale(1) rotate(360deg)}</style>
<div id='tentang'>
<ul>
<li><a href='http://fandrajuani.blogspot.com/p/blog-page_25.html' title='Fandra Juani'><img alt="Tentang Fandra Juani" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmQxJou48wMxuRI8mwEU0xtWWPLYedCgaIKXKl8Dchrunyn3oWVFgt7fHUiawUcsZs6PZ0xqRVe20vCB8eflPMdEUq6magyODtIMwg4Gt_hU4bb9Nei_sNW9Aa4-4t62Wc0Vr9aG2kH-ed/s128/fandra-juani.jpg' width='32' height='32' title="About Me"/><span><d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r></span></a></li>

<li><a href='https://www.facebook.com/fandra.juani'title='My Facebook'><img alt="fandra juani"src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuNR01mhjdrwLYJaVikqw1M1sNyJd3JDMeloQqFjo9MISPB3xNwVhfxl2XQVkArperj5d6FQAFa1s0NZAtahx-JBj2VrsyYsiW7WktzRS4TyfwPWIeMH9lTW4_UlhTskgNoW51Zdm2zqr-/s128/Fb.jpg' width='32' height='32' title="Facebook Fandra Juani"/><span><t>F</t>a<h>c</h><g>e</g><j>b</j><m>o</m><r>o</r><h>k</h></span></a></li>

<li><a href='https://twitter.com/fandrajuani' title='My Twitter'><img alt="fandra juani" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio1edBD1g49BO4PkgvtXbv7RH3yauhXo1XA7Aqav_GeLZIRybNagnICu4X7iNWsCjSwpUUJnPzELBcgXFmb268BYXpkC84-vgIfIjI8KncRQBrMrcXPcm2amy8cB8GjdqXfkaSjHYLFscu/s128/Twitter.jpg' width='32' height='32' title="Twitter Fandra Juani"/><span><x>T</x><o>w</o><m>i</m>t<j>t</j><h>e</h><r>r</r></span></a></li>

<li><a href='https://plus.google.com/u/0/110277074823916598610/posts' title='My Google+'><img alt="fandra juani" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBxHc1Rn8fQQpBB3rZsNS3CL5u-vojbf2aAaC8Tlqf-LEpBTk1NHLbc7QpHO8QXDia3gzNoN_AM3yXzBUtj94WdGKjBzI_zRgZ4KTH2-64SOSoqNn9Aszqxjl6TZbkB131MhtBEYg8es83/s32/G%252B.jpg' width='32' height='32' title="Google+ Fandra Juani"/><span><l>G</l><h>o</h><r>o</r><m>g</m><k>l</k><h>e</h> <g>+</g></span></a></li>
</ul>
</div>
3. Save Gadget, Selesai.

Keterangan Kode:  #tentang{background:transparent;height:150px}atur tinggi menu vertical sesuai dengan tinggi dari menu kalian.

Keterangan kode lainnya, bisa di pelajari pada daftar artikel dibawah ini.

1. Membuat menu vertical sederhana.
2. Tulisan dengan warna yang berbeda. 
3. Membuat icon sendiri untuk website. 
4. Cara upload dan ambil URL Gambar.
5. Membuat gambar bentuk bulat diblog.
6. Membuat gambar berputar diblog.

Silakan berkreasi, dan semoga bisa bermanfaat untuk anda.

Cara Membuat Menu Vertical Sederhana

Cara membuat menu vertical sederhana di blog. Berbeda dengan menu horizontal yang memanjang kesamping.

Menu vertical akan memanjang atau menurun kebawah. Biasanya menu vertical ditempatkan dibagian kanan atau kiri sidebar blog. Silakan lihat contoh gambar disamping, atau contoh menu dibawah ini.

• Beranda
• Profil
• Contact

Untuk lebih jelasnya tentang cara membuat menu vertical diblog. Ikuti langkah² dibawah ini.

1. Login ke blogger, dan pilih pengaturan template.
2. Lalu klik tambahkan gadget, dan pilih HTML/Javascript.
3. Selanjutnya copy kode dibawah ini.
<style>

#vertical {
  background: transparent;
}
#vertical ul {
}
#vertical ul li {
  background: #aaaaaa;  list-style: none;border:1px solid #1780dd;
}
#vertical ul li span {
  text-transform: uppercase;
  font-family: 'Helvetica Neue', helvetica, 'microsoft sans serif', arial, sans-serif;
  font-size: 12px;
  color: #444444;
font-weight:bold;
padding:0px 0px 0px 10px;
}
</style>
<div id='vertical'>
<ul>
   <li ><a href='http://fandrajuani.blogspot.com/'><span>Beranda</span></a></li>
   <li><a href='#'><span>Facebook</span></a></li>
   <li><a href='#'><span>Twitter</span></a></li>
</ul>
</div>
4. Dan Pastekan di gadget HTML/Javascript tadi.
5. Terakhir, save gadget. Dan pindahkan gadget ke tempat yang kalian inginkan. Selesai.

Keterangan kode langkah 3:

• <a href='http://fandrajuani.blogspot.com/'> dan <a href=''> Isi dengan URL yang kamu inginkan.
• Jumlah menu diatas ada 3. Untuk menambahkan jumlah menu?
  Tambahkan kode <li><a href=''><span>Nama Menu kamu</span></a></li>
  Dibawah kode <li><a href=''><span>Twitter</span></a></li>
• background: #aaaaaa; warna background
• border:1px solid #1780dd; warna garis biru yang memisahkan antar menu.
• text-transform: uppercase; kode ini membuat Menu menggunakan huruf besar semua.
  Jika tidak ingin menggunakan huruf besar, hapus kodenya.
• padding:0px 0px 0px 10px; spasi tulisan menu sebelah kiri.

Silakan dibaca juga artikel tentang menu yang lainnya. Seperti membuat menu dengan gambar disampingnya, cara membuat menu dropdown di blog atau jika masih bingung dengan cara membuat menu di blog, silakan baca cara membuat dan mengisi menu blog. 

Itulah sedikit cara desain blog dan tips trik tentang cara membuat menu vertical sederhana di blog. Semoga Bermanfaat.

Cara Membuat Menu yang Menempel Di Dinding Blog

Cara membuat menu yang menempel, mengambang, melayang diatas atau dibawah dinding blog. Ketika kursor naik atau turun, menu masih pada posisi yang sama. Silakan lihat contoh menu hijau dibagian bawah.

Untuk lebih jelasnya tentang cara membuat menu menempel diatas atau dibawah dinding blog. Ikuti langkah² dibawah ini.

1. Buatlah menu terlebih dahulu. Caranya: Ke Pengaturan Tata Letak, lalu tambahkan Gadget. Trus Pilih HTML/JAVASCRIPT.
2. Selanjutnya copy kode dibawah ini. Dan pastekan di gadget HTML/JAVASCRIPT tadi.
<style>

#cssmenu {
  background: transparent;
}
#cssmenu ul {
float: left;
}
#cssmenu ul li {
  float: left;  padding:10px;
  background: transparent;  list-style: none;
}
#cssmenu ul li a {
  float: left;
  text-transform: uppercase;
  font-family: 'Helvetica Neue', helvetica, 'microsoft sans serif', arial, sans-serif;
  font-size: 12px;
  color: #FFFFFF;
font-weight:bold;
}
</style>
<div id='cssmenu'>
<ul>
   <li ><a href='http://fandrajuani.blogspot.com/'>Beranda</a></li>
   <li><a href='https://www.facebook.com/fandra.juani'>Facebook</a></li>
   <li><a href='https://twitter.com/fandrajuani'>Twitter</a></li>
</ul>
</div>
3. Beri judul HTML/JAVASCRIPT dengan nama Menu Tempel. Lalu Save
4. Setelah itu pengaturan template, klik edit HTML dan cari kode Menu Tempel, gunakan ctrl F untuk mempermudah pencarian. seperti dibawah ini.

5. Sekarang Copy id dari menu tempel yang bergaris bawah HTML2, seperti gambar diatas.
6. Lalu Pastekan di Notepad. Selanjutnya tambahkan kode css dibawah ini.
#HTML2 {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 30px;
  font-size: 12px;
z-index: 99;
  white-space: nowrap;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
7. Copy kode diatas, dan pastekan diatas ]]></b:skin> .
8. Dan Save Template.
9. Selanjutnya kembali ke tata letak, dan klik Gadget Menu Tempel Tadi,  lalu hapus judulnya, biarkan gadget tidak berjudul. 
10. Terakhir Save Gadget, Selesai.

Keterangan Kode Langkah 6:

• top:0px ini fungsinya menempatkan menu dibagian atas, untuk merubahnya kebagian bawah ganti menjadi bottom:0px;
• height: 30px; ini untuk mengatur tinggi menu, silakan diganti sesuai yang diinginkan.
• background-color: #336699; dan #336699 100%); untuk warna background

Keterangan Kode Langkah 2:

• http://fandrajuani.blogspot.com/ dan https://www.facebook.com/fandra.juani
• Dan juga https://twitter.com/fandrajuani adalah url yang jika diklik akan terbuka dari halaman url tersebut. silakan diganti dengan url yang kalian inginkan sendiri.

Itulah sedikit cara membuat menu yang menempel di dinding atas atau bawah blog yang bisa saya bagikan. Semoga Bermanfaat.

• Beranda
• Desain Blog
• Tips Dan Trik

Cara Membuat Menu Blog Dengan Gambar

Cara membuat menu blog dengan gambar dengan keterangan dibawahnya seperti beranda, daftar isi, hubungi, dan lain-lain. Untuk lebih jelasnya lihat gambar dibawah ini. Lalu klik salah satu gambar, maka akan terbuka halaman baru sesuai dengan URL halaman yang saya masukan.

• 
  Beranda
• 
  Desain Blog
• 
  Tips dan Trik
• 
  Hubungi

---

Cara membuat menu blog dengan gambar. Ikuti langkah-langkah dibawah ini.

---

1. Login ke blogger. Dari halaman dasbor pilih pengaturan Tata Letak.
2. Lalu Add Gadget, setelah itu Pilih HTML/JavaScript.
3. Selanjutnya susun kode CSS dan HTML Seperti format dibawah ini.
<style>
KODE CSS
</style>
KODE HTML
4. Sebagai contoh, Copy semua kode dibawah ini. dan Pastekan di Gadget HTML/JavaScript Tadi.
<style>
#tabs31{margin:0;padding:0;}
#tabs31 ul{list-style: none;}
#tabs31 ul li{float:left; margin-right:25px;}
#tabs31 img {width:50px; height:50px;}
figcaption {text-align:center;color: blue;font-weight:bold;font-size:10px;}
</style>

<div id="tabs31">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0ZOtrpa4Ydh_eOkMxg6MENMhYSsyN9GgMkKMK0fV4BVxnzg0q3fpuEG34bVrlMeCQxnz0evusv2jqFkTJ2DvCoo5coE97_-ZBuI8ewSjYIQundU1RYQnewuxT2uHiW4Y8dXJqFlpu8LUQ/s128/DAFTAR-ISI.jpg" title="Beranda" width="50" height="50" /></a>
<figcaption>Beranda</figcaption></li>

<li><a href="http://fandrajuani.blogspot.com/search/label/Desain%20Blog">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk0KiDr0UCX_rbSAHSs7uhpq-NUVvJK6Nmu8XoQyWeg5jgZBY_jCZKdSXF0mMQoJhpaiKSf0ziRHKyTvBOV12tSpsmBMg6vyZtw6NSiOlm_g0FvtSwTRfF8lUC2WMFrQhhgSSuE0WAqOY2/s128/DESAIN.jpg" title="Desain Blog" width="50" height="50" /></a><figcaption>Desain Blog</figcaption></li>

<li><a href="http://fandrajuani.blogspot.com/search/label/Tips%20dan%20Trik">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNRl1s-iiuMksTs5bf5OUHY1fx2DzQfnWgijTUUKkdkpo8g5TZgnv2ObcX7ir3qmGr34v_l9IWRMjDM4q1UgLzm-5JJiSSjeNYRJCj8T0JPMOcSUWQmak8M_cRjeTvHRZRQEduWqW_XT9v/s128/TIPS-DAN-TRIK.jpg" title="Tips dan Trik" width="50" height="50" /></a>
<figcaption>Tips dan Trik</figcaption></li>

<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">
<img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbwxOv9D6FO0HTl1mt7xtabvhoGrvS9tZWXfIx2egFhBo5OyTUljsHdq8vUGX_K9ih9ZEBx6mFtApVITz8Eyk1V0LMtZP1dy2WEYaemnU5rfs5n5WAFH7N6YS3xjxX776DCcfjb0YH4TP3/s128/HUBUNGI.jpg" title="Hubungi" width="50" height="50" /></a>
<figcaption>Hubungi</figcaption></li>

</ul>
</div>
5. Save Gadget, selesai.

---

Keterangan Kode Css Langkah 5: 

---

• #tabs31 ul{list-style: none;} untuk menghilangkan list-style bulet.
• #tabs31 ul li{float:left; membuat gambar horizontal, dan margin-right:25px; spasi atau jarak kanan antar gambar.
• #tabs31 img {width:50px; height:50px;} tinggi dan lebar gambar.
• figcaption untuk mengatur keterangan dibawah tulisan.

---

Keterangan Kode HTML Langkah 5:

---

• format dari menu <li><a href="url halaman menu">
• <img src="Url gambar" title="keterangan gambar saat disentuh mouse" width="50" height="50" /></a>
• <figcaption>Keterangan dibawah gambar</figcaption></li>

 Jika ingin menambahkan menu tambahkan format seperti dibawah ini.
<li><a href="url halaman menu"><img src="Url gambar" title="keterangan gambar saat disentuh mouse" width="50" height="50" /></a><figcaption>Keterangan dibawah gambar</figcaption></li>

---

Gunakanlah gambar dengan ukuran yang sama disetiap gambar, agar tampilan menu terlihat rapi, caranya bisa lihat di cara membuat icon blog. Cara mengambil URL gambar, bisa kamu baca di artikel cara upload dan ambil url gambar. Cara mengisi url halaman menu, baca artikel cara membuat dan mengisi menu blog. URL Label atau kategori juga bisa kita masukan ke menu.

Semoga Bermanfaat.

Membuat Menu Dropdown di Blogspot

Cara Membuat Menu Dropdown yang terletak di bawah header Blog.

Ikuti langkah-langkah dibawah ini.

1. Kunjungi situs http://cssmenumaker.com/
2. Pilih salah satu menu dropdown yang kamu inginkan.
3. Sebagai contoh Blue Opera Drop down menu. Gambar paling pertama dari gambar diatas. Selanjutnya klik Customize.

4. Dan Atur Isi Menu dropdown dengan nama dan URL yang kamu inginkan.

5. Keterangan gambar diatas:
• Gunakan Add Item untuk menambah isi menu, atau klik tanda silang merah untuk menghapus isi menu.
• Untuk mengganti nama Judul, Klik menu structure dan  isi dibagian Title.
• Untuk mengganti URL,  Isi bagian Link dengan URL yang kamu inginkan.
• Dan klik Update Item.
6. Setelah selesai mengisi menu. Selanjutnya copy semua kode HTML dan CSS di website tersebut, lalu pastekan di gadget HTML/Javascript di blogger. Contoh Pemasangan:
1. Login ke blogger. Dari halaman dasbor pilih pengaturan Tata Letak.
2. Klik Tambahkan Gadget, lalu pilih HTML/Javascript.
3. Lalu Susun Kode HTML dan CSS seperti ini.

<style>
Masukan Kode Css
</style>
Masukan Kode HTML

4. Save Gadget, lalu pindahkan ke bawah header.
7. Jika menu dropdown nya tidak turun atau tidak terlihat???
1. Login ke blogger. Dari halaman dasbor pilih pengaturan Template.
2. Klik Edit HTML dan cari kode
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
3. Setelah ketemu, ganti 1 menjadi 3 dan no menjadi yes
4. Kodenya jadi seperti ini.
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
5. Save template.
6. Selanjutnya kembali ke pengaturan tata letak.
7. Dan pindahkan Gadget HTML/Javascript menu dropdown tadi, tepat dibawah Header.
8. Lalu klik Save/Simpan Setelan.


9. Terakhir, lihat tampilan blog kamu. Selesai.

Untuk menu yang lebih mudah, bukan dropdown, tapi menu dari laman blogger, silakan baca disini cara membuat dan mengisi menu blog. Semoga Bermanfaat