Baca Juga
selamat Malam buat semuanya .. Ketemu lagi dengan Admin Ocha .. pada kesempatan kali ini .. saya akan sedikit menjelaskan Cara Mudah Buat Menu Keren Dengan Target Gambar .. dan sebelum melanjutkan .. baca juga postingan saya yang sebelum nya .. yaitu Cara Mudah Buat Panel Split Teks Pada Gambar dan Cara Buat Efek Hover Pada Text Dengan CSS dan juga Cara Termudah Dan Cepat Buat Aplikasi Android .. dan sebelum melanjutkan .. ada baik nya .. baca juga .. Download Aplikasi Chat Terbaru Buat OS Android yang mungkin ingin mencoba nya .. dan jugaDownload Aplikasi AutoLike Fb 2000+ Per Submit 100% Work dan postingan yang Lalu Download Aplikasi Hack Facebook 2016 100% Work
Baca Label : Tutorial Blogging
Ok Next .. langsung saja ke intinya .. yaitu Cara Mudah Buat Menu Keren Dengan Target Gambar .. setelah kemarin buat postingan Cara Mudah Buat Panel Split Teks Pada Gambar Dan Post Lalu Cara Buat Efek Hover Pada Text Dengan CSS .. rasa nya belum komplit kalau tidak di tambahkan dengan cara buat Menu Dengan Target gambar .. cara ini supaya tampilan lebih ok saja gan .. bisa di katakan biar sedikit lebih cantik .. dan beda dari yang lain .. :wink: .. dan cara ini pun .. tidak hanya sekedar buat blog seperti Blogspot doang .. dan disini saya buatkan Demo / Review nya .. di akun sextgem.com .. dan hasil nya sperti pada gambar di bawah ini .. so .. dengan begitu .. code ini .. bisa juga kita pakai di wap builder sextgem.com atau pun wap builder xtgem.com .. wiiihhh jelas keren banget bukan ?? ...wap kita bisa terlihat menarik .. tampil beda dari yang lain .. ok tanpa banyak bicara lagi .. silahkan di lihat dulu demo nya .. di bawah ini .. atau bisa juga langsung klik link ini www.gadis69.ml/contoh .. saya tes kode css ini .. pada wap bokep .. yang kmaren juga sebagai contoh review .. Cara Mudah Buat Panel Split Teks Pada Gambar .. jadi silahkan kunjungi langsung .. jika berkenan .. sekalian lihat - lihat ada apa saja di sana :wink: .. ok next .. di bawah ini gambar Demo nya .. ketika kita klik / memilih menu .. gambar ikut berubah .. sesuai dengan nama menu yang kita klik .. mungkin bisa di katakan seperti kita saat memilih menu makanan di meja makan .. kita buka ikan .. yang kita lihat ya ikan hehehe bingung juga ngomong nya .. tapi di sini bukan mau ngebahas soal menu makan malam hari ini .. melainkan membahas Cara Mudah Buat Menu Keren Dengan Target Gambar .. Ok Next Silahkan lihat saja Gambar Di bawah ini ..
Klik Gambar Untuk Memperbesar
Dari contoh pembuatan menu ini .. saya buatkan 5 menu .. jika ingin menambahkan lebih dari 5 .. tinggal atur - atur aja lagi sendiri .. berikut background warna .. lebar border pada menu dsb .. jangan lupa juga .. tambahkan gambar di tiap masing - menu nya .. terserah dengan gambar apa saja .. yang sesuai dengan nama menu .. seperti contoh nya .. pada menu awal / paling atas .. di situ dengan nama menu My Blog dengan gambar Icon Logo MyWapBlog .. kalau blog dari Blogspot .. gambar icon nya pun biar sesuai .. dengan gambar icon Blogger .. dan usahakan gambar png .. tapi mau jpg .. jpeg .. gif dsb juga tidak masalah .. gimana baik nya aja ..
Baca Label : Tutorial Blogging
Next .. Cara ini Tidak jauh berbeda .. saat Agan memberikan title teks pada sebuah link-url .. yang mana sebelum link pada menu tersebut di klik akan menampilkan sejumlah teks sebelum akhirnya Agan dialihkan pada halaman baru .. Namun untuk Membuat Menu Keren Dengan Target Gambar seperti ini .. saya membungkus setiap kode pada link-menu .. dengan Elemen first-child img {z-index:1; opacity:1;} .. untuk dapat memanggil gambar sebagai title .. jika salah satu menu di hover .. Singkatnya : setiap satu menu sudah saya beri satu buah gambar .. sebagai target sebelum Agan menuju tautan tersebut .. Kode lengkapnya seperti di bawah ini ..
Next .. Semua kode - kode diatas sudah saya ringkas termasuk penggunaan perintah javascript .. agar nantinya widget ini .. tidak membuat loading halaman blog Agan menjadi berat .. Tahap selanjutnya tinggal menambahkan link menu .. sebanyak yang Agan inginkan pada HTML berikut ini ..
Keterangan :
- # : Ganti Dengan Link / URL tujuan ..
- Menu 1 - Menu 5 : Ganti Dengan Nama Menu ..
- http://Url Gambar.png : Ganti Dengan Link / URL gambar agan ..
- alt=".." : Ganti dengan Nama gambar .. contoh http://catatan-sioon.yu.tl/file/icon-MWB.png .. maka jadi seprti ini alt="icon-MWB" ..
Terlihat keren dan menarik bukan ?? .. hehe..!! widget ini saya tampilkan dengan tampilan default .. seperti warna background .. hover .. link color yang saya desain sesuai dengan warna wap demo saya .. jika sekiranya Agan ingin mengubah tampilan warnanya .. Agan bisa pilah - pilih warna yang sesuai dengan blog / web / wap Agan pada link » Kumpulan Kode Warna HTML .. dan untuk menuju demo .. pada postingan ini .. klik link » www.gadis69.ml/contoh .. dan di bawah ini demo berupa video nya ..
baca label : Tutorial Blogging
Itu lah Postingan kali ini .. mengenai » Cara Mudah Buat Menu Keren Dengan Target Gambar « .. yang bisa saya bagikan .. Pada kesempatan yang ke 54x nya ini .. Kurang lebih nya mohon di maklum aja .. Jika ada salah - salah kata atau pun penulisan .. Semoga bermanfaat dan sampe ketemu lagi di lain waktu dan lain kesempatan .. Akhir kata saya ucapkan ..