Cara Menciptakan Sajian Blog Dengan Gambar

Cara menciptakan hidangan blog dengan gambar dengan keterangan dibawahnya menyerupai beranda, daftar isi, hubungi, dan lain-lain. Untuk lebih jelasnya lihat gambar dibawah ini. Lalu klik salah satu gambar, maka akan terbuka halaman gres sesuai dengan URL halaman yang aku masukan.

• 
  Beranda
• 
  Desain Blog
• 
  Tips dan Trik
• 
  Hubungi

---

Cara menciptakan hidangan blog dengan gambar. Ikuti langkah-langkah dibawah ini.

---

1. Login ke blogger. Dari halaman dasbor pilih pengaturan Tata Letak.
2. Lalu Add Gadget, sesudah itu Pilih HTML/JavaScript.
3. Selanjutnya susun isyarat CSS dan HTML Seperti format dibawah ini.
<style>
KODE CSS
</style>
KODE HTML
4. Sebagai contoh, Copy semua isyarat 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/AVvXsEjA-XPF1nPA6gnVTyA9YIQqYta2rKQUhPG_GPTfCUuZIpTdsFjMa7v9ANGtZG42j4MadUcZxrMhAxA2sPW7PMDXJZ1LO5tsDp1VnN7QRvQXBPNvfkLVtBlTo-9ftdu9ERad2mULIy6gljcY/s128/DAFTAR-ISI.jpg" title="Cara Membuat Menu Blog Dengan Gambar" 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/AVvXsEiIyZJwI6iRzogN6l5dTEZccXSrrvf4QchQH-_1bqNu807Oer9hdYh7F2aAkqKA8yJlKUudlcSxrUPw7s18GnNmmBg6xSv-uBy8lNRL4IzwNuogT-GCLSUXO3KmsTJKkEA8U-PiIHI5lI72/s128/DESAIN.jpg" title="Cara Membuat Menu Blog Dengan Gambar" 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/AVvXsEhDwIQdMPT4_hIaZ047IA5rbIWBVbCXGA4_I2fF2ZVxltLz8FM8OkwDSkIRp1ynec-QR7YtJs0L9oJ2fdzaIWF5bIdfHFbgMyOzOHuUmpeX4JElBcrUDZvVLvycaQFl_zVKy9EHikXRMNc1/s128/TIPS-DAN-TRIK.jpg" title="Cara Membuat Menu Blog Dengan Gambar" 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/AVvXsEjq9vLm8K8admckfuOKOD0heJf7R8fxgCcUvjrH5kl9VDt99LyL3G6GsFgi8hT-N6lV2NKHNZ90ilrJQJ5X7qHnfDg3dYG3-1IrJfP5hK7BBZ5gUl6AJ8HmeMaifySeY98h6zwvUxyliwwi/s128/HUBUNGI.jpg" title="Cara Membuat Menu Blog Dengan Gambar" 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; menciptakan 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 hidangan <li><a href="url halaman menu">
• <img src="Url gambar" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a>
• <figcaption>Keterangan dibawah gambar</figcaption></li>

 Jika ingin menambahkan hidangan tambahkan format menyerupai dibawah ini.
<li><a href="url halaman menu"><img src="Url gambar" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a><figcaption>Keterangan dibawah gambar</figcaption></li>

---

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

Semoga Bermanfaat.