Cara Hilangkan Widget Tertentu Untuk Blog Responsif

Cara hilangkan atau sorok widget tertentu untuk template blog responsif. Adakala apabila menggunakan template blogspot yang responsif, masalah yang sering dihadapi ialah blog akan nampak terlalu padat, crowded dan adakala memanjang berleret - terutama sekali bahagian sidebar blogspot. Jadi, entri kali ini saya nak tunjukkan cara untuk hilangkan sementara atau sorok widget-widget tersebut apabila blog anda berada dalam keadaan mobile atau dikunjungi menerusi peranti mudah alih seperti tablet dan telefon pintar.

Caranya agak rumit sedikit kerana anda perlu lakukan dua langkah penting iaitu kenalpasti widget terbabit yang mahu anda sorok, dan kemudiannya meletakkan kod media-screen untuk fungsi mobile. Jadi, saya akan cuba berikan langkah atau step yang mudah nak anda ikut.

Cara Untuk Hilangkan atau Sorok Widget Tertentu Untuk Blog Responsif

Ok. Pertama sekali, untuk kenalpasti widget apakah yang anda mahu sorok - anda perlu menggunakan Firebug untuk skodeng blog sendiri. Saya pernah ceritakan mengenai fungsi Firebug ini di dalam entri - Teknik Curi Design Blogspot.

Firebug sangat berguna kalau anda seorang blogger yang mahu buat customization sendiri dengan template blogspot yang ada. Saya sendiri telah menggunakan dengan penuh tekun aplikasi atau add-on Firefox ini selama 2 tahun untuk buat ubahsuaian daripada template-template blogspot percuma yang saya muat-turun untuk kegunaan blog-blog saya. (Anda boleh lihat sendiri blog ini yang telah bertukar wajah dalam masa sehari dengan hanya menggunakan template percuma yang sama).

Cara-Caranya

Menerusi Firebug tadi, anda lalukan cursor anda ke bahagian widget terutama di sidebar untuk ketahui class (nama dan jenis) widget terbabit. Seperti contoh di atas yang saya berikan, saya kenalpasti widget yang mahu saya sorok ialah RandomPosts.

Kemudian salin kod CSS/HTML di bawah ini untuk diletakkan di dalam template HTML bahagian CSS blogspot anda. Save dan lihat hasilnya.

@media screen and (max-width: 980px) { .RandomPosts { display: none; } }

Anda dapat lihat bahawa ada pernyataan media screen dengan max-width: 980px; bermaksud mana-mana peranti yang papar blog anda dengan keluasan atau kelebaran yang kurang daripada kelebaran maksima 980px, maka widget tersebut akan disorokkan.

Cuba lihat contoh di bawah ini setelah saya letakkan kod di atas di dalam HTML blogspot saya.

Wahh .. dah hilang. Jadi, apabila pengunjung gunakan tablet atau telefon pintar dengan kelebaran kurang dari 980px tadi, ia akan hanya nampak widget Post Terkini sahaja dipaparkan, dan tidak lagi widget yang telah saya sorokkan tadi.

Kebaikan Teknik dan Cara Menyorok Widget Blogspot Ini

Kebaikannya - ia akan buat loading blogspot anda dalam peranti mudah alih lebih laju, dan akan membuatkan pengunjung blog tidak rasa semak melihat blog anda yang nampak padat dan meleret penuh skrin.

Oh ya, lupa nak bagitahu. Cara hilangkan widget tertentu ini hanya sah digunakan untuk blog-blog yang menggunakan template responsif sahaja dan bukan template standard yang disediakan oleh blogspot.com. Anda boleh cuba download secara percuma beberapa template responsif blogspot yang pernah saya kongsikan di dalam blog ini.

Antaranya:

• Dua Template Blogspot SEO Percuma
• Dua Template SEO Blogspot Responsif Percuma

Nak template yang lebih best dan keren, boleh Google sendiri nanti .. hoho .. :P

Selamat mencuba.