Postingan

Menampilkan postingan dengan label Tutorial

Cara Membuat Ikon Menu Hamburger dan Pencarian Menggunakan PicsArt

Gambar
Ikon Menu Hamburger Pada sebuah website atau blog sering kita lihat ikon menu bergambar garis tiga. Istilah untuk ikon ini sering disebut "hamburger". Mungkin karena gambarnya seperti hamburger yaitu kue yang berlapis sayur, daging, dan roti.  Ikon hamburger ini terdapat dalam kode Unicode, namanya trigram. Dalam penulisan kode CSS dipanggil dengan : before {content: '\ 2630'; } Bagi Anda yang lebih suka hal yang simple tanpa dipusingkan dengan menghafal kode komputer, maka mendesain gambar sendiri menggunakan aplikasi sepertinya lebih dianjurkan. Keuntungan dari membuat gambar ikon sendiri yaitu gambar lebih jelas dan tentunya lebih menarik. Selain itu kita tidak perlu takut jika gambar tidak mendukung di semua browser versi berapa pun. Kebalikannya jika kita menggunakan pengkodean, gambar yang dihasilkan terlalu kecil dan grafiknya bisa buram di beberapa browser.  Dengan membuat gambar ikon sendiri, tentunya kita akan lebih puas, bisa atu

MENU DROPDOWN BERTINGKAT DENGAN JQUERY TOGGLE

Gambar
Pengkodean Script Jquery yang sangat simple membuat saya menemukan cara membuat navigasi dropdown yang menggunakan submenu. Sebelumnya saya mencoba mengandalkan Script CSS untuk membuat tampilan menu dropdown, alhasil tampilan navigasi jadi berantakan, ada yang tertimpa dengan menu di bawahnya, ada link yang tidak aktif, dan sebagainya. Yang pasti saya tidak menemukan flow chart (aliran logika) di sini. Hanya mengutak atik kode CSS lalu coba coba semua atribut, tetap saja tidak menemukan yang saya mau. Bagi pengguna CSS yang sudah mahir mungkin itu hal yang mudah baginya, tapi saya perhatikan script yang dihasilkan terlalu panjang dan susah dimengerti bagi pemula. Kalau untuk belajar ya dari dasar dulu, dari yang sederhana agar mudah dipahami.  Langkah membuat navigasi bertingkat dengan submenu adalah :  1. Membuat list menu dropdown bertingkat dengan HTML 2. Memberi nama id pada tombol dan memberi id pada properti yang akan ditampilkan dan d

Header Responsif dengan HTML, CSS, dan JQuery Sederhana

Gambar
Header responsif adalah tampilan header halaman web yang menyesuaikan di semua perangkat gadget, seperti PC, Laptop, Tablet, dan HP. Tampilan diatur untuk kenyamanan pengunjung web sesuai dengan perangkat yang digunakan untuk mengakses web tersebut. Pada awalnya tampilan web hanya didesign untuk PC dan Laptop. Berhubung dengan kemajuan teknologi dalam akses internet yang serba mobile, dimana pengguna internet dengan mudahnya akses informasi melalui gadget mobile yang selalu menemani hampir di semua aktifitas. Muncullah inovasi design halaman web yang diperuntukkan untuk Tablet dan HP.  Kali ini saya akan membuat tutorial sederhana untuk design header web yang sederhana juga, tetapi tetap dinamis dan responsif di semua perangkat. Saya menggunakan hosting dari Blogspot (Blogger), yang mana nantinya akan disesuaikan pengaturan layout Blogger dengan design kita sendiri.  Berikut ada beberapa langkah untuk memulai : 1. Membuat ikon menu gambar hamburger dan ikon search (pencarian) me

CARA MENGGANTI UKURAN HEADER BLOGSPOT

Gambar
Kita bisa mempercantik blog di Blogger (Blogspot) dari pengaturan tema. Bisa mengganti warna widget, mengubah jenis tulisan, dll. Akan tetapi ada bagian yang tidak bisa kita utak atik melalui settingan bawaan, misal untuk memperkecil ukuran tinggi header, tidak bisa dilakukan karena sudah tersetting default minimum di situ, tidak bisa lagi digeser ke ukuran lebih kecil. Untuk mengatasinya kita bisa edit dari kode HTML.  Masuk dari dashboard blogger, sebelah kiri klik menu tema, klik titik tiga tombol kanan, pilih edit HTML. Cari bagian Group description="Backgrounds". Kita bisa atur bagian tinggi, body.background.height, minimal default yang tertera sebelumnya adalah di angka 420. Bagi saya itu masih kurang pas dengan yang saya mau. Lalu ubah minimal, default,  dan value jadi 100 px.  Lalu save, liat hasilnya header blog akan jadi lebih kecil.  Untuk mengganti background header dengan gambar kita sendiri juga bisa kita atur dari sini. Dari variable body.background. Bagi

CARA MEMBUAT BUKU SOSMED MENGGUNAKAN GOOGLE SITES

Gambar
Apa itu buku sosmed? Samakah dengan buku telepon, buku tamu, buku resep makanan, dompet kartu, dll. Buku sosmed itu istilah yang saya buat sendiri. Buku sosmed adalah kumpulan alamat sosmed punya kita. Di jaman sekarang yang serba sosial media, siapa yang tak punya Facebook, Instagram, Twitter, Youtube. Ini tahun 2020 saat tulisan ini ditulis, bagaimana beberapa tahun kemudian, apakah sosmed yang tadi masih ada? Contoh sekitar tahun 2006 silam waktu masa jaya Friendster. Sampai tahun berapa bertahannya? Ada juga sosmed namanya Path, sekitar tahun 2012. Masih adakah sampai sekarang? Sudah ditutup kan? Aplikasi chat BBM (Blackberry Messenger), apa masih ada yang menggunakan aplikasi chat BBM? 😀 Saya sendiri sudah uninstall aplikasinya, karena sudah ditinggalkan pengguna yang lain. Untuk apa juga disimpan-simpan di HP, ibarat sampah tak terpakai. Hanya ada kenangan di sana sewaktu zaman BBM-an. Sepertinya yang tak pernah mati itu dunia blogging. Dari sekitar tahun 2006 sampai se

CARA MENGALIHKAN HALAMAN BLOGSPOT

Gambar
Bagi para Blogger yang membangun sebuah blog di Blogger (Blogspot), bisa mengalihkan halaman blog ke halaman lain. Dengan syarat halaman tujuan adalah tetap berada di direktori kita, di url kita sendiri, artinya kita tidak bisa alihkan ke luar url. Biasanya halaman yang sering dialihkan para Blogger adalah halaman index yaitu halaman pertama sebuah website. Banyak alasan para Blogger membuat keputusan seperti itu, bisa jadi dia merasa tidak suka dengan tampilan yang sudah ada di tema gratisan. Bisa jadi juga halaman blog dia ada kerusakan sehingga tidak bisa tampil, dll. Berikut langkah-langkah mengalihkan halaman pada blogspot.com : 1. Buka dashboard Blogger, pergi ke setelan 2. Pergi ke pengalihan khusus Tambahkan, lalu isikan halaman yang mau dialihkan. Di situ tertera alamat dari "/" ke "/". Itu artinya apa? Artinya halaman yang bisa dialihkan itu adalah halaman yang berada di satu folder blog, satu url. Misal alamat blog https://alamatblog.blogspot.com,

CARA MEMBUAT STIKER dari PicsArt

Gambar
Langkah-langkah membuat stiker atau gambar logo menggunakan aplikasi PicsArt : 1. Buka Aplikasi PicsArt 2. Klik tombol + 3. Cari gambar foto yang mau dijadikan stiker 4. Pilih Crop (alat), lalu pilih pemotongan gambar 5. Cari model sesuai pilihan 6. Atur ketebalan pinggir stiker dan warnanya 7. Simpan 8. Posting ke file web, hasilnya stiker atau logo sudah terbentuk, tidak lagi berbentuk foto dengan model kotak.  Selamat memcoba. 🤗

CARA MEMBUAT MENU DI BLOGSPOT BERDASARKAN LABEL ARTIKEL

Gambar
Tema tampilan di Blogspot tidak ada menu. Menu berguna untuk mengelompokkan jenis postingan. Misal kita membuat blog dengan beberapa topik yang berbeda, kita bisa kelompokkan postingan artikel dengan memberi label.  Berikut cara memberi label sebuah postingan : Pertama artikel kita diberi label dulu. Di menu sebelah kanan pengeditan artikel, input label artikel lalu centang, jangan lupa disimpan.  Setelah itu kita akan membuat menu baru dari "Tata Letak", kita akan edit gadget halaman.     Jika kamu membuka dari hp jangan lupa centang dulu titik tiga di samping url, pilih situs desktop untuk melihat semua tampilan halaman gadget.  Lalu edit gadget halaman. Jika gadget halaman belum diaktifkan, kita bisa tambahkan gadget dari link "tambahkan gadget". Input menu baru dengan cara "tambahkan link eksternal". lalu isi url dengan /search/label/namalabel.  Contoh di sini saya input nama halaman dengan "Tutorial", dan nama label juga "Tutori