Tutorial: Bagaimana untuk membuat fungsi scroll follow

Tutorial: Bagaimana untuk membuat fungsi scroll follow

Assalamualaikum dan salam hujung minggu,

Cuti sekolah telah pun bermula, pasti ramai adik-adik yang sedang berseronok kerana tidak perlu pergi ke sekolah, tidak kurang juga yang bersedih kerana tidak dapat ke sekolah (yang ni mungkin tak ramai). Semoga percutian tahun ini dimanfaatkan dengan aktviti-aktiviti yang berfaedah, dan sekiranya kawasan rumah anda banjir, janganlah bermain di tempat-tempat yang boleh membahayakan nyawa anda.

Artikel kali ini juga adalah untuk menjawab soalan “Anda tanya Eizil Jawab”, soalan daripada bro Affan rupa-rupanya telah aku salah fahami dalam artikel terdahulu, kali ini aku akan berkongsi jawapan yang diinginkan. Teknik yang aku namakan scroll follow (tak tahu apa nama sebenar teknik ni), digunakan untuk memastikan sesuatu elemen itu akan tetap terpapar apabila kita melayari ke hujung halaman, anda boleh mencubanya di halaman Demo Scroll Follow ». Fungsi ini boleh digunakan untuk memaparkan fungsi tetap seperti perkongsian jaringan sosial dan sebagainya. Anda perlu merancang penggunaannya dan tidak hanya menggunakan fungsi ini secara membuta tulis.

Aku menggunakan jQuery untuk fungsi ini, kenapa jQuery? sebab kebiasaannya fungsi ini aku gunakan pada laman WordPress, jadi memang jQuery digunakan secara meluas dalam platform WordPress ini.

Jika anda ingin menggunakan fungsi ini dalam platform lain yang tidak mempunyai jQuery, pastikan anda membuat capaian jQuery kepada halaman anda dengan kod berikut

	 

Setelah selesai membuat capaian jQuery tersebut, masih kita lihat contoh bagaimana ingin membina fungsi scroll follow ini. Mula-mula sekali, kita pergi meletakkan elemen yang kekal dalam div yang mempunyai id yang tetap, contoh kali ini kita akan menggunakan div dengan id scrollfollow.

elemen yang anda ingin masukkan

Untuk elemen div#scrollfollow ini, aku telah meletakkan konfigurasi css seperti berikut

div#scrollfollow{
			width: 960px;
			background-color: white;
			height: 115px;
		}

Setelah selesai, seterusnya kita memerlukan fungsi javascript yang akan memproses elemen div#scrollfollow itu tadi. Di sini ada beberapa perkara penting yang perlu dititikberatkan, yang pertama adalah bila elemen div#scrollfollow ini perlu kekal? Dalam halaman Demo Scroll Follow » , aku telah meletakkan ketinggian 40px sebagai jarak sebelum elemen div#scrollfollow ini akan kekal kedudukannya.

Untuk mendapatkan ketinggian ini, pertama kita perlu mengetahui ketinggian ruangan browser dan juga ketinggian div#scrollfollow kita.

  var element = $("#scrollfollow");
  var window_height = $(window).height();
  var element_height = element.height();

  if (window_height > element_height) { // kita memeriksa sama ada ketinggian ruangan browser melebihi ketinggian elemen
     if ($(document).scrollTop() > 40) { // Di sini kita mengenalpasti, berapa jarak halaman itu telah ditatalkan.

Setelah kita mengetahui jarak tersebut, kita hanya perlu mengubah konfigurasi css yang kita telah tetapkan pada elemen div#scrollfollow tadi. Fungsi javascript digunakan untuk mencapai tujuan ini.

       if ($(document).scrollTop() > 40) { // Di sini kita mengenalpasti, berapa jarak halaman itu telah ditatalkan.
        element.css("position","fixed");
        element.css("top","40px");
      }
      else {
        element.css("position","relative");
        element.css("top","0px");
      }

Apa yang kita lakukan dalam fungsi javascript di atas, apabila pengguna telah mentatal sebanyak 40px, kita akan mengubah konfigurasi css kepada position fixed dan jarak daripada top 40px, ini disebabkan fungsi navigasi dalam laman Demo Scroll Follow » itu mempunyai ketinggian 40px.

Itu adalah asas bagaimana untuk menggunakan fungsi scroll follow ini, anda boleh mengubahsuai mengikut keperluan laman sesawang anda. Fungsi lengkap yang akan mengambil kita jika ruangan browser telah diubah saiz dan sebagainya ada dikongsikan di bawah.


Selamat mencuba, jika anda mempunyai sebarang soalan, bolehlah kemukakan di ruangan komen.


Demo Scroll Follow »

Penulis


Mohd Hadihaizil atau dikenali sebagai Eizil merupakan seorang pengaturcara laman web, beliau mula berkecimpung dalam bidang ini sejak tahun 2004, gemar dalam perkara berkaitan isu keselamatan dan pembangunan WordPress selain menulis di blog ini. Baca butiran lanjut di ruangan Kenali Eizil
10 November 2012 07:18
35 komen

Anda tanya Eizil jawab #siri 1

Anda tanya Eizil jawab #siri 1

Assalamualaikum dan selamat pagi semua,

seperti yang diumumkan tempoh hari, khidmat blogger digantikan dengan slot Anda tanya Eizil jawab, semua soalan yang berkenaan akan cuba dijawab dalam artikel di sini, sekiranya anda ada bertanyakan soalan, sila pastikan anda mengikuti setiap artikel dalam kategori ini. Semenjak pengumuman tempoh hari, ada tujuh soalan setakat ini, tetapi aku tidak akan menjawab semua soalan dalam artikel kali ini, kerana ada yang memerlukan artikel khusus untuk menjawabnya.

Soalan #1

Soalan pertama ini diajukan oleh abang Affan kita yang bertanyakan Boleh kongsikan tutorial buat sticky/fixed navigation bar macam di blog Denaihati.com? Terima kasih.

Pastinya boleh, untuk mendapatkan navigasi yang kekal pada posisi atas header kita, perkara yang paling penting adalah kod css seperti berikut:

nav{
	position:fixed;
	z-index:10;
}

Dua komponen ini akan membolehkan navigasi kita kekal pada kedudukannya, dan z-index itu untuk memastikan elemen-elemen lain berada di bawah navigasi tersebut apabila kita cuba melayari halaman yang terlibat. Pastinya anda boleh menambah lebih banyak komponen css dalam kod terbabit untuk menjadikan navigasi anda tampak menarik. Contoh kod html dan css untuk navigasi tetap adalah seperti berikut:


	
nav{
	position:fixed;
	height: 40px;
	width: 100%;
	z-index:10;
	background-color: #333;
}

Anda boleh melihat bagaimana contoh ini pada halaman Demo Navigasi Kekal ».

Soalan #2

Soalan seterusnya adalah daripada bro Hafizul yang bertanyakan Eizil,boleh tak ajarkan sy mcm mana nk buat rss reader untuk simpan url blog rakan blogger?

Jika soalan ini berkaitan ingin memaparkan entri terkini daripada rakan-rakan blogger di sidebar, anda boleh mencuba plugin Feed Reading Blogroll, ianya berfungsi seperti bloglist gadget yang terdapat pada blogger.com. Harap ini menjawab soalan yang dikemukakan, jika tidak, boleh perincikan penerangan mengenai soalan ini dalam borang yang disediakan.

Soalan #3

Soalan terakhir dalam sesi kali ini adalah daripada bro JebengOtai™ yang bertanyakan Bro Eizil xder projek utk bina tema wordpress terpantas ker?.. :)

Sepatutnya tahun 2012 memang akan melepaskan satu theme percuma yang mempunyai fungsi-fungsi sepertimana theme premium kepada semua, namun theme tersebut masih dalam proses pembangunan, dan tinggal kurang 2 bulan sebelum tahun 2012 tamat dan dalam keadaan sekarang ini, kemungkinan theme itu akan dapat dilepaskan pada tahun ini adalah amat tipis, jadi boleh nantikan theme tersebut dilepaskan pada tahun 2013 insyaALLAH.


Kepada rakan-rakan lain yang telah mengemukakan soalan, tetapi masih belum berjawab dalam sesi kali ini, usah gusar, semua soalan akan dijawab secepat mungkin dalam artikel yang berlainan. Sekiranya ada rakan-rakan yang ingin mempromosikan slot perkhidmatan ini di halaman masing-masing, bolehlah menggunakan banner-banner di bawah untuk tujuan tersebut.




Penulis


Mohd Hadihaizil atau dikenali sebagai Eizil merupakan seorang pengaturcara laman web, beliau mula berkecimpung dalam bidang ini sejak tahun 2004, gemar dalam perkara berkaitan isu keselamatan dan pembangunan WordPress selain menulis di blog ini. Baca butiran lanjut di ruangan Kenali Eizil
09 November 2012 07:00
43 komen

Pelbagai hadiah untuk dimenangi, contest pertama besar-besaran.

Pelbagai hadiah untuk dimenangi, contest pertama besar-besaran.

Assalamualaikum dan selamat pagi petang semua,

mungkin ada yang sudah ternanti-nanti pengumuman ini, terlebih dahulu ribuan maaf kerana kesihatan kurang memuaskan sebelum ini untuk buat pengumuman lebih awal, namun usah digusar, apa yang dijanji telah tiba, contest besar-besaran pertama kali diadakan di Eizil.com di bawah pengurusan Eizil Network. Memang banyak tujuan kenapa aku mengadakan pertandingan kali ini, antaranya adalah ingin berkenalan dengan para blogger dalam mahupun luar negara. Semoga dengan aktiviti ini, akan dapat mengeratkan silaturahim antara kita. Di samping itu, ada beberapa lagi tujuan yang aku akan kongsikan sepanjang aktiviti ini berlangsung.

Aktiviti kali ini akan dibahagikan kepada beberapa kategori, ada yang khusus untuk mereka yang mempunyai laman sesawang ataupun blog, dan ada pula untuk mereka yang tidak mempunyai laman sesawang atau blog. Ini untuk membolehkan sesiapa sahaja berpeluang untuk memenangi sesuatu dalam aktiviti yang dianjurkan kali ini. Ini adalah pertama kali aku mengadakan aktiviti seperti ini, suka ataupun tidak, mungkin ada kekurangan dalam perjalan aktiviti ini, aku mohon maaf terlebih dahulu, walaupun pelbagai persiapan telah aku rancang demi kelancaran aktiviti ini. Panjang pula mukadimah artikel kali ini, mari kita lihat kategori-kategori yang boleh anda sertai.

Kategori Penulis Pendapat Terbanyak

Seperti yang sedia maklum, anda boleh berkongsi pendapat di ruangan akhir artikel, untuk kategori ini, sesiapa yang menjadi penyumbang pendapat atau komen terbanyak akan diberikan hadiah. Sudah lama sebenarnya ingin menyediakan hadiah untuk ruangan ini, tetapi tidak pernah berkesempatan. Bermula dari aktiviti ini, setiap bulan aku akan memberikan pelbagai jenis hadiah kepada penyumbang pendapat terbanyak. Bagi permulaan, penyumbang pendapat terbanyak akan menerima:

  1. Penulis pendapat terbanyak akan menerima wang tunai dan juga senaskah ebuku panduan kewangan.
nota: disebabkan pengumuman dibuat hampir pertengahan bulan, pemenang terbanyak akan dikira bermula penghujung bulan oktober, bermaksud jumlah dari sekarang sampai oktober akan dicampurkan.

Kategori Penulis Pendapat Terbaik

Seterusnya, ini untuk mereka yang tidak gemar untuk menulis banyak-banyak pendapat, anda juga berpeluang untuk memenangi hadiah dengan berkongsi pendapat yang bernas dan jitu, untuk memenangi kategori ini, anda hanya perlu berkongsi pendapat yang berkait dengan artikel yang ditulis, dengan penerangan dan cara penulisan yang baik. Kesalahan bahasa juga dititikberatkan di sini untuk mengelakkan ejaan yang tidak baik digunakan dalam proses penulisan pendapat yang baik. Anda bebas untuk memilih cara penulisan, tetapi jika singkatan yang digunakan terlalu teruk, pastinya menjejaskan proses penilaian.

  1. Penulis pendapat terbaik akan menerima wang tunai dan juga senaskah ebuku panduan kewangan. Selain itu ada ganjaran tambahan jika penulis bersetuju dengan tawaran yang akan diberikan.

Seterusnya adalah kategori yang lebih memberi kelebihan kepada para blogger dalam atau luar negara. Kategori ini mempunyai hadiah yang lebih menarik jika dibandingkan dengan kategori terdahulu, dan pastinya ada tugasan yang menanti para peserta kategori ini.

Kategori Penulisan Terbaik

Usah khuatir dengan tajuk kategori ini, penulisan di sini bermaksud artikel yang anda akan tulis di blog anda, ada beberapa tugasan yang akan diberikan secara berperingkat, ini adalah setanding dengan tujuan akviti ini di buat.  Beberapa tugasan atau aktiviti ini akan diumumkan secara berperingkat dalam artikel-artikel akan datang. Jadi anda perlu kekal aktif di eizil.com untuk memastikan anda tidak ketinggalan.

Tugasan pertama yang anda perlu tulis adalah “Apakah punca atau penyebab anda menulis blog, ceritakan pengalaman anda” . Anda bebas untuk menggunakan gambar, video atau penulisan semata-mata, bahasa malaysia, english, jerman atau indonesia juga tiada masalah selagi aku faham. Apa yang penting, pengisian dalam itu perlulah lengkap. Sila gunakan ruangan di bawah ini untuk memasukkan pautan artikel anda itu, ianya akan terpapar secara automatik selepas anda masukkan. Sila pastikan anda memasukkan pautan dalam ruangan yang betul untuk mengelakkan sebarang kesulitan di penghujung aktiviti ini.

Tarikh tutup untuk penghantaran tugasan pertama adalah pada 30 September 2012, penyertaan dilanjutkan sehingga tamat aktiviti ini iaitu 31 Oktober 2012.

Penyertaan artikel baru telah ditutup

Senarai Penyertaan tugasan pertama

Senarai ini dikemaskini secara automatik setiap 5 minit. Sila jangan ulang penghantaran berkali-kali.


Pemarkahan akan dibuat oleh Eizil.com, dan terdapat beberapa markah bonus yang anda boleh dapatkan dengan memasang badge aktiviti ini, dan juga banner yang disediakan di ruangan di bawah. Setiap badge atau banner mempunyai bilangan markah bonus yang berbeza-beza, anda dibenarkan untuk memasang kesemuanya sekali jika anda mahukan. Anda dimestikan memasang sekurang-kurangnya satu badge dalam artikel yang ditulis oleh anda.


Kepada yang sudah menyelesaikan tugasan pertama, sila ke pautan berikut untuk tugasan yang kedua Perancangan dan impian yang ingin dicapai dan pautan berikut untuk tugasan yang ketiga dan terakhir Pemenang cabutan bertuah dan tugasan terakhir

Seterusnya mari kita lihat apakah hadiah yang akan ditawarkan.

  1. Tempat pertama akan menerima – Tema khusus yang akan dibina mengikut citara pemenang untuk platform WordPress (self-hosted) atau blogspot yang bernilai kira-kira RM2500 dan pengurusan laman blog anda selama 3 bulan (ini termasuk kemaskini plugin dan keselamatan untuk platform WordPress) dan proses selenggara lain yang bernilai kira-kira RM1000, perkhidmatan cdn percuma selama 6bulan (untuk platform WordPress self-hosted) dan senaskah ebuku panduan kewangan.
  2. Tempat kedua akan menerima – Tema khusus yang akan dibina mengikut citara pemenang untuk platform WordPress (self-hosted) atau blogspot yang bernilai kira-kira RM1500 dan pengurusan laman blog anda selama 1 bulan  (ini termasuk kemaskini plugin dan keselamatan untuk platform WordPress) dan proses selenggara lain yang bernilai kira-kira RM350, perkhidmatan cdn percuma selama 3bulan (untuk platform WordPress self-hosted) dan senaskah ebuku panduan kewangan.
  3. Tempat ketiga akan menerima domain dan hosting percuma (jika anda masih tidak mempunyai domain atau hosting bernilai kira-kira RM185) dan/atau perkhidmatan selenggara keselamatan untuk platform WordPress (self-hosted) dan senaskah ebuku panduan kewangan.
  4. tujuh hadiah saguhati akan diberikan kepada peserta kategori ini.

Beberapa peserta juga akan berpeluang untuk memenangi hadiah menerusi cabutan bertuah, ini akan diadakan pada penghujung aktiviti ini, peserta perlu melengkapkan semua tugasan dalam tempoh aktiviti ini dijalankan dan akan layak untuk menyertai cabutan bertuah tersebut. Hadiah berupa latihan online mengenai topik-topik berkaitan laman sesawang akan diberikan, selain hadiah-hadiah misteri yang akan diberitahu kelak.

Kategori Referal/Backlinks Terbanyak

Setiap pautan yang merujuk kepada eizil.com akan dikira dan pemantauan akan diselia menggunakan beberapa peralatan yang telah disediakan. Pada penghujung aktiviti ini, laman sesawang atau blog yang paling banyak memberi  pautan kepada Eizil.com akan diumumkan sebagai pemenang. Pemenang akan menerima hadiah seperti berikut

  1. Tempat pertama akan menerima wang tunai, senaskah ebuku panduan kewangan, perkhidmatan selenggara laman selama 3bulan yang bernilai kira-kira RM1000 dan perkhidmatan cdn percuma selama 6bulan (untuk platform WordPress self-hosted).
  2. Tempat kedua akan menerima wang tunai, senaskah ebuku panduan kewangan, perkhidmatan selenggara laman selama 1bulan yang bernilai kira-kira RM350 dan perkhidmatan cdn percuma selama 3bulan (untuk platform WordPress self-hosted).
  3. tiga hadiah saguhati akan diberikan kepada peserta yang terlibat.

Bahan-bahan seperti banner dan badge boleh anda perolehi di penghujung artikel ini.


Bahan-bahan untuk penyertaan pertandingan

Badge (mesti dimasukkan di setiap entri/artikel yang ditulis), anda boleh pilih warna yang anda gemari.

 





Web ribbon (paparan di bucu atas kanan/kiri laman web anda), lihat contoh pada bucu artikel ini. Anda boleh pilih warna yang anda gemari

Banner pelbagai saiz.








Penafian

Aktiviti ini diadakan oleh pihak Eizil Network tanpa sebarang waranti, penyertaan adalah terbuka kepada seluruh pengguna atas talian, namun begitu sekiranya pihak anda mengalami sebarang kesulitan semasa menyertai aktiviti ini, pihak Eizil Network tidak akan bertanggungjawab atas kesulitan tersebut. Semua bahan-bahan promosi untuk aktiviti ini dihost atas platform amazon s3 untuk memudahkan peserta menggunakannya tanpa sebarang masalah bandwidth atau seumpamanya. Semua keputusan pemenang adalah muktamad, ianya akan berdasarkan sistem pemarkahan yang telah dirancang untuk aktiviti ini. Penyertaan anda akan diterima hanya jika anda mengikuti semua arahan atau tugasan yang telah diberikan. Pihak Eizil Network ada menggunakan cookies dan beberapa peralatan untuk memantau aktiviti yang dijalankan ini, dengan penyertaan anda, anda bersetuju dan membenarkan Eizil Network membuat pemantauan.Penafian ini akan dipinda dari masa ke semasa tanpa sebarang notis.

Penulis


Mohd Hadihaizil atau dikenali sebagai Eizil merupakan seorang pengaturcara laman web, beliau mula berkecimpung dalam bidang ini sejak tahun 2004, gemar dalam perkara berkaitan isu keselamatan dan pembangunan WordPress selain menulis di blog ini. Baca butiran lanjut di ruangan Kenali Eizil
11 September 2012 17:50
404 komen

WordPress: Kemaskini keselamatan versi 3.3.2

WordPress: Kemaskini keselamatan versi 3.3.2

Assalamualaikum dan selamat malam,

ini sekadar artikel ringkas nak ingatkan kepada rakan-rakan yang masih belum mengemaskini versi WordPress masing-masing. Versi 3.3.2 ini membawakan kemaskini keselamatan yang penting antaranya,

Three external libraries included in WordPress received security updates:

  • Plupload (version 1.5.4), which WordPress uses for uploading media.
  • SWFUpload, which WordPress previously used for uploading media, and may still be in use by plugins.
  • SWFObject, which WordPress previously used to embed Flash content, and may still be in use by plugins and themes.

WordPress 3.3.2 also addresses:

  • Limited privilege escalation where a site administrator could deactivate network-wide plugins when running a WordPress network under particular circumstances.
  • Cross-site scripting vulnerability when making URLs clickable.
  • Cross-site scripting vulnerabilities in redirects after posting comments in older browsers, and when filtering URLs.

Baca butiran lanjut di sini
 

Penulis


Mohd Hadihaizil atau dikenali sebagai Eizil merupakan seorang pengaturcara laman web, beliau mula berkecimpung dalam bidang ini sejak tahun 2004, gemar dalam perkara berkaitan isu keselamatan dan pembangunan WordPress selain menulis di blog ini. Baca butiran lanjut di ruangan Kenali Eizil
20 April 2012 23:28
11 komen

Cara mudah menyekat akses ke laman sesawang

Cara mudah menyekat akses ke laman sesawang

Assalamualaikum dan selamat pagi,

pagi ini cuaca cerah dan nyaman, tapi disebabkan harini adalah hari cuti di kelantan, mood bercuti mulai menyelinap ke dalam diri. Namun terlalu banyak kerja yang perlu diselesaikan hari ini sebelum pulang ke kampung petang nanti. Kali ini sekadar ingin berkongsi cara mudah untuk menyekat penceroboh atau sesiapa yang kita ketahui ip mereka dari melawat atau melayari laman sesawang kita. Sejak kebelakangan ini, serangan demi serangan dilakukan ke atas laman WordPress, minggu ini sahaja, aku sudah menerima beberapa tempahan untuk membantu mereka mencuci dan memperketatkan keselamatan laman WordPress mereka.

Perlu aku terangkan, cara ini sekadar menyekat kemasukan daripada kumpulan ip yang kita ketahui telah cuba menyerang, ini bukan cara utama untuk mengelakkan daripada laman kita diserang. Sila rujuk buku Panduan ringkas keselamatan WordPress untuk penerangan yang lebih lanjut bagaimana anda boleh memperketatkan keselamatan WordPress anda.

Cara mudah ini akan menggunakan fail .htaccess untuk menyekat masuk pelawat yang tidak diingini. Hati-hati apabila meletakkan senarai ip, sila pastikan ip itu bukan ip dari crawler dari google dan sebagainya, kerana jika tidak, anda akan mengalami kerugian kerana tidak di index oleh google. Contohnya anda ingin menyekat masuk ip berikut 71.81.93.228, sila tambah kod di bawah ke dalam fail .htaccess anda.

order allow,deny
deny from 71.81.93.228
allow from all

Sekiranya anda mempunyai senarai ip yang lebih banyak, anda hanya perlu menambah deny from untuk setiap ip yang ingin disekat, contoh seperti di bawah


order allow,deny
deny from 71.81.93.228
deny from 80.26.100.114
deny from 80.33.117.201
deny from 125.255.84.98
deny from 203.147.92.69
deny from 74.81.93.228
deny from 118.97.185.124
deny from 118.97.170.195
deny from 118.97.165.234
deny from 118.97.100.75
allow from all

Kemudian anda boleh muat naik semula fail .htaccess yang telah diedit atau ditambah. Semua ip yang tersenarai itu tidak akan dapat memasuki laman web anda, jika mereka adalah penjahat, ini akan menyebabkan mereka perlu bekerja lebih untuk menukar ip dan sebagainya. Ini adalah perkara yang baik, terutama sekiranya kita hanyalah mangsa rawak yang ingin mereka cuba. Namun begitu, sekiranya mereka memang bertujuan ingin menyerang laman kita, pasti mereka akan meneruskan serangan dengan ip lain pula. Sama-samalah kita cuba berhati-hati dalam apa juga aktiviti yang kita lakukan di alam maya ini. Semoga tiada perkara buruk yang akan berlaku. Selamat hari jumaat semua.

Penulis


Mohd Hadihaizil atau dikenali sebagai Eizil merupakan seorang pengaturcara laman web, beliau mula berkecimpung dalam bidang ini sejak tahun 2004, gemar dalam perkara berkaitan isu keselamatan dan pembangunan WordPress selain menulis di blog ini. Baca butiran lanjut di ruangan Kenali Eizil
30 March 2012 07:54
16 komen

Keselamatan: Himpunan laman WordPress dalam satu akaun hosting?

Keselamatan: Himpunan laman WordPress dalam satu akaun hosting?

Assalamualaikum dan selamat pagi semua,

sejak kebelakangan ini aku menerima beberapa email meminta bantuan untuk menyelesaikan laman WordPress mereka yang telah dipecah masuk ataupun telah dijangkiti dengan bendasing yang menyebabkan laman sesawang mereka tidak berfungsi dengan sebaiknya. Sudah beberapa artikel aku tulis mengenai keselamatan laman sesawang ini, bahkan ebuku Panduan Ringkas Keselamatan WordPress juga pernah dikongsi secara percuma kepada semua. Namun masih ramai empunya laman yang tidak mengambil berat soal ini kerana merasakan laman mereka tidak akan dicerobohi atas apa alasan sekalipun.

Modus operandi serangan ke atas laman WordPress pada beberapa bulan kebelakangan ini lebih hebat, mereka bukan sekadar menyerang satu laman, bahkan semua laman WordPress yang berkongsi akaun hosting yang sama. Contohnya anda membeli satu pakej hosting yang membolehkan anda menambah sehingga beberapa domain, tetapi semua domain berkongsi ruangan root hosting yang sama, sekadar menggunakan subfolder yang berbeza. Ini merupakan cara paling jimat untuk individu yang mempunyai banyak laman web tetapi tidak mahu menggunakan pakej hosting yang berbeza, tetapi jika tersilap langkah, semua laman sesawang anda akan tergendala apabila serangan berjaya masuk ke salah satu laman tersebut.

Bagaimana untuk mengatasi perkara seperti ini? Anda boleh melanggan pakej reseller di mana anda boleh mengasingkan setiap domain tersebut untuk menggunakan akaun pengurusan sendiri, atau anda boleh melanggan pakej yang lebih murah untuk setiap laman sesawang anda. Saleiz Webhosting ada menyediakan pakej serendah RM20/setahun jika anda tercari-cari pakej hosting yang berpatutan.

Namun begitu, jika anda masih ingin menggunakan 1 pakej hosting untuk semua domain-domain anda, sila pastikan anda mengikuti beberapa perkara asas berikut:

  • Sila pastikan versi WordPress anda sentiasa dikemaskini
  • Gunakan gabungan kata laluan yang sukar untuk dipecahkan
  • Sentiasa memastikan komputer anda bebas daripada sebarang virus atau malware
  • Elakkan memasang plugin yang tidak diyakini (terutama plugin yang tidak dimuat turun terus dari laman WordPress.org)
  • Elakkan menggunakan plugin atau theme yang telah terlalu lama tidak dikemaskini
  • Dapatkan perkhidmatan penjagaan laman web seperti yang disediakan oleh Eizil.com
  • Elakkan berkongsi butiran akaun WordPress dengan orang lain, jika perlu, daftarkan akaun baru untuk individu tersebut

Semoga kita akan lebih peka dalam keselamatan laman sesawang. Menjadi blogger bukan alasan untuk kita mengabaikan perkara ini, kerana ianya adalah sebahagian daripada perkara yang perlu kita titikberatkan. Jika terdapat sebarang kesulitan atau pertanyaan, boleh hubungi aku untuk bantuan lanjut.

Penulis


Mohd Hadihaizil atau dikenali sebagai Eizil merupakan seorang pengaturcara laman web, beliau mula berkecimpung dalam bidang ini sejak tahun 2004, gemar dalam perkara berkaitan isu keselamatan dan pembangunan WordPress selain menulis di blog ini. Baca butiran lanjut di ruangan Kenali Eizil
22 March 2012 09:29
17 komen

Plugin Waktu Solat versi 2.0

Plugin Waktu Solat versi 2.0

Assalamualaikum dan selamat petang semua,

harini ramai yang sudah menamatkan cuti sekolah, sudah berakhir episod berehat di rumah, kembali menjalani kehidupan bersekolah seperti biasa. Apapun, semoga semuanya berjalan lancar hendaknya. Pada 1hb Januari tempoh hari, plugin Waktu Solat Countdown versi 2.0 telah dilancarkan, plugin kali ini telah dikemaskini untuk membolehkan semua blogger di mana jua anda berada boleh menggunakan plugin tersebut. Versi 1.x tempoh hari terhad kepada waktu solat sekitar Malaysia semata-mata.

Plugin kali ini juga dipersiapkan dengan fungsi pelbagai bahasa, buat masa ini, dua bahasa yang disertakan untuk permulaan, lebih banyak bahasa akan dimasukkan dari masa ke semasa. Jika anda ingin menyumbang kemahiran atau pengetahuan bahasa anda kepada plugin ini, amatlah dialu-alukan. Versi kali ini juga menggunakan cara countdown yang baru, ini untuk memberikan rupa counter yang lebih menarik kepada pengguna, ianya juga lebih mudah untuk diubahsuai oleh para pengguna yang ingin mengubahsuai. Fungsi zon masa yang berbeza juga diterapkan untuk membolehkan pengguna memilih zon masa yang bersesuaian dengan tempat tinggal mereka.

Plugin ini akan terus dibangunkan, pasti ada kekurangan dalam versi yang baru dilepaskan ini. Jika anda mempunyai sebarang cadangan ataupun ingin melaporkan sebarang ralat yang ditemui dalam plugin ini, bolehlah memberitahu aku untuk tindakan susulan. Sepertimana versi sebelum ini, plugin ini juga disediakan untuk pengguna blogspot, anda boleh mengemaskini kod versi 1.x kepada kod versi 2.0 dengan pergi ke halaman Waktu Solat Generator.

Sekiranya anda pertama kali membaca mengenai plugin Waktu Solat Countdown ini, sila ke halaman Projek Waktu Solat untuk membaca penerangan lebih lanjut. Terima kasih diucapkan kepada semua yang memberi maklum balas sebelum ini, tanpa anda, projek ini pasti tidak akan berkembang seperti sekarang.

Penulis


Mohd Hadihaizil atau dikenali sebagai Eizil merupakan seorang pengaturcara laman web, beliau mula berkecimpung dalam bidang ini sejak tahun 2004, gemar dalam perkara berkaitan isu keselamatan dan pembangunan WordPress selain menulis di blog ini. Baca butiran lanjut di ruangan Kenali Eizil
03 January 2012 14:34
6 komen

CSS dinamik dengan LESS

CSS dinamik dengan LESS

Assalamualaikum dan selamat pagi,

cuaca di sini masih mendung pagi ini, sudah beberapa hari sepanjang hari cuaca redup seperti di pagi hari, aku bersyukur dengan cuaca sebegini, kerana nyaman sahaja suhu dalam rumah memberikan aku keselesaan untuk bekerja lebih masa. Namun begitu, aku bersimpati dengan keluarga-keluarga yang rumah mereka sudah ditenggelami air, bencana alam yang tak dapat dielakkan, semoga tiada kerugian besar yang dialami.

Kali ini sekadar ingin berkongsi salah satu cara untuk melakukan pembangunan laman web menggunakan LESS, skrip yang membolehkan anda menguruskan css anda dengan lebih mudah. Ianya mempunyai ciri-ciri dinamik yang memudahkan anda untuk menamakan variable yang akan digunakan dalam css tersebut. LESS ini menggunakan fail .less untuk pengurusan css dalam sesebuah laman web, ianya berasaskan javascript. Contoh penggunaan dalam laman web adalah seperti berikut

    
    

Contoh isi kandungan file .less adalah seperti berikut:

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Anda dapat lihat bagaimana @radius diberikan nilai dalam satu tempat, kemudian digunakan semula dalam tempat2 yang lain. Class .rounded-corners juga boleh diguna semula dalam class atau id lain dengan mudah, hanya perlu menulis nama class tersebut, dan semua properties akan dibaca dari .rounded-corners tersebut. Ini memudahkan untuk pengurusan css, terutama jika kita menggunakan pengulangan dalam sesuatu perkara itu, jika ingin mengubah warna atau properties sesuatu bahagian css pasti lebih mudah.

Selain itu, LESS juga memberikan sokongan untuk melakukan nested css seperti di bawah:

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
} 

Dengan pengurusan nested css seperti ini, semua tampak tersusun dan lebih jelas apa yang ingin kita capai dengan nested ini. Pembangunan sesebuah laman web juga lebih mudah dan cepat (ini pandangan peribadi), namun begitu, cubaan untuk load LESS menggunakan mobile browser pada si hitam manis setakat ini mendukacitakan. Mungkin disebabkan browser pada si hitam manis yang tidak support penggunaan less ini.

Jika anda ingin mencuba menggunakan LESS, bolehlah memuat turun di halaman LESS « The Dynamic StyleSheet Language. Selamat mencuba.

Penulis


Mohd Hadihaizil atau dikenali sebagai Eizil merupakan seorang pengaturcara laman web, beliau mula berkecimpung dalam bidang ini sejak tahun 2004, gemar dalam perkara berkaitan isu keselamatan dan pembangunan WordPress selain menulis di blog ini. Baca butiran lanjut di ruangan Kenali Eizil
25 November 2011 10:26
4 komen

Memaparkan data dalam bentuk carta dengan mudah

Memaparkan data dalam bentuk carta dengan mudah

Assalamualaikum dan selamat pagi,

Apa khabar anda semua? masih dalam mood bercuti lagi? Pasti ramai yang telah memulakan kerja pada hari ini, walaupun ada yang masih bercuti di kampung kerana mengambil peluang untuk menghabiskan cuti tahunan yang masih banyak lagi tersimpan. Kali ini aku sekadar ingin berkongsi satu plugin yang membolehkan kita memaparkan carta pai atau pelbagai lagi carta dalam post atau page WordPress dengan mudah. Aku menggunakan plugin ini untuk memaparkan statistik data pengunjung dalam salah satu laman sesawang yang dibina untuk seorang client aku.

Cara menggunakan plugin ini adalah sangat mudah, anda hanya perlu menggunakan shortcode untuk memaparkan pelbagai jenis carta yang tersedia dalam plugin ini. Contoh carta pai yang boleh digunakan adalah seperti di bawah:

eizil.com

kod yang digunakan untuk paparan carta di atas adalah seperti berikut:

[ easychart type="pie" title="Statistik Jumlah Muat Turun Projek Eizil.com" groupnames="Theme Arialist,Theme Booklogue,Ebook Keselamatan WordPress,Santapan Minda Plugin,YARPP Thumbnail,Waktu Solat Plugin,Localhost Data Viewer" group1values="136" group2values="66" group3values="121" group4values="111" group5values="86" group6values="371" group7values="760" chartfadecolor="FFFFFF"]

Jika anda ingin menggunakan plugin ini, bolehlah membuat carian Easy Chart Builder dari halaman wp-admin atau muat turun secara manual di halaman Easy Chart Builder di wordpress.org. Selamat mencuba.

Penulis


Mohd Hadihaizil atau dikenali sebagai Eizil merupakan seorang pengaturcara laman web, beliau mula berkecimpung dalam bidang ini sejak tahun 2004, gemar dalam perkara berkaitan isu keselamatan dan pembangunan WordPress selain menulis di blog ini. Baca butiran lanjut di ruangan Kenali Eizil
09 November 2011 08:47
13 komen