Baca Juga
Selamat pagi jelang siang kawan .. gimana aktifitas mu pagi hari ini ??? .. melelahkan ?? .. atau biasa saja ?? Sejenak melepas lelah mampir sini bray .. ada yang mau saya sampein ni .. dan tolong baca baik - baik dulu ya .. sebelum angkat bicara .. kalau sudah faham .. sudah tau apa isi yang di sampaikan .. baru kasih masukan atau kritikan OKE hehehe .. ok dweh kalau sudah ngerti .. kita lanjut ..
Setelah kemarin malam buat Cara Membuat Game Sederhana Dengan Game Maker .. sekarang kita pindah ke soal Blogging .. ya walau pun disini saya juga masih pemula .. belum faham bener .. soal Blogging apa lagi soal CSS dan sejenis nya .. tapi gak ada salah nya juga kan .. sedikit berbagi apa yang di ketahui ???? .. maka dari itu .. pada kesempatan kali ini .. akan saya kasih tau soal Cara Buat Dropdown Text Keren di MyWapBlog Sebagai Pengganti Spoiler .. kalau di rasa sudah tau .. apa sok tau .. gak apa - apa abaikan saja .. mungkin masih bisa sedikit berguna buat Blogger MWB NewBie ( Pemula ) / ( Pendatang baru ) .. seperti saya ini ..
OKE NEXT .. seperti yang sudah kita ketahui bersama .. bahwa di MyWapBlog / ( MWB ) .. tidak boleh ada elemen / kode - kode .. yang di sembunyiin .. dan sebagian kode - kode juga tidak dapat di pergunakan / di pasang di sini ( MWB ) .. cuma sebagian kode HTML / CSS saja .. Kode JavaScript / jQuery / PHP .. ( yang saya tahu .. gak bisa di gunain ) ?? .. ya mungkin saya nya aja yang gak bisa / tahu .. atau gimana lah .. tapi yang saya tahu ya gitu .. dan sebuah CSS juga yang sekira nya untuk menyembunyikan .. gak bisa ya ?? Kecuali di pasang nya di dalam file CSS import .. tapi maaf - maaf kata kalau saya salah .. untuk lebih jelas nya .. bisa langsung saja .. di tanyakan ke ahli nya .. yang sudah faham soal MWB hehehe ..
Nah .. sekarang bagaimana cara buat Dropdown nya ??? .. sementara buat menu dropdown itu .. tidak cukup dengan CSS & HTML aja .. ada script JavaScript nya juga .. kata siapa .. nggk juga kok .. cara buat Menu Dropdown Text cuma menggunakan CSS & HTML doank .. Lagian juga bukan di buat kan di bagian header .. seprti Navbar .. yang seprti ada di platfrom blog lain .. ini cuma sebagai pengganti Spoiler aja ..
Emang Spoiler itu apaan sihh ?? & guna nya untuk apa ??? .. ahh banyak tanya .. kepo bangtz sih lu :mrgreen: kidding brow .. intinya spoiler itu .. sesuatu yang berbentuk tombol button .. di mana jika tombol tersebut di klik .. akan terbuka dan menampilkan sebuah kata / tulisan / kode di dalam nya .. jadi udah jelas kan Spoiler itu .. fungsi nya untuk meringkas text / kode panjang .. yang di taroh di dalam nya .. kurang lebih nya mungkin seperti itulah yang saya tahu .. jika ingin lebih lanjut soal Spoiler tanya aja ke si mbah :D ..
Untuk permasalahan nya kan .. di MWB gk bisa nampilin Spoiler tuh .. bukan gak bisa sih .. bisa sih bisa .. cuma tombol nya gak bisa di klik / gak bisa di buka .. cuma dapat nampilin tombol button nya aja .. karena kan sebelum nya juga udah bilang elemen / kode yang di sembunyiin .. gak bakalan tampil .. nah untuk mengatasi nya .. saya punya ide .. yaitu dengan cara membuat Menu Dropdown Text .. menu ini .. fungsi nya bisa kita gunain sama percis dengan Spoiler .. yaitu dengan mengklik nama / mengklik tombol .. maka akan terbuka menampilkan isi yang ada di dalam nya ..
Gimana ?? Baru baca aja .. sudah tertarik kan ?? .. ingin mencoba nya juga ?? .. karena menu ini .. bisa kita jadikan di saat memposting artikel yang menyakut soal edit menhedit sctipt / css / atau apa lah yang sekira nya bakalan memanjang ke bawah .. biar lebih ringkas .. si kode - kode panjang tersebut bisa di masukin ke dalam Menu Dropdown Text ini .. seperti layak nya di dalam Spoiler .. memang sih tanpa adanya spoiler Juga .. masih bisa kita gunain dengan Text Area .. di mana sebuah kode bisa kita taro di dalam Text Area .. tapi menurut saya itu terlalu membosan kan .. lagi - lagi yang di andalkan Text Area .. ya walau pun memang gak masalah sih .. tapi kan gak ada suasana baru nya gitu .. lagi - lagi di tempat itu hehehe ..
Nah .. sekarang gimana ?? Udah baca sejauh ini .. apa masih mau melanjutkan membaca nya ?? .. tau mungkin males nerusin ?? Karena terlalu bertele tele ?? .. ok dweh .. karena disini bukan lagi lomba menulis hehehe .. jadi langsung saja ke inyinya .. anggap saja yang di atas itu .. cuma sebagian basa - basi aja .. karena saya sih gitu orang nya .. gak bisa langsung ke intinya .. pengen di jelasin dulu secara detail .. walau pun harus banyak ngetik .. dan walau pun penjelasan nya amburadul / bertele tele / gak jelas / gak karuan / gak bisa di fahami atau pun di mengerti .. tapi besar kecil nya mungkin bisa di fahami lah .. dan anggap aja sperti anak kecil .. yang baru belajar nulis :D ..
Nah .. sekarang kita langsung saja .. ke inti pembahasan kali ini .. yaitu soal Cara Buat Dropdown Text Keren di MyWapBlog Sebagai Pengganti Spoiler .. silahkan Copy Code CSS di bawah ini .. berikut nya Paste ke dalam File CSS import kalian yang ada di Xtgem .. karena setau saya .. pada saat saya menyunting ulang CSS langsung dari MWB nya .. terutama di CSS Bagian Desktop .. ada notifikasi nya .. yang intinya Tidak boleh memasukan Kode yang di sembunyikan .. kurang lebih gitu lah .. pada saat CSS Menu Dropdown ini .. saya masukan langsung di MWB nya .. jadi saya masukan kedalam CSS Import nya .. dan hasil nya Work gan :D .. Horeeee Berhasil .. Berhasil .. berhasil .. hahaha itu mah kata dora ya .. Jangan di ikuti gaya dora nya ya :D ..
Ok Next .. langsung saja .. Copas semua kode CSS di bawah ini .. cuma dikit kok kode nya juga .. dan cara pasang nya .. atau cara penempatan kode css nya .. sudah ngerti kan ?? .. dengan membukan file css import nya aja .. lalu gimana .. kalau yang gak memakai CSS Import ??? .. nah .. kalau agan yang memakai CSS bawaan MWB atau CSS buatan Creator CSS yang ada di MWB .. coba aja agan masukan kode CSS Dropdown nya .. di bawah css yang di pake .. lalu klik save .. kalau ada notifikasi seprti yang saya katakan di atas .. mungkin gak bisa .. jadi harus dengan terpaksa . Jika ingin menggunakan nya .. buat dulu akun Xtgem .. atau yang sudah punya .. tinggal buat file baru aja .. dengan akhiran kata CSS .. misal nya gini ..
- Daftar / Masuk dulu ke akun Xtgem.com
- Klik File Browser
- Klik Create file / Buat File
- tulis misal dropdown.css
- klik / buka text editor & hapus semua yang ada di dalam file tadi yang kamu buat .. dropdown.css nya
- lalu paste semua kode css menu dropdown nya
- Klik save
- Trakhir ambil link nya .. dan tambahkan kode @import url(...);
- misal nama link / url nya http://situsku.xtgem.com/dropdown.css .. tinggal tambahin kode di atas .. dan taro link / url nya ke dalam tanda buka kurung ..
- Seperti ini jadinya @import url(http://situsku.xtgem.com/dropdown.css);
- kata dropdown.css nya .. itu nama file yang sebelum nya sudah di buat ..
Gimana ?? Mudah kan .. buat CSS Import nya ??? .. tinggal selanjutnya .. buka MyWapBlog > klik Tema > klik Sunting CSS > Paste kode @import url(http://situsku.xtgem.com/dropdown.css); > klik Save .. berikut nya tinggal tess .. dengan buat postingan baru .. atau bisa juga di tess di menu navigasi .. sperti pada blog saya .. pada bagian Contact Admin & Partner Blog ..
Udah cuma segitu aja .. sangat mudah banget kan ?? .. Cara Buat Dropdown Text Keren di MyWapBlog Sebagai Pengganti Spoiler .. tidak harus ribet dengan banyak kode ini itu lagi .. cukup dengan CSS & HTML saja sudah jadi .. dan silahkan Copas Kode CSS nya .. di bawah ini ..
Copas Code CSS ini
.dropdown {position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px
rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
Keterangan : kode CSS di atas jangan di rubah - rubah lagi .. kecuali lebar / padding / box-shadow / background nya saja .. selebih nya biarkan saja ..
Sangat sedikit bukan ?? Dan tidak terlalu ribet ? .. nah selanjutnya setelah di copas semua .. tinggal ikuti poin - poin yang sudah saya katakan di atas .. lalu sekarang tinggal cara buat nya .. yaitu dengan kode HTML .. dan kode nya pun sama .. cuma dikit alias tidak banyak .. dan sangat mudah tuk di hafal .. apa lagi kalau sudah keseringan menggunakan nya .. nah di bawah ini .. silahkan copas kode HTML nya
Copas Code HTML ini
<div class="dropdown-content"> <div class="dropdown"><span>Judul Button</span>
<div class="dropdown-content">
<p>Isi Postingan</p>
</div>
</div>
Keterangan : Ganti Tulisan / Text Berwarna Blue dan Berwarna Red sesuai text / tulisan yang mau agan buat .. Judul Button ( untuk text tombol button ) nya .. dan Isi Postingan ( untuk menaro text di dalam menu dropdown tersebut ) .. </div>
Gimana ?? Sangat mudah dan simple bangettz bukan ?? .. gak ribet dan mudah di hafal ?? .. ok next .. perjumpaan kali ini .. saya rasa cukup sampe disini .. jika berminat silahkan copas aja semua kode nya .. jika ada keluhan silahkan tanya saya lewat PM aja ..
Baca Juga Label :
Itulah Postingan kali ini .. mengenai » Cara Buat Dropdown Text Keren di MyWapBlog Sebagai Pengganti Spoiler « .. yang bisa saya bagikan .. Pada kesempatan yang ke 89x 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 ..