Membuat Menu Blog Dengan Gambar Mudah

Solehudin Nur Wahid

Friday, 26 December 2014

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.

Login ke blogger. Dari halaman dasbor pilih pengaturan Tata Letak.
Lalu Add Gadget, setelah itu Pilih HTML/JavaScript.
Selanjutnya susun kode CSS dan HTML Seperti format dibawah ini.

<style>

KODE CSS

</style>

KODE HTML

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/AVvXsEiWbvYjDj-pAHdr55n-HpiLSsKRksJ2qoUKDXN5AJuegQDoVdG_usRxMiY-Lp3PyDnvbFrZtjEEa3fK-KbdvYvDcEPuGn7IGaV5kxELG-fNnmjBBFg9wzo1Mh1T_lLRrw8RRZ_aILQnVYTq/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/AVvXsEgRTTrVuOucc4-5Y6v-dTlYWki-MJacPRPAALmmF-7duBjTQXbFjvLs6l1ib83f7p8LOW8Q00LoeqCdpwOnPBSfgx_PTbhas8AZAUcNBXGSSx1V9rrUi7hPxUWCm_Nif4yhKE6J5f2-s2P1/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/AVvXsEjaN4mQ65yeMM1RyRZslt3jni7eim2GyPxGEC62Ah60anF4hMn1FjUwyjgXNCL9h5PC-jeDBGknjvjfXT9MHcV8Lms4TpNdSBoxpY0CpTP2Yh3XPxif76pG3cplOMI9JWsF6d6ZJ2ZMo2zP/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/AVvXsEhYnZIE3Dnnr_rm4o1Ns0tR9PMr2dipRfh20RIxv4f9HGKPbHTiCRRKNaEdqnJuVwzTW3Pk31b4Sgrq4VdI4afY1HNChus-PahlFRO2EqjXzHgLY2E5ww4WYuxZRrmqy9Tj_Xs1Lej07ZDE/s128/HUBUNGI.jpg" title="Hubungi" width="50" height="50" /></a>

<figcaption>Hubungi</figcaption></li>

</ul>

</div>

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