{"id":189,"date":"2025-07-04T09:29:49","date_gmt":"2025-07-04T01:29:49","guid":{"rendered":"https:\/\/mdranau1.sabah.gov.my\/?page_id=189"},"modified":"2026-03-24T14:51:35","modified_gmt":"2026-03-24T06:51:35","slug":"pengenalan-daerah-ranau","status":"publish","type":"page","link":"https:\/\/mdranau.sabah.gov.my\/en\/pengenalan-daerah-ranau\/","title":{"rendered":"Pengenalan Daerah Ranau"},"content":{"rendered":"\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n  \/* 1. KEDUDUKAN ASAL TEKS (SEBELUM ANIMASI) *\/\n  .text-reveal {\n    opacity: 0;\n    transform: translateY(30px); \/* Teks berada 30px di bawah *\/\n    transition: all 0.9s ease-out; \/* Kelajuan animasi muncul (0.9 saat) *\/\n    will-change: transform, opacity; \/* Optimalisasi browser *\/\n  }\n\n  \/* KEDUDUKAN TEKS SELEPAS SCROLL (AKTIF) *\/\n  .text-reveal.is-visible {\n    opacity: 1;\n    transform: translateY(0); \/* Teks naik ke tempat asal *\/\n  }\n\n  \/* 2. STRUKTUR UTAMA - STATIK & TIADA ANIMASI *\/\n  .info-wrapper-full {\n    max-width: 1100px;\n    margin: 20px auto;\n    font-family: 'Poppins', sans-serif;\n    background: #ffffff;\n    border-radius: 12px;\n    box-shadow: 0 10px 40px rgba(0,0,0,0.08);\n    overflow: hidden;\n    border: 1px solid #e1e8ed;\n    display: flex;\n    flex-direction: row;\n    opacity: 1 !important; \/* Pastikan container sentiasa nampak *\/\n    transform: none !important; \/* Pastikan container sentiasa nampak *\/\n  }\n\n  \/* 3. BAHAGIAN GAMBAR - STATIK *\/\n  .info-image-full {\n    flex: 1;\n    min-width: 400px;\n    background: #f8f9fa;\n  }\n\n  .info-image-full img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n  }\n\n  \/* 4. BAHAGIAN TEKS - KOTAK STATIK *\/\n  .info-text-full {\n    flex: 1.5;\n    padding: 50px;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    background: #ffffff;\n  }\n\n  \/* Header Header *\/\n  .info-header-full {\n    display: flex;\n    align-items: center;\n    margin-bottom: 20px;\n    margin-top: 25px;\n  }\n\n  .info-header-full:first-child { margin-top: 0; }\n\n  .info-header-full .line {\n    width: 6px;\n    height: 30px;\n    background: #002b5c;\n    border-right: 3px solid #FFD700;\n    margin-right: 15px;\n    border-radius: 2px;\n  }\n\n  .info-header-full h2 {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 700;\n    color: #000000;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n  }\n\n  \/* Isi Kandungan - Hitam Pekat *\/\n  .info-content-full {\n    font-size: 16px;\n    line-height: 1.8;\n    color: #000000;\n    text-align: justify;\n  }\n\n  .info-content-full p { margin-bottom: 15px; }\n\n  .highlight-blue {\n    color: #002b5c;\n    font-weight: 600;\n  }\n\n  \/* 5. MOBILE: TEKS ATAS, GAMBAR BAWAH (STATIK) *\/\n  @media (max-width: 900px) {\n    .info-wrapper-full {\n      flex-direction: column-reverse; \/* Teks atas, Gambar bawah *\/\n    }\n    .info-image-full { height: 350px; min-width: 100%; }\n    .info-text-full { padding: 35px 25px; }\n    .info-content-full { text-align: left; }\n  }\n<\/style>\n\n<div class=\"info-wrapper-full\">\n  \n  <div class=\"info-image-full\">\n    <img decoding=\"async\" src=\"https:\/\/mdranau.sabah.gov.my\/wp-content\/uploads\/2026\/01\/DJI_0151-2048x1536.jpg\" alt=\"Pemandangan Udara Ranau\">\n  <\/div>\n\n  <div class=\"info-text-full\">\n    \n    <div class=\"info-header-full text-reveal\">\n      <div class=\"line\"><\/div>\n      <h2>PENGENALAN DAERAH RANAU<\/h2>\n    <\/div>\n    \n    <div class=\"info-content-full\">\n      <p class=\"text-reveal\">\n        <span class=\"highlight-blue\">Ranau<\/span> ialah sebuah daerah yang terletak Bahagian Pantai Barat, utara Negeri Sabah, Malaysia. Dianggarkan jumlah penduduknya pada tahun 2000 ialah seramai 70,649 orang. Pusat pentadbiran daerah ini terletak di Ranau manakala antara pekan lain yang terletak di daerah ini termasuklah Kundasang. Majoriti penduduk daerah Ranau merupakan masyarakat Kadazan-Dusun.\n      <\/p>\n    <\/div>\n\n    <div class=\"info-header-full text-reveal\">\n      <div class=\"line\"><\/div>\n      <h2>SEJARAH DAERAH RANAU<\/h2>\n    <\/div>\n    \n    <div class=\"info-content-full\">\n      <p class=\"text-reveal\">\n        Ranau berasal dari perkataan Bahasa Dusun, <span class=\"highlight-blue\">Ranahon<\/span> yang bermaksud kawasan sawah padi. Biasanya masyarakat Dusun di daerah Ranau mengusahakan tanaman padi huma atau padi bukit memandangkan bentuk muka bumi di sini yang berbukit bukau. Tetapi bagi penduduk di Lembah Ranau, mereka mengusahakan tanaman padi sawah atau dalam bahasa tempatan Ranahon.\n      <\/p>\n      <p class=\"text-reveal\">\n        Panggilan singkat Ranahon ialah Ranau. Kebetulan kawasan ini telah membangun dan menjadi pusat pentadbiran daerah maka perkataan Ranau telah digunakan sebagai nama rasmi daerah ini.\n      <\/p>\n      <p class=\"text-reveal\">\n        Pada tahun 1943 hingga 1947, Ranau merupakan sebuah daerah kecil di bawah pentadbiran daerah Tambunan. Residen Sandakan kemudiannya mengambil alih pentadbiran Daerah Kecil Ranau.\n      <\/p>\n      <p class=\"text-reveal\">\n        Pada awal tahun 1960-an, Ranau telah menjadi sebuah daerah kecil bagi daerah Tambunan dan daerah Kota Belud sebelum menjadi sebuah daerah penuh. Ranau telah menjadi sebuah daerah penuh bermula tahun <span class=\"highlight-blue\">1961<\/span>.\n      <\/p>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n  \/\/ Setup Intersection Observer\n  const observerOptionsText = {\n    threshold: 0.2 \/\/ Animasi mula bila 20% teks nampak dalam skrin\n  };\n\n  const textObserver = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add('is-visible');\n        \/\/ Optional: Berhenti observe selepas animasi selesai\n        \/\/ textObserver.unobserve(entry.target); \n      }\n    });\n  }, observerOptionsText);\n\n  \/\/ Cari semua elemen teks yang ada class 'text-reveal'\n  document.querySelectorAll('.text-reveal').forEach((el) => {\n    textObserver.observe(el);\n  });\n<\/script>\n\n\n\n<div style=\"height:10px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@600;700;800&display=swap\" rel=\"stylesheet\">\n\n<style>\n  \/* 1. CONTAINER UTAMA *\/\n  .tab-map-wrapper {\n    max-width: 1100px;\n    margin: 5px auto;\n    font-family: 'Poppins', sans-serif;\n    text-align: center;\n    width: 96%,\n  }\n\n  \/* 2. GAYA BUTANG (DIBESARKAN) *\/\n  .map-tab-menu {\n    display: inline-flex;\n    justify-content: center;\n    gap: 15px;\n    margin-bottom: 30px;\n    background: #f1f1f1;\n    padding: 10px;\n    border-radius: 60px;\n    border: 1px solid #ddd;\n  }\n\n  .map-btn {\n    padding: 18px 45px; \/* Saiz butang lebih besar *\/\n    border: none;\n    background: transparent;\n    color: #444;\n    font-size: 16px; \/* Font lebih besar *\/\n    font-weight: 800;\n    cursor: pointer;\n    border-radius: 50px;\n    transition: all 0.3s ease;\n    text-transform: uppercase;\n    letter-spacing: 1.5px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n\n  \/* Butang bila Aktif *\/\n  .map-btn.active {\n    background: #002b5c; \/* Biru Navy *\/\n    color: #ffffff;\n    box-shadow: 0 10px 20px rgba(0, 43, 92, 0.3);\n    transform: translateY(-2px);\n  }\n\n  \/* Butang bila Hover (Bukan Aktif) *\/\n  .map-btn:hover:not(.active) {\n    background: #e0e0e0;\n    color: #000;\n  }\n\n  \/* 3. KOTAK KANDUNGAN PETA *\/\n  .map-tab-content {\n    display: none;\n    background: #ffffff;\n    border-radius: 20px;\n    border: 2px solid #002b5c;\n    box-shadow: 0 15px 45px rgba(0,0,0,0.1);\n    overflow: hidden;\n    height: 550px; \/* Ketinggian yang selesa *\/\n    position: relative;\n  }\n\n  .map-tab-content.active {\n    display: block;\n  }\n\n  \/* Gaya Iframe & Gambar *\/\n  .map-tab-content iframe {\n    width: 100%;\n    height: 100%;\n    border: 0;\n    display: block;\n  }\n\n  .map-tab-content img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain; \/* Supaya peta pekan nampak penuh tanpa potong *\/\n    background: #f9f9f9;\n    display: block;\n  }\n\n  \/* Label Kecil Bawah Peta *\/\n  .map-caption {\n    position: absolute;\n    bottom: 20px;\n    right: 20px;\n    background: rgba(255, 215, 0, 0.95); \/* Warna Emas *\/\n    color: #000;\n    padding: 8px 20px;\n    border-radius: 5px;\n    font-size: 13px;\n    font-weight: 700;\n    z-index: 10;\n    box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n  }\n\n  \/* 4. RESPONSIF MOBILE *\/\n  @media (max-width: 768px) {\n    .map-tab-menu {\n      flex-direction: column;\n      border-radius: 20px;\n      width: 90%;\n    }\n    .map-btn {\n      padding: 15px 20px;\n      font-size: 14px;\n      justify-content: center;\n    }\n    .map-tab-content {\n      height: 400px;\n    }\n  }\n<\/style>\n\n<div class=\"tab-map-wrapper\">\n  \n  <div class=\"map-tab-menu\">\n    <button class=\"map-btn active\" onclick=\"switchMap(event, 'view-sempadan')\">\n      Sempadan Daerah\n    <\/button>\n    <button class=\"map-btn\" onclick=\"switchMap(event, 'view-pekan')\">\n      Peta Pekan Ranau\n    <\/button>\n  <\/div>\n\n  <div id=\"view-sempadan\" class=\"map-tab-content active\">\n    <iframe \n      src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m14!1m8!1m3!1d449940.3030962037!2d116.8729939!3d5.8638262!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x323b8df8fa7cfc17%3A0xbcbb8186d0a68d4b!2sRanau%20District%2C%20Sabah!5e1!3m2!1sen!2smy!4v1752727301036!5m2!1sen!2smy\" \n      allowfullscreen=\"\" \n      loading=\"lazy\" \n      referrerpolicy=\"no-referrer-when-downgrade\">\n    <\/iframe>\n    <div class=\"map-caption\">Navigasi Google Maps<\/div>\n  <\/div>\n\n  <div id=\"view-pekan\" class=\"map-tab-content\">\n    <img decoding=\"async\" src=\"https:\/\/mdranau.sabah.gov.my\/wp-content\/uploads\/2025\/07\/Peta-Pekan-Ranau.png\" alt=\"Peta Pekan Ranau\">\n    <div class=\"map-caption\">Pelan Statik Pekan<\/div>\n  <\/div>\n\n<\/div>\n\n<script>\nfunction switchMap(evt, mapId) {\n  var i, tabcontent, tablinks;\n\n  \/\/ Sembunyikan semua content\n  tabcontent = document.getElementsByClassName(\"map-tab-content\");\n  for (i = 0; i < tabcontent.length; i++) {\n    tabcontent[i].classList.remove(\"active\");\n  }\n\n  \/\/ Buang class active dari semua butang\n  tablinks = document.getElementsByClassName(\"map-btn\");\n  for (i = 0; i < tablinks.length; i++) {\n    tablinks[i].classList.remove(\"active\");\n  }\n\n  \/\/ Tunjukkan content yang dipilih & tambah class active pada butang\n  document.getElementById(mapId).classList.add(\"active\");\n  evt.currentTarget.classList.add(\"active\");\n}\n<\/script>\n\n\n\n<div style=\"height:35px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<div class=\"pvc_clear\"><\/div><p id=\"pvc_stats_189\" class=\"pvc_stats all  \" data-element-id=\"189\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> <img loading=\"lazy\" decoding=\"async\" width=\"16\" height=\"16\" alt=\"Loading\" src=\"https:\/\/mdranau.sabah.gov.my\/wp-content\/plugins\/page-views-count\/ajax-loader-2x.gif\" border=0 \/><\/p><div class=\"pvc_clear\"><\/div>","protected":false},"excerpt":{"rendered":"<p>PENGENALAN DAERAH RANAU Ranau ialah sebuah daerah yang terletak Bahagian Pantai Barat, utara Negeri Sabah, Malaysia. Dianggarkan jumlah penduduknya pada tahun 2000 ialah seramai 70,649 orang. Pusat pentadbiran daerah ini terletak di Ranau manakala antara pekan lain yang terletak di daerah ini termasuklah Kundasang. Majoriti penduduk daerah Ranau merupakan masyarakat Kadazan-Dusun. SEJARAH DAERAH RANAU Ranau [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_lmt_disableupdate":"","_lmt_disable":"","footnotes":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-189","page","type-page","status-publish","hentry"],"acf":[],"a3_pvc":{"activated":true,"total_views":1194,"today_views":3},"_links":{"self":[{"href":"https:\/\/mdranau.sabah.gov.my\/en\/wp-json\/wp\/v2\/pages\/189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mdranau.sabah.gov.my\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mdranau.sabah.gov.my\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mdranau.sabah.gov.my\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mdranau.sabah.gov.my\/en\/wp-json\/wp\/v2\/comments?post=189"}],"version-history":[{"count":44,"href":"https:\/\/mdranau.sabah.gov.my\/en\/wp-json\/wp\/v2\/pages\/189\/revisions"}],"predecessor-version":[{"id":2062,"href":"https:\/\/mdranau.sabah.gov.my\/en\/wp-json\/wp\/v2\/pages\/189\/revisions\/2062"}],"wp:attachment":[{"href":"https:\/\/mdranau.sabah.gov.my\/en\/wp-json\/wp\/v2\/media?parent=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}