Category Archives: Web

Agar Sharing di Facebook Selalu Menyertakan Gambar

Blog Web

Sharing Facebook

Ada yang suka bermasalah dengan sharing postingan blog di Facebook gak kayak saya? Saya kalau sharing postingan blog di Facebook gitu suka sebel deh, soalnya suka gak keluar gambarnya, huhuhu. Gak terlalu peduli juga sih tadinya, tapi suka sayang aja kan yaa, udah milih gambar bagus-bagus buat postingan blog tercinta kita itu, eh pas disharing gambarnya malah ilang. Sakitnya tuh di siniiii *nunjuk mata* xp

Anyway, mau tau caranya biar postingan yang kita share itu selalu muncul gambarnya? Ya saya mah gak mau ngomongin alasan kenapa itu postingan gak keluar gambarnya sih. Udah jelas salah satu alasannya karena emang gak ada gambar di postingannya ya kan, bahaha. Tapi, kalo udah capek2 nyiapin gambar buat postingan itu, coba deh cara ini. Ini saya dapet juga dari temen yang mengalami hal yang sama sih. Makanya saya jadi aware, ya karena dia ini ngasih tau caranya gitu di share postingan Facebook saya. Makasih yak Dep! 😀

Okeh, langsung aja deh: Continue reading

Published by:

WhatsApp di PC Tanpa Emulator

Hobi Web

Kalau sebelumnya saya pernah utak-atik komputer dan mencoba menjalankan WhatsApp melalui PC atau laptop dengan menggunakan emulator, kali ini emulator tersebut sudah tidak diperlukan lagi, hihi. Pasalnya, sekarang whatsapp sudah bisa dijalankan melalui web browser lho. Caranya:

1. Ketik alamat https://web.whatsapp.com/. Nanti akan muncul QR code untuk discan dari tablet/gadget kita. Tampilannya seperti ini:

WhatsApp on Web

WhatsApp on Web

2. Lalu melalui android (versi terbaru yaa, kalau bukan versi terbaru, update dulu gih! xp), akses menu -> WhatsApp Web. Akan muncul scanner untuk scan QR code yang muncul di browser tadi

Scan QR code

Scan QR code

3. Setelah scanning beberapa detik… Voila! WhatsApp kita sudah berhasil terhubung dengan PC / laptop. Happy chatting yaa, haha.

WhatsApp Connected!

WhatsApp Connected!

Memudahkan banget buat yang bisnis online nih. Biar ngetiknya gak capek ya bok kalo ngelayanin pelanggan, hihihi. Tapi, kabar sedikit tidak enaknya, browser yang digunakan baru hanya bisa melalui Google Chrome. Tapi gapapa lah yaa, yang penting bisa pake dan terhubung deh WhatsApp di hp dan PC. WhatsApp kereen!

Selamat mencoba 🙂

Published by:

Mengatur Keberadaan Widget WordPress

Ada yang punya blog wordpress? Pasti banyak lah ya, hehe.

Kalo blognya masih dalam platform wordpress, sekarang enak banget deh, kita bisa mengatur dimana saja widget yang kita pasang itu akan muncul, atau menghilangkannya. Misalnya, di halaman home, kita mau ada widget kalender tapi di halaman lainnya atau halaman-halaman tertentu gak mau ada widget itu. Nah, buat yang belum tau caranya, saya mau ngeshare nih, mudah-mudahan bermanfaat yaa 😉

Namanya juga kita mau mengatur yang namanya widget ya, jadi ya akseslah menu widgets dari dashboard wordpress kita. Menu widgets itu adanya di bagian dalam Appearance karena merupakan submenu. Jadi, ke bagian Appearance -> widgets ya.

Menu Widgets

Menu Widgets

Setelah itu, pastilah kita berada di halaman pengaturan widget dan tampil semua widget yang kita gunakan/ pasang. Piih widget  yang mau diatur keberadaannya, saya mencontohkan widget search box.

Pengaturan Widget

Pengaturan Widget

Di bawah setiap widget ada tombol yang namanya visibility. Nah, inilah yang paling penting. Klik tombol itu, nanti akan terbuka beberapa pilihan pengaturan.

Widget Search

Widget Search

Di contoh, saya mengatur agar widget search box ini disembunyikan pada halaman search results, artinya kotak pencarian akan ada di halaman home namun tidak akan ada di halaman hasil pencarian. Kalau untuk membatalkan pengaturannya, cukup tekan “Delete” saja. Kalau mau menambahkan, misalnya di halaman mana lagi akan disembunyikan, tekan “Add”. Ini contoh hasilnya:

Yak, segitu aja, singkat ya? hehe. Semoga postingan saya ini bermanfaat yaa.

Oiya, pengaturan ini benar-benar untuk semua widgets loh, jadi gak terbatas kotak pencarian. Text widgets juga bisa, apalagi recent posts atau semacamnya. Selamat mencoba 😉

Published by:

Hijaiya Versi Mobile

Web

Yuhu.. Iseng pagi-pagi ngedit tampilan mobile dari web online store hijaiya. Yap, itu online store saya dan sahabat saya 😀

Lumayan, gak terlalu lama ternyata dan gak terlalu susah *somboong* *keplak pala sendiri* bikinnya, karena sebelumnya udah pernah ngerjain juga, jadinya sudah mulai terlatih.

Langsung aja ah norak-in tampilan di berbagai gadget:

Ada yang mau juga webnya bisa muncul cantik di mobile browser? Boleh loh buat menghubungi saya, biar tampilan webnya bisa responsif 😉

Published by:

User Agent Spoofer

Web

Jadi ceritanya saya baru saja selesai membuat mobile version dari web  yang saya buat. Nah, waktu mau mulai mengedit versi mobile-nya, saya bingung gimana cara tau bagian apa yang mesti dibenerin. Biasanya saya pakai inspect element di google chrome atau firefox untuk ngeliat bagian mana yang tampilannya masih kurang bagus. Nah, kalau dari hp saya belum tau gimana caranya inspect element itu.

Tapi untungnya google chrome punya add-ons yang memudahkan buat para web developer untuk melihat versi mobile ataupun tampilan di browser lain dari web yang dikerjakannya, namanya User Agent Spoofer. Bermanfaat banget nih. Tinggal pasang add-ons-nya terus bisa langsung pilih kita mau menampilkan tampilan dari sudut pandang apa. Mulai dari defaultnya, yaitu google chrome sendiri, mozilla firefox, opera, safari, sampai tampilan di windows phone.

Begini tampilannya, letaknya di kanan atas pada google chrome.

User Agent Spoofer

User Agent Spoofer

Gak cuman google chrome aja kok yang punya. Buat yang defaultnya make firefox, firefox juga punya add-ons UA Switcher yang fungsinya sama dengan UA Spoofer-nya google chrome.

Nah, buat yang mengerjakan web dengan responsive design (tampilannya otomatis menyesuaikan device yang dipakai), bisa banget nih ngutak-ngatik codingan css di tampilan yang berbeda-beda. Untuk yang belum responsive design, cara untuk membuat responsive design itu tidak begitu sulit kok.

  1. Cukup bedakan stylingnya atau file .css-nya. Misalnya kalau di web file .css itu judulnya style.css, untuk yang tampilan di mobile device judulnya mobile.css. Sebenerny file .css-nya juga bisa digabung, tapi akan lebih mudah dan tidak membingungkan sebaiknya dipisah.
  2. Di mobile.css, tulis[code language=”css”]@media only screen and (max-width: 480px){styling di sini}[/code]untuk mengkhususkan style pada mobile.
  3. Selanjutnya import mobile.css di css utama. Misalnya, file .css utama yang dipakai adalah style.css, maka tulis[code language=”css”]@import url(‘css/mobile.css’);[/code]

Cukup simple kan? 😉

Contoh perbandingan tampilan di web, iPad, dan android:

Published by:

Form Checkout Didn’t Displayed

Web

So, I have a problem with my website yesterday. The problem is, the form checkout at checkout page didn’t displayed. Even though the products and the shipping was showed up, the checkout form which contain the information of customer was not visible or it was being hidden.

I’ve tried to look up the style.css to see if I made something’s visibility is hidden then would make it visible. But it didn’t worked. I’ve tried to changed the themes into the older version of it ~off course I backed up the themes first~. But it didn’t worked either.

So I tried to googled those error and I found something funny. The simple solution of the error. How is it?

Go to the settings -> store from your dashboard, then pick the shipping tab. Choose no in “Use Shipping”. Yap, I thought it was impossible too, but there was worth trying. So, I’ve got a little surprise that it was worked for my website too.

Then I was deactivating my shipping plugin to reactivated it again to refresh the plugin. After that, I changed the status in “Use Shipping” into yes. And now, there is no hidden content at checkout page anymore 😀

Checkout Page

Checkout Page

Published by:
%d bloggers like this: