{"id":348,"date":"2025-06-17T19:00:15","date_gmt":"2025-06-17T19:00:15","guid":{"rendered":"https:\/\/nevistan.com\/?p=348"},"modified":"2025-12-11T14:30:28","modified_gmt":"2025-12-11T14:30:28","slug":"bottom-navbar-projesi","status":"publish","type":"post","link":"https:\/\/nevistan.com\/?p=348","title":{"rendered":"Bottom Navbar Nedir? HTML\u2013CSS ile H\u0131zl\u0131 Bir Proje Deneyimi"},"content":{"rendered":"\n

Bottom navbar<\/strong>, T\u00fcrk\u00e7esiyle Alt Navigasyon \u00c7ubu\u011fu<\/em>, \u00f6zellikle mobil aray\u00fczlerde<\/strong> tercih edilen, 4\u20135 farkl\u0131 sayfaya y\u00f6nlendirme sunan pratik bir men\u00fc yap\u0131s\u0131d\u0131r. Bu proje, JavaScript \u00e7al\u0131\u015fma s\u00fcrecimdeki ikinci \u00e7al\u0131\u015fmam oldu. A\u00e7\u0131k\u00e7as\u0131 projeyi \u00f6nceden incelemi\u015f olsayd\u0131m muhtemelen ba\u015flamazd\u0131m; \u00e7\u00fcnk\u00fc d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcm kadar yo\u011fun JavaScript i\u00e7ermiyordu. Yine de CSS prati\u011fi<\/strong> a\u00e7\u0131s\u0131ndan olduk\u00e7a h\u0131zl\u0131 ve faydal\u0131 bir deneyim oldu.<\/p>\n\n\n\n

Bu yaz\u0131da hem projeden bahsediyor hem de HTML, CSS ve JS taraf\u0131nda kulland\u0131\u011f\u0131m yap\u0131lar\u0131 a\u00e7\u0131kl\u0131yorum.<\/p>\n\n\n\n

\n\n\n\n

⭐ Bottom Navbar Yap\u0131s\u0131 Nas\u0131l \u00c7al\u0131\u015f\u0131yor?<\/strong><\/h2>\n\n\n\n

Haz\u0131rlad\u0131\u011f\u0131m versiyon, bir blog hesab\u0131n\u0131n \u015fu sayfalar\u0131ndan olu\u015fuyor:<\/p>\n\n\n\n

    \n
  • Anasayfa<\/strong><\/li>\n\n\n\n
  • \u00dcr\u00fcnler<\/strong><\/li>\n\n\n\n
  • \u0130leti\u015fim<\/strong><\/li>\n\n\n\n
  • Blog<\/strong><\/li>\n<\/ul>\n\n\n\n

    Men\u00fc tamamen mobil uyumlu olacak \u015fekilde tasarland\u0131 ve her sekmeye t\u0131kland\u0131\u011f\u0131nda ilgili sayfa g\u00f6r\u00fcn\u00fcr h\u00e2le geliyor.<\/p>\n\n\n\n

    \n\n\n\n

    🧱 HTML Yap\u0131s\u0131<\/strong><\/h2>\n\n\n\n

    Projede \u00f6nce t\u00fcm alan\u0131 kapsayacak bir container<\/strong> tan\u0131mlad\u0131m.
    Bu container i\u00e7inde alt navigasyonun bulundu\u011fu bir card<\/strong> b\u00f6l\u00fcm\u00fc var. Bu card, t\u00fcm men\u00fcy\u00fc kaps\u0131yor.<\/p>\n\n\n\n

    Her sayfa i\u00e7in ayn\u0131 temel class yap\u0131s\u0131n\u0131 kulland\u0131m:<\/p>\n\n\n\n

      \n
    • Ortak stil i\u00e7in: content<\/code><\/li>\n\n\n\n
    • Sayfalar\u0131 \u00f6zelle\u015ftirmek i\u00e7in ek class: content home<\/code>, content product<\/code>, content blog<\/code> gibi.<\/li>\n<\/ul>\n\n\n\n

      Sayfa de\u011fi\u015fimlerinin d\u00fczenli olmas\u0131 i\u00e7in \u00fcst ve alt class yap\u0131lar\u0131n\u0131 do\u011fru planlamak<\/strong> \u00f6nemliydi.<\/p>\n\n\n\n

      🔸 \u0130kon Kullan\u0131m\u0131<\/strong><\/h3>\n\n\n\n

      \u0130konlar\u0131 FontAwesome<\/strong> \u00fczerinden \u00e7ektim. Projede \u00f6nce FontAwesome CDN ba\u011flant\u0131s\u0131n\u0131 ekledim, ard\u0131ndan istedi\u011fim ikonlar\u0131 HTML i\u00e7inde <i><\/code> etiketiyle yerle\u015ftirdim.<\/p>\n\n\n\n

      \n

      FontAwesome, \u00fccretsiz ve kaliteli ikonlar sunmas\u0131 nedeniyle bu tarz men\u00fcler i\u00e7in olduk\u00e7a ideal.<\/p>\n<\/blockquote>\n\n\n\n

      \n\n\n\n

      🎨 CSS Yap\u0131s\u0131<\/strong><\/h2>\n\n\n\n

      CSS taraf\u0131nda en kritik konu, sayfalar\u0131n g\u00f6r\u00fcn\u00fcrl\u00fck durumlar\u0131<\/strong>yd\u0131.<\/p>\n\n\n\n

      Bir sekmeye t\u0131kland\u0131\u011f\u0131nda ilgili sayfan\u0131n \u00f6ne gelmesi, di\u011ferlerinin ise geri planda kalmas\u0131 i\u00e7in:<\/p>\n\n\n\n

        \n
      • .active<\/code> class\u0131 ile g\u00f6r\u00fcn\u00fcr sayfay\u0131 belirledim.<\/li>\n\n\n\n
      • opacity<\/code> kullanarak g\u00f6r\u00fcnmez\u2013g\u00f6r\u00fcn\u00fcr ge\u00e7i\u015fleri sa\u011flad\u0131m.<\/li>\n\n\n\n
      • Katman d\u00fczeni i\u00e7in z-index<\/code> de\u011ferleriyle oynad\u0131m.<\/li>\n<\/ul>\n\n\n\n

        📌 \u00d6\u011frendi\u011fim Yeni \u00d6zellik: position<\/strong><\/h3>\n\n\n\n

        Bu projede \u00f6zellikle position<\/strong> \u00f6zelli\u011fini daha iyi kavrad\u0131m.
        Her bir position t\u00fcr\u00fcn\u00fcn nas\u0131l davrand\u0131\u011f\u0131n\u0131 tabloya d\u00f6kt\u00fcm ve projede nerede kullanabilece\u011fimi g\u00f6rmek i\u015fimi kolayla\u015ft\u0131rd\u0131.<\/p>\n\n\n\n

        \n\n\n\n

        🍽️ Tasar\u0131m\u0131 Ki\u015fiselle\u015ftirme S\u00fcreci<\/strong><\/h2>\n\n\n\n

        Projeyi takip etti\u011fim kaynak tamamen lorem i\u00e7erikler ve ama\u00e7s\u0131z g\u00f6rsellerle haz\u0131rlanm\u0131\u015ft\u0131. Ben ise temay\u0131 yemek konsepti<\/strong> olarak d\u00fczenledim. Renkleri, g\u00f6rselleri ve i\u00e7erik ak\u0131\u015f\u0131n\u0131 kendi tasar\u0131m zevkime g\u00f6re ki\u015fiselle\u015ftirdim.<\/p>\n\n\n\n

        Bu sayede hem HTML\u2013CSS prati\u011fi yapm\u0131\u015f oldum hem de tasar\u0131m anlam\u0131nda daha \u00f6zg\u00fcn bir sonu\u00e7 elde ettim.<\/p>\n\n\n\n

        \n\n\n\n

        🧩 JavaScript K\u0131sm\u0131<\/strong><\/h2>\n\n\n\n

        JS taraf\u0131 olduk\u00e7a minimaldi. Yine de daha anla\u015f\u0131l\u0131r olmas\u0131 i\u00e7in kodlara a\u00e7\u0131klama sat\u0131rlar\u0131 ekledim.
        Men\u00fc ge\u00e7i\u015flerini y\u00f6neten temel mant\u0131k:<\/p>\n\n\n\n

          \n
        • Her men\u00fc butonunun bir sayfa i\u00e7eri\u011fine ba\u011fl\u0131 olmas\u0131,<\/li>\n\n\n\n
        • T\u0131klanan i\u00e7erikte .active<\/code> class\u0131n\u0131n aktif edilmesi.<\/li>\n<\/ul>\n\n\n\n

          Ayr\u0131ca baz\u0131 k\u0131s\u0131mlar\u0131 anlamak i\u00e7in ChatGPT\u2019den destek ald\u0131m ve ald\u0131\u011f\u0131m yan\u0131tlar\u0131 da projeye ekledim.<\/p>\n\n\n\n

          \n\n\n\n

          🎯 Sonu\u00e7: K\u00fc\u00e7\u00fck Ama \u00d6\u011fretici Bir Proje<\/strong><\/h2>\n\n\n\n

          Yo\u011fun JavaScript beklerken daha \u00e7ok CSS prati\u011fi yapm\u0131\u015f oldum; fakat bu proje bana:<\/p>\n\n\n\n

            \n
          • Katman mant\u0131\u011f\u0131n\u0131,<\/li>\n\n\n\n
          • position \u00f6zelliklerini,<\/li>\n\n\n\n
          • mobil uyumlu alt navbar yap\u0131s\u0131n\u0131,<\/li>\n\n\n\n
          • ikon entegrasyonunu<\/li>\n<\/ul>\n\n\n\n

            \u00e7ok daha iyi kavratt\u0131.<\/p>\n\n\n\n

            \u015eimdi s\u0131rada daha kapsaml\u0131 projeler var\u2026
            Yeni projelerde g\u00f6r\u00fc\u015fmek \u00fczere!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

            Bottom navbar, T\u00fcrk\u00e7esiyle Alt Navigasyon \u00c7ubu\u011fu, \u00f6zellikle mobil aray\u00fczlerde tercih edilen, 4\u20135 farkl\u0131 sayfaya y\u00f6nlendirme sunan pratik bir men\u00fc yap\u0131s\u0131d\u0131r. Bu proje, JavaScript \u00e7al\u0131\u015fma s\u00fcrecimdeki ikinci \u00e7al\u0131\u015fmam oldu. A\u00e7\u0131k\u00e7as\u0131 projeyi \u00f6nceden incelemi\u015f olsayd\u0131m muhtemelen ba\u015flamazd\u0131m; … <\/p>\n","protected":false},"author":2,"featured_media":619,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,35],"tags":[32,33,30],"class_list":["post-348","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-teknoloji","category-yazilim","tag-frontend","tag-js","tag-muhendislik","has-single-img"],"yoast_head":"\nBottom Navbar Nedir? HTML\u2013CSS ile H\u0131zl\u0131 Bir Proje Deneyimi - Nevist\u00e2n<\/title>\n<meta name=\"description\" content=\"Bottom navbar nedir? Mobil uyumlu alt navigasyon \u00e7ubu\u011fu tasarlad\u0131\u011f\u0131m HTML\u2013CSS projesinin detaylar\u0131n\u0131, ikon kullan\u0131m\u0131n\u0131 ve sayfa ge\u00e7i\u015f mant\u0131\u011f\u0131n\u0131 bu yaz\u0131da anlat\u0131yorum.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/nevistan.com\/?p=348\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bottom Navbar Nedir? HTML\u2013CSS ile H\u0131zl\u0131 Bir Proje Deneyimi - Nevist\u00e2n\" \/>\n<meta property=\"og:description\" content=\"Bottom navbar nedir? Mobil uyumlu alt navigasyon \u00e7ubu\u011fu tasarlad\u0131\u011f\u0131m HTML\u2013CSS projesinin detaylar\u0131n\u0131, ikon kullan\u0131m\u0131n\u0131 ve sayfa ge\u00e7i\u015f mant\u0131\u011f\u0131n\u0131 bu yaz\u0131da anlat\u0131yorum.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nevistan.com\/?p=348\" \/>\n<meta property=\"og:site_name\" content=\"Nevist\u00e2n\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-17T19:00:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-11T14:30:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/nevistan.com\/wp-content\/uploads\/2025\/06\/ChatGPT-Image-11-Ara-2025-17_29_59.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Zeynep\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zeynep\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/nevistan.com\/?p=348#article\",\"isPartOf\":{\"@id\":\"https:\/\/nevistan.com\/?p=348\"},\"author\":{\"name\":\"Zeynep\",\"@id\":\"https:\/\/nevistan.com\/#\/schema\/person\/9078babfa1e8f9e39f5ed3d3f2c1dd5a\"},\"headline\":\"Bottom Navbar Nedir? HTML\u2013CSS ile H\u0131zl\u0131 Bir Proje Deneyimi\",\"datePublished\":\"2025-06-17T19:00:15+00:00\",\"dateModified\":\"2025-12-11T14:30:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/nevistan.com\/?p=348\"},\"wordCount\":614,\"image\":{\"@id\":\"https:\/\/nevistan.com\/?p=348#primaryimage\"},\"thumbnailUrl\":\"https:\/\/nevistan.com\/wp-content\/uploads\/2025\/06\/ChatGPT-Image-11-Ara-2025-17_29_59.png\",\"keywords\":[\"frontend\",\"js\",\"m\u00fchendislik\"],\"articleSection\":[\"Teknoloji\",\"Yaz\u0131l\u0131m\"],\"inLanguage\":\"tr\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/nevistan.com\/?p=348\",\"url\":\"https:\/\/nevistan.com\/?p=348\",\"name\":\"Bottom Navbar Nedir? HTML\u2013CSS ile H\u0131zl\u0131 Bir Proje Deneyimi - Nevist\u00e2n\",\"isPartOf\":{\"@id\":\"https:\/\/nevistan.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/nevistan.com\/?p=348#primaryimage\"},\"image\":{\"@id\":\"https:\/\/nevistan.com\/?p=348#primaryimage\"},\"thumbnailUrl\":\"https:\/\/nevistan.com\/wp-content\/uploads\/2025\/06\/ChatGPT-Image-11-Ara-2025-17_29_59.png\",\"datePublished\":\"2025-06-17T19:00:15+00:00\",\"dateModified\":\"2025-12-11T14:30:28+00:00\",\"author\":{\"@id\":\"https:\/\/nevistan.com\/#\/schema\/person\/9078babfa1e8f9e39f5ed3d3f2c1dd5a\"},\"description\":\"Bottom navbar nedir? Mobil uyumlu alt navigasyon \u00e7ubu\u011fu tasarlad\u0131\u011f\u0131m HTML\u2013CSS projesinin detaylar\u0131n\u0131, ikon kullan\u0131m\u0131n\u0131 ve sayfa ge\u00e7i\u015f mant\u0131\u011f\u0131n\u0131 bu yaz\u0131da anlat\u0131yorum.\",\"breadcrumb\":{\"@id\":\"https:\/\/nevistan.com\/?p=348#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/nevistan.com\/?p=348\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/nevistan.com\/?p=348#primaryimage\",\"url\":\"https:\/\/nevistan.com\/wp-content\/uploads\/2025\/06\/ChatGPT-Image-11-Ara-2025-17_29_59.png\",\"contentUrl\":\"https:\/\/nevistan.com\/wp-content\/uploads\/2025\/06\/ChatGPT-Image-11-Ara-2025-17_29_59.png\",\"width\":1024,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/nevistan.com\/?p=348#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/nevistan.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bottom Navbar Nedir? HTML\u2013CSS ile H\u0131zl\u0131 Bir Proje Deneyimi\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/nevistan.com\/#website\",\"url\":\"https:\/\/nevistan.com\/\",\"name\":\"nevistan\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/nevistan.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/nevistan.com\/#\/schema\/person\/9078babfa1e8f9e39f5ed3d3f2c1dd5a\",\"name\":\"Zeynep\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/nevistan.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e99045f0d1ed2ff71d800cad20687a789d113cad32ae856766aa99f1b0d6d331?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e99045f0d1ed2ff71d800cad20687a789d113cad32ae856766aa99f1b0d6d331?s=96&d=mm&r=g\",\"caption\":\"Zeynep\"},\"sameAs\":[\"http:\/\/nevistan.com\"],\"url\":\"https:\/\/nevistan.com\/?author=2\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bottom Navbar Nedir? HTML\u2013CSS ile H\u0131zl\u0131 Bir Proje Deneyimi - Nevist\u00e2n","description":"Bottom navbar nedir? Mobil uyumlu alt navigasyon \u00e7ubu\u011fu tasarlad\u0131\u011f\u0131m HTML\u2013CSS projesinin detaylar\u0131n\u0131, ikon kullan\u0131m\u0131n\u0131 ve sayfa ge\u00e7i\u015f mant\u0131\u011f\u0131n\u0131 bu yaz\u0131da anlat\u0131yorum.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/nevistan.com\/?p=348","og_locale":"tr_TR","og_type":"article","og_title":"Bottom Navbar Nedir? HTML\u2013CSS ile H\u0131zl\u0131 Bir Proje Deneyimi - Nevist\u00e2n","og_description":"Bottom navbar nedir? Mobil uyumlu alt navigasyon \u00e7ubu\u011fu tasarlad\u0131\u011f\u0131m HTML\u2013CSS projesinin detaylar\u0131n\u0131, ikon kullan\u0131m\u0131n\u0131 ve sayfa ge\u00e7i\u015f mant\u0131\u011f\u0131n\u0131 bu yaz\u0131da anlat\u0131yorum.","og_url":"https:\/\/nevistan.com\/?p=348","og_site_name":"Nevist\u00e2n","article_published_time":"2025-06-17T19:00:15+00:00","article_modified_time":"2025-12-11T14:30:28+00:00","og_image":[{"width":1024,"height":1024,"url":"https:\/\/nevistan.com\/wp-content\/uploads\/2025\/06\/ChatGPT-Image-11-Ara-2025-17_29_59.png","type":"image\/png"}],"author":"Zeynep","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Zeynep","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/nevistan.com\/?p=348#article","isPartOf":{"@id":"https:\/\/nevistan.com\/?p=348"},"author":{"name":"Zeynep","@id":"https:\/\/nevistan.com\/#\/schema\/person\/9078babfa1e8f9e39f5ed3d3f2c1dd5a"},"headline":"Bottom Navbar Nedir? HTML\u2013CSS ile H\u0131zl\u0131 Bir Proje Deneyimi","datePublished":"2025-06-17T19:00:15+00:00","dateModified":"2025-12-11T14:30:28+00:00","mainEntityOfPage":{"@id":"https:\/\/nevistan.com\/?p=348"},"wordCount":614,"image":{"@id":"https:\/\/nevistan.com\/?p=348#primaryimage"},"thumbnailUrl":"https:\/\/nevistan.com\/wp-content\/uploads\/2025\/06\/ChatGPT-Image-11-Ara-2025-17_29_59.png","keywords":["frontend","js","m\u00fchendislik"],"articleSection":["Teknoloji","Yaz\u0131l\u0131m"],"inLanguage":"tr"},{"@type":"WebPage","@id":"https:\/\/nevistan.com\/?p=348","url":"https:\/\/nevistan.com\/?p=348","name":"Bottom Navbar Nedir? HTML\u2013CSS ile H\u0131zl\u0131 Bir Proje Deneyimi - Nevist\u00e2n","isPartOf":{"@id":"https:\/\/nevistan.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/nevistan.com\/?p=348#primaryimage"},"image":{"@id":"https:\/\/nevistan.com\/?p=348#primaryimage"},"thumbnailUrl":"https:\/\/nevistan.com\/wp-content\/uploads\/2025\/06\/ChatGPT-Image-11-Ara-2025-17_29_59.png","datePublished":"2025-06-17T19:00:15+00:00","dateModified":"2025-12-11T14:30:28+00:00","author":{"@id":"https:\/\/nevistan.com\/#\/schema\/person\/9078babfa1e8f9e39f5ed3d3f2c1dd5a"},"description":"Bottom navbar nedir? Mobil uyumlu alt navigasyon \u00e7ubu\u011fu tasarlad\u0131\u011f\u0131m HTML\u2013CSS projesinin detaylar\u0131n\u0131, ikon kullan\u0131m\u0131n\u0131 ve sayfa ge\u00e7i\u015f mant\u0131\u011f\u0131n\u0131 bu yaz\u0131da anlat\u0131yorum.","breadcrumb":{"@id":"https:\/\/nevistan.com\/?p=348#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nevistan.com\/?p=348"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/nevistan.com\/?p=348#primaryimage","url":"https:\/\/nevistan.com\/wp-content\/uploads\/2025\/06\/ChatGPT-Image-11-Ara-2025-17_29_59.png","contentUrl":"https:\/\/nevistan.com\/wp-content\/uploads\/2025\/06\/ChatGPT-Image-11-Ara-2025-17_29_59.png","width":1024,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/nevistan.com\/?p=348#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/nevistan.com\/"},{"@type":"ListItem","position":2,"name":"Bottom Navbar Nedir? HTML\u2013CSS ile H\u0131zl\u0131 Bir Proje Deneyimi"}]},{"@type":"WebSite","@id":"https:\/\/nevistan.com\/#website","url":"https:\/\/nevistan.com\/","name":"nevistan","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nevistan.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":"Person","@id":"https:\/\/nevistan.com\/#\/schema\/person\/9078babfa1e8f9e39f5ed3d3f2c1dd5a","name":"Zeynep","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/nevistan.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e99045f0d1ed2ff71d800cad20687a789d113cad32ae856766aa99f1b0d6d331?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e99045f0d1ed2ff71d800cad20687a789d113cad32ae856766aa99f1b0d6d331?s=96&d=mm&r=g","caption":"Zeynep"},"sameAs":["http:\/\/nevistan.com"],"url":"https:\/\/nevistan.com\/?author=2"}]}},"_links":{"self":[{"href":"https:\/\/nevistan.com\/index.php?rest_route=\/wp\/v2\/posts\/348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nevistan.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nevistan.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nevistan.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nevistan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=348"}],"version-history":[{"count":2,"href":"https:\/\/nevistan.com\/index.php?rest_route=\/wp\/v2\/posts\/348\/revisions"}],"predecessor-version":[{"id":539,"href":"https:\/\/nevistan.com\/index.php?rest_route=\/wp\/v2\/posts\/348\/revisions\/539"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nevistan.com\/index.php?rest_route=\/wp\/v2\/media\/619"}],"wp:attachment":[{"href":"https:\/\/nevistan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nevistan.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nevistan.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}