Menu Gambar Dengan Posisi Sembarangan

Menu gambar dengan posisi sembarangan. Maksudnya yaitu menciptakan sajian memakai gambar, dengan posisi gambar yang tidak beraturan. Gambar sanggup ditempatkan diatas, bawah, kanan, kiri sesuai dengan yang kita inginkan. Contohnya menyerupai 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 arahan 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="Menu gambar dengan posisi sembarangan"><img alt=" Maksudnya yaitu menciptakan sajian memakai gambar Menu gambar dengan posisi sembarangan" height="74" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibNlriLMxYKGxEpwk7GTf3RInmJmEmhbarOJgX1IjhmfTalax0NDAdt4UKq_OS1hCcJ-_JS-VBFDMwW28z7BqmKZi_GlUvlJO3qtdH_4enuE4bdKP6ZrtZcWBLM2y7EWcYUb6ECZErJ6Pt/s133/Daftar%2520Isi.PNG" title="Menu gambar dengan posisi sembarangan" 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 sanggup 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 arahan 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 arahan tersebut yaitu 40px(atas) -390(kanan) 0px(bawah) 0px(kiri).
• float:right;  dan float left fungsinya untuk memudahkan kita menempatkan gambar ke bab kiri atau kanan
• #empat4 img{ dan #empat4 img:hover{ arahan komplemen biar gambar berputar dikala disentuh mouse.

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

Dengan memasukan arahan Css ke bab Tambahkan Css, kita sanggup melihat perubahan posisi gambar secara langsung, dikala kita merubah nilai dari arahan Css. Contoh gambar penempatan arahan Css didalam ruang Tambahkan Css.

Silakan baca juga artikel ihwal cara menciptakan sajian blog dengan gambar, yang sanggup dijadikan pilihan dalam pembuatan sajian gambar diblog. Semoga sanggup bermanfaat untuk anda.