Cara Hilangkan Widget Tertentu Untuk Blog Responsif

Tips blogging dan panduan blogger - 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.
Cara Hilangkan Widget Tertentu Untuk Blog Responsif

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.

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.

Cara Hilangkan Widget Tertentu Untuk Blog Responsif

Cara Hilangkan Widget Tertentu Untuk Blog Responsif
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:

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

Selamat mencuba.





COMMENTS

BLOGGER
Sistem Saham
Name

#Bajet2014,4,#VMY2014,5,#WORDLESS WEDNESDAY,73,Abah Blogger,38,Advertorial,126,Advertorial 2013,15,advertorial 2014,39,advertorial 2015,7,ARTIKEL KEHIDUPAN,10,ARTIKEL KEKELUARGAAN,7,ARTIKEL KESIHATAN,6,Bajet 2013,9,Bajet 2016,8,BICARA MASYARAKAT,150,Bicara Minda,72,BILA BLOGGER MASUK MAJALAH,26,BLOG LENSA HASRUL,1,BLOG PILIHAN 2012,25,BLOG PILIHAN 2013,15,Blog Selebriti,76,Blog Stats,10,Blogger Guide,2,BR1M,10,Buat Duit Dengan Adsense,56,Buat Duit Online,367,Cerpen Kehidupan,1,ChurpChurp,4,CINTA DAN JIWANG,45,Contest 2014,37,Contest 2015,19,Contest 2016,15,Contest 2017,8,Custom Made Sticker Kereta,1,DARI AKHBAR,28,DARI RAKAN BLOGGER,7,Dari Rakan Facebook,8,Destinasi Cuti,14,DIARI HIDUP,2,diskaun saman PDRM,2,DUNIA BLOG DAN BLOGGER,28,DUNIA BLOGGER MALAYSIA,818,Dunia Haiwan,1,DUNIA HIBURAN SERANTAU,6,Dunia Oh Dunia,23,Dunia Penulis Blog,1,EDISI TERJAH BLOG BARU,33,english,1,Eqbalzack Giveaway,2,Fakta Hangat,334,FAKTA MENARIK,106,FAKTA MENARIK DAN PELIK,69,Familia,5,Featured,1,FOLLOWER HH,2,Fotografi,1,Gadget blogspot,1,GAMBAR,58,Gambar Menarik,16,GAMBAR PELIK DAN MENARIK,55,Gathering Bangku Kosong,12,Gaya Hidup,34,Giveaway,9,Hari Raya,57,Hartanah,59,Header Blog Pilihan,2,Holiday Destination,6,Holiday Getaway,62,Holiday Tips,2,Homestay,1,House Husband,607,Ihya Ramadhan,2,Info Blog,59,INFO BLOG BANGKU KOSONG,48,Info Blog HH,36,Info GST,14,Informasi,564,Informasi Dunia,1,INI SEBUAH CERITA,9,Inspirasi,9,Inspiration,5,Internet,2,iPhone 5 Gadjet Impian,1,ISLAM DAN MASYARAKAT,21,Isu Blogger,21,Isu Dan Berita,335,ISU DUNIA,3,ISU MALAYSIA,1,Isu Masyarakat,10,ISU MASYARAKAT 1,39,Isu Semasa,1,Jalan Jalan,1,JEJAK BLOGGER,19,Jom Jalan-jalan,3,Kamasutra temple,1,Kasut Pelik,1,Kehidupan Sebagai Blogger Sepenuh Masa,1,Keibubapaan,44,Kekeluargaan,128,Kempen,6,Kerja Dari Rumah,92,Khas buat Follower,39,Kisah Dunia,1,Kisah HH,58,KISAH KELUARGA,49,Klip Video,9,KOLEKSI LAWAK BANGKU KOSONG,46,KOLEKSI PETUA,22,KONGSI PETUA,2,KTM,17,Lawak Blogger,40,Lawak Sekejap,56,Lifestyle,362,Love,1,Majalah In Trend,6,Makanan,5,Malaysia Best Blog 2015,1,MENGENAI BLOG HH,1,Merdeka,12,MH370,6,Minda Berfikir,11,Miros,2,Narnia,1,NOSTALGIA,1,NUFFNANG,26,NULL,17,ONLINE SURVEY,1,Pakar SEO,1,Panduan,406,Panduan Adsense,19,Panduan Blogger,11,PANDUAN MENULIS BLOG,653,Panduan Pengiklanan di Blog,74,Parenting Tips,4,PDRM,1,Pelaburan,24,Pendapat,31,Penghargaan Dari Bloggers,8,PENGUMUMAN,2,Peraduan dan Kontest,15,Percuma,2,Percutian,78,Percutian Keluarga,14,PERISTIWA RAMADHAN,6,Permotoran,2,PERSPEKTIF,6,Petua,1,Petua dan Tips,18,petua kehidupan,5,Petua Memikat,3,Pilihanraya,1,Plastik Sampah Mesra Alam,1,que382ahexjz,1,Rakan Blogger,9,Ramadhan,66,RAMADHAN 2011,9,Ranking Alexa,2,Raya 2015,10,Resepi,54,Samsung,1,segmen 2015,2,segmen blogger 2016,7,SEJARAH DUNIA,43,Sembang Blogger,524,Semesti,2,SENI,3,Shopping,129,Shopping Online,4,Sihat Cantik,9,SIHAT SOKMO,18,SIRI KENALI TOKOH SEJARAH TEMPATAN,1,SIRI KISAH KERAJAAN AGUNG,5,SIRI SIFAT BLOGGER TERPUJI,6,Siri Tips Pikat Gadis Cantik,5,Tempat Menarik,194,Terbaik Google,6,The Bidadari 2014,9,Tips Bercuti,112,Tips Blogging,323,Tips Blogging 101,1,Tips Blogspot,84,Tips Dapur,54,Tips Kekeluargaan,4,Tips SEO Blogspot,132,VIDEO,125,Video Best,48,widget blog,35,WIDGET PILIHAN,62,wordless wednesday,114,Work From Home,13,
ltr
item
BLOG HASRULHASSAN.COM™: Cara Hilangkan Widget Tertentu Untuk Blog Responsif
Cara Hilangkan Widget Tertentu Untuk Blog Responsif
Tips blogging dan panduan blogger - Cara Hilangkan Widget Tertentu Untuk Blog Responsif
http://2.bp.blogspot.com/-ks1N-mjYmW0/VThuwHhQYBI/AAAAAAABBdc/68hV2b0cEDI/s1600/Cara-Sorok-Widget-Bila-Dalam-Mode-Mobile-Responsif.png
http://2.bp.blogspot.com/-ks1N-mjYmW0/VThuwHhQYBI/AAAAAAABBdc/68hV2b0cEDI/s72-c/Cara-Sorok-Widget-Bila-Dalam-Mode-Mobile-Responsif.png
BLOG HASRULHASSAN.COM™
https://www.hasrulhassan.com/2015/04/cara-hilangkan-widget-tertentu-untuk-blog-responsif.html
https://www.hasrulhassan.com/
https://www.hasrulhassan.com/
https://www.hasrulhassan.com/2015/04/cara-hilangkan-widget-tertentu-untuk-blog-responsif.html
true
1039913750360806682
UTF-8
Muatkan Semua Post Tidak ditemui sebarang post PAPAR SEMUA Seterusnya Balas Batal balas Padam Oleh Utama LAMAN POST Papar Semua PILIHAN KHAS UNTUK ANDA TAG ARKIB SEARCH SEMUA POST Tidak ditemui sebarang post berkaitan Utama Ahad Isnin Selasa Rabu Khamis Jumaat Sabtu Ahd Isn Sel Rab Kha Jum Sab Januari Februari Mac April Mei Jun Julai Ogos September Oktober November Disember Jan Feb Mac Apr Mei Jun Jul Ogs Sep Okt Nov Dis sebentar tadi 1 minit lalu $$1$$ minutes ago 1 hour ago $$1$$ hours ago Semalam $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Pengikut Ikut THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy