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
Name

#Bajet2014,4,#VMY2014,5,#WORDLESS WEDNESDAY,74,Abah Blogger,39,Advertorial,117,Advertorial 2013,15,advertorial 2014,40,advertorial 2015,8,ARTIKEL KEHIDUPAN,11,ARTIKEL KEKELUARGAAN,8,ARTIKEL KESIHATAN,6,Bajet 2013,9,Bajet 2016,8,BICARA MASYARAKAT,153,Bicara Minda,73,BILA BLOGGER MASUK MAJALAH,26,BLOG LENSA HASRUL,1,BLOG PILIHAN 2012,25,BLOG PILIHAN 2013,15,Blog Selebriti,77,Blog Stats,10,Blogger Guide,2,BR1M,10,Buat Duit Dengan Adsense,55,Buat Duit Online,365,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,Didik Anak,5,diskaun saman PDRM,2,Dunia Blog,1,DUNIA BLOG DAN BLOGGER,28,DUNIA BLOGGER MALAYSIA,819,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,290,FAKTA MENARIK,107,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,45,Giveaway,9,Guide and Tips,9,Hari Raya,58,Hartanah,50,Header Blog Pilihan,2,Holiday Destination,6,Holiday Getaway,62,Holiday Tips,2,Homestay,1,House Husband,623,Ihya Ramadhan,2,Info Blog,60,INFO BLOG BANGKU KOSONG,48,Info Blog HH,37,Info GST,14,Informasi,578,Informasi Dunia,1,INI SEBUAH CERITA,11,Inspirasi,10,Inspiration,6,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,32,Kekeluargaan,81,Kempen,6,Kerja Dari Rumah,81,Khas buat Follower,39,Kisah Dunia,1,Kisah HH,74,KISAH KELUARGA,50,Klip Video,9,KOLEKSI LAWAK BANGKU KOSONG,47,KOLEKSI PETUA,23,KONGSI PETUA,2,KTM,16,Lawak Blogger,40,Lawak Sekejap,57,Lifestyle,275,Love,1,Majalah In Trend,6,Makanan,5,Malaysia Best Blog 2015,1,MENGENAI BLOG HH,1,Merdeka,12,MH370,6,Minda Berfikir,12,Miros,2,Narnia,1,NOSTALGIA,1,NUFFNANG,26,NULL,17,ONLINE SURVEY,1,Pakar SEO,1,Panduan,335,Panduan Adsense,18,Panduan Blogger,11,PANDUAN MENULIS BLOG,654,Panduan Pengiklanan di Blog,74,Parenting Tips,5,PDRM,1,Pelaburan,14,Pendapat,32,Penghargaan Dari Bloggers,8,PENGUMUMAN,2,Peraduan dan Kontest,15,Percuma,2,Percutian,54,Percutian Keluarga,17,PERISTIWA RAMADHAN,6,Permotoran,2,PERSPEKTIF,6,Petua,1,Petua dan Tips,27,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,51,Samsung,1,segmen 2015,2,segmen blogger 2016,7,SEJARAH DUNIA,43,Sembang Blogger,486,Semesti,2,SENI,3,Shopping,109,Shopping Online,7,Sihat Cantik,12,SIHAT SOKMO,19,SIRI KENALI TOKOH SEJARAH TEMPATAN,1,SIRI KISAH KERAJAAN AGUNG,5,SIRI SIFAT BLOGGER TERPUJI,6,Siri Tips Pikat Gadis Cantik,5,Tempat Makan,9,Tempat Menarik,173,Terbaik Google,6,The Bidadari 2014,9,Tips Bercuti,93,Tips Blogging,311,Tips Blogging 101,1,Tips Blogspot,85,Tips Dapur,51,Tips Kekeluargaan,4,Tips SEO Blogspot,130,VIDEO,127,Video Best,34,widget blog,29,WIDGET PILIHAN,71,wordless wednesday,105,Work From Home,13,
ltr
item
Biar Tahu Dengan Ilmu - 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
Biar Tahu Dengan Ilmu - HASRULHASSAN.COM™
http://www.hasrulhassan.com/2015/04/cara-hilangkan-widget-tertentu-untuk-blog-responsif.html
http://www.hasrulhassan.com/
http://www.hasrulhassan.com/
http://www.hasrulhassan.com/2015/04/cara-hilangkan-widget-tertentu-untuk-blog-responsif.html
true
1039913750360806682
UTF-8
Loaded All Posts Not found any posts VIEW ALL Baca lagi Balas Batal balas Padam Oleh Home LAMAN ARTIKEL Papar semua DISARAN UNTUK ANDA LABEL ARKIB CARIAN SEMUA ARTIKEL Maaf tidak dijumpai apa yang diminta Kembali Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Pengikut Ikut THIS CONTENT IS PREMIUM Please share 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