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.
- Sebagai contoh, Copy semua kode dibawah ini. dan Pastekan di Gadget HTML/JavaScript Tadi.
- Save Gadget, selesai.
<style>
KODE CSS
</style>
KODE HTML
KODE CSS
</style>
KODE HTML
<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/AVvXsEgIDPn02DW-L5htuFFywHf7zA4tmjltlou67L2PI8L1vQIx9WqFljyRu33bgxr9DL-30jO1B0KRFufeRKFEsNRbb_OAzOrsPyZoDs6FSGH13PgdC-yuj6m0dvAa8GXkEZpcQOB-5SBTC0SO/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/AVvXsEi0tLdjTERpWZLRua97XkET6nBkHAbn8FNso3Ib2-fq821K3hNoQiNqEq25tFrGotjFjHM_rtb36STVuImVnbnXao9H1Sij346RO3NpJ-ppW8S9dldRFecTnEb5TYBkwXefgZuvXAxBO_Lx/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/AVvXsEg0-h6h9JljvVAG51qUJ2S3D_kmXgHJGm6DY5D72Xm62BnK_pyaiGKsrx9sNfPSwYOWktbN1V-dxW0L_fuN3GSfxfYVjqHimDArFs8D_fVE2Ei4Q3OV9bXuZyt9D2qcnwh8UKDzK7mvc5yH/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/AVvXsEgCTm0nIjrZdR2N1r3iK0pF63QGjSP6iwfFiMD_U9g2ZKjt5JXTYYs0yV7ThfMdCdeZ810JExcQmvYIrRV1a-t7lXtoYfNX6cR-olAvrt1fSKyGSJ_6xBZEMPLCErK4b8f9O6NbmbKgCZWy/s128/HUBUNGI.jpg" title="Hubungi" width="50" height="50" /></a>
<figcaption>Hubungi</figcaption></li>
</ul>
</div>
#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/AVvXsEgIDPn02DW-L5htuFFywHf7zA4tmjltlou67L2PI8L1vQIx9WqFljyRu33bgxr9DL-30jO1B0KRFufeRKFEsNRbb_OAzOrsPyZoDs6FSGH13PgdC-yuj6m0dvAa8GXkEZpcQOB-5SBTC0SO/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/AVvXsEi0tLdjTERpWZLRua97XkET6nBkHAbn8FNso3Ib2-fq821K3hNoQiNqEq25tFrGotjFjHM_rtb36STVuImVnbnXao9H1Sij346RO3NpJ-ppW8S9dldRFecTnEb5TYBkwXefgZuvXAxBO_Lx/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/AVvXsEg0-h6h9JljvVAG51qUJ2S3D_kmXgHJGm6DY5D72Xm62BnK_pyaiGKsrx9sNfPSwYOWktbN1V-dxW0L_fuN3GSfxfYVjqHimDArFs8D_fVE2Ei4Q3OV9bXuZyt9D2qcnwh8UKDzK7mvc5yH/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/AVvXsEgCTm0nIjrZdR2N1r3iK0pF63QGjSP6iwfFiMD_U9g2ZKjt5JXTYYs0yV7ThfMdCdeZ810JExcQmvYIrRV1a-t7lXtoYfNX6cR-olAvrt1fSKyGSJ_6xBZEMPLCErK4b8f9O6NbmbKgCZWy/s128/HUBUNGI.jpg" title="Hubungi" width="50" height="50" /></a>
<figcaption>Hubungi</figcaption></li>
</ul>
</div>
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.
0 comments:
Post a Comment