Drop Down Menu Tak Berfungsi Pada Mobile View | Yaya telah menukar template blog kira-kira sebulan lepas. Yaya memilih template yang lebih ringkas tetapi pada masa yang sama mempunyai ciri-ciri mesra SEO dan responsive.

Sendiri jatuh cinta dengan template yang Yaya guna sekarang. Haha. Lepas Yaya siap pasang terus je feeling macam 'wowww'. Berkonsepkan minimalis, tetapi masih nampak anggun. Sesuai sangat dengan niche blog Yaya yang lebih kepada blog peribadi dan bercampur juga dengan tema yang lain.

Baru semalam Yaya perasan ada sesuatu yang tak kena ketika buka blog sendiri di handphone. Imej akan jadi strecth ke bawah. Gambar-gambar jadi panjang kurus. Hihi. Maksudnya template yang Yaya guna ni kurang mobile friendly. Alaaa...biasalah kalau guna template percuma ni. Akan ada encrypted scripts, features limit. Nak elak semua tu kena lah guna template berbayar.

Drop Down Menu Not Working On Mobile View
Drop Down Menu Tak Berfungsi Pada Mobile View

Dalam masa yang sama juga Yaya perasan butang drop down menu tak berfungsi. Drop down menu ni tab menu yang ada bawah header tu. Ada tab home, about me, contact etc tu. Kalau buka blog guna desktop ok pula. Sah-sah lah kan, mobile view yang bermasalah. Yaya sendiri bukan pandai sangat nak baiki error pada blog ni. Semuanya kena search google. Tengok tutorial orang lain. 

Jadi kali ni, Yaya akan berkongsi tutorial drop down menu tak berfungsi ni. Harap-harap dapat membantu mereka yang mengalami masalah yang sama.

Drop Down Menu Tak Berfungsi Pada Mobile View

dropdown menu tak berfungsi pada mobile view
Drop Down Menu Tak Berfungsi Pada Mobile View
Tengok pada gambar di atas, sebelum menambah kod html yang simple, drop down menu tak berfungsi. Bila klik jadi  hitam macam tu je..

Sebelum kita ubah apa-apa kod html, jangan lupa backup dulu ye.

1. dashborad > theme > live on blog > edit html
2. klik jump to widget, kemudian pilih HTML1 
Drop Down Menu Tak Berfungsi Pada Mobile View
3. Nanti akan terus jump ke HTML1.
    Akan nampak kod ini : id='HTML1'    locked='false'   title='author'   type='HTML'

Drop Down Menu Tak Berfungsi Pada Mobile View

4. tambah mobile='yes' dan tukar nama title
    Akan jadi seperti ini : id='HTML1'    locked='false'   mobile='yes' title='author' type='HTML'


Drop Down Menu Tak Berfungsi Pada Mobile View



5. Ctrl+F - search 'mobile-menu-toggle'
    tambah kod mobile='yes' (seperti dalam gambar di bawah)

Drop Down Menu Tak Berfungsi Pada Mobile View
6. Klik 'save'
7. dashboard > theme> mobile> customize mobile theme
    klik yes, pilih custom theme, save
Drop Down Menu Tak Berfungsi Pada Mobile View

Alhamdulillah, dengan mengikut langkah-langkah di atas, masalah drop down menu tak berfungsi akhirnya dapat di atasi. Gambar dalam post pun dah tak strecth. Barulah mobile friendly.

Sekarang hati tuan tanah dah happy, dah lega. Hihi. Semoga penampilan blog ini sedap mata memandang dan memudahkan pembacaan. 

Terima kasih sudi baca.