{"id":18496,"date":"2025-04-18T12:30:15","date_gmt":"2025-04-18T09:30:15","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/"},"modified":"2025-04-18T12:30:15","modified_gmt":"2025-04-18T09:30:15","slug":"tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/","title":{"rendered":"Tailwind CSS ile Animasyonlu Geni\u015fleyen Arama \u00c7ubu\u011fu"},"content":{"rendered":"<p><body><\/p>\n<p>Tailwind CSS ile Animasyonlu Geni\u015fleyen Arama \u00c7ubu\u011fu<\/p>\n<p>Merhaba! Fatih Soysal olarak,  bug\u00fcn sizlere Tailwind CSS kullanarak etkileyici bir animasyonlu geni\u015fleyen arama \u00e7ubu\u011fu nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim.  Bu  \u00e7al\u0131\u015fma, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek ve web sitenize modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in m\u00fckemmel bir yoldur.  \u00d6ncelikle, gerekli HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m.<\/p>\n<h2>HTML Yap\u0131s\u0131<\/h2>\n<pre><code class=\"language-html\">\n&lt;div class=\"relative w-16\">\n  &lt;button class=\"absolute top-1\/2 -translate-y-1\/2 left-0 p-2 rounded-l-md bg-gray-200 hover:bg-gray-300 focus:outline-none\"&gt;\n    &lt;svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;\n      &lt;path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\" \/&gt;\n    &lt;\/svg&gt;\n  &lt;\/button&gt;\n  &lt;input type=\"text\" class=\"w-full pl-12 pr-2 py-2 border border-gray-300 rounded-r-md focus:outline-none focus:border-blue-500 transition duration-300 ease-in-out\" placeholder=\"Ara...\"&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>Bu kod blo\u011fu,  arama \u00e7ubu\u011funun temel yap\u0131s\u0131n\u0131 olu\u015fturur.  Bir d\u00fc\u011fme ve bir metin giri\u015f alan\u0131 kullan\u0131lm\u0131\u015ft\u0131r.  Tailwind CSS s\u0131n\u0131flar\u0131,  stili ve yerle\u015fimi kontrol etmek i\u00e7in kullan\u0131l\u0131r.  Ayr\u0131ca,  bu kod  g\u00f6rsel bir arama simgesi i\u00e7erir.<\/p>\n<h2>Tailwind CSS Stili<\/h2>\n<p> \u015eimdi,  olu\u015fturdu\u011fumuz HTML yap\u0131s\u0131na  Tailwind CSS s\u0131n\u0131flar\u0131n\u0131 ekleyerek daha geli\u015fmi\u015f bir stil uygulayal\u0131m.  \u00d6nemli olan k\u0131s\u0131m,  animasyonun uygulanaca\u011f\u0131  transition ve duration s\u0131n\u0131flar\u0131d\u0131r. Bunlar,  arama \u00e7ubu\u011funun geni\u015flemesini yumu\u015fak ve ak\u0131c\u0131 hale getirir. Ek olarak,  focus  s\u0131n\u0131f\u0131  kullan\u0131c\u0131 odakland\u0131\u011f\u0131nda  arama \u00e7ubu\u011funun  \u00e7er\u00e7evesinin rengini de\u011fi\u015ftirir.  Bu, kullan\u0131c\u0131 deneyimini  daha etkile\u015fimli yapar.  Arama \u00e7ubu\u011fu ayr\u0131ca,  g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc iyile\u015ftirmek i\u00e7in  rounded ve border s\u0131n\u0131flar\u0131n\u0131 kullan\u0131r.<\/p>\n<p>Bununla birlikte,  daha geli\u015fmi\u015f animasyonlar i\u00e7in,  JavaScript veya CSS animasyonlar\u0131 kullanman\u0131z gerekebilir.  \u00d6rne\u011fin,  arama \u00e7ubu\u011funun kaybolma veya ortaya \u00e7\u0131kma animasyonunu daha da \u00f6zelle\u015ftirebilirsiniz.  Bu,  projenizin \u00f6zel ihtiya\u00e7lar\u0131na ba\u011fl\u0131 olarak de\u011fi\u015febilir.<\/p>\n<p>Ayr\u0131ca,  aray\u00fcz\u00fcn genel temas\u0131na uymas\u0131 i\u00e7in renkleri ve yaz\u0131 tiplerini de\u011fi\u015ftirebilirsiniz. Daha detayl\u0131 bilgi i\u00e7in  <a href=\"https:\/\/tailwindcss.com\/\">Tailwind CSS resmi dok\u00fcman\u0131na<\/a> g\u00f6z atabilirsiniz.<\/p>\n<h2>JavaScript ile Geli\u015ftirme (Opsiyonel)<\/h2>\n<p>Daha karma\u015f\u0131k animasyonlar veya etkile\u015fimler i\u00e7in JavaScript kullanabilirsiniz.  \u00d6rne\u011fin,  arama \u00e7ubu\u011funun geni\u015flemesini veya daralmas\u0131n\u0131 JavaScript ile kontrol edebilir,  kullan\u0131c\u0131n\u0131n girdisine g\u00f6re dinamik olarak davran\u0131\u015f\u0131n\u0131 de\u011fi\u015ftirebilirsiniz.  Bu, geli\u015fmi\u015f  kullan\u0131c\u0131 etkile\u015fimleri i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>Bu makalede,  Tailwind CSS kullanarak basit fakat etkileyici bir animasyonlu geni\u015fleyen arama \u00e7ubu\u011fu olu\u015fturmay\u0131 \u00f6\u011frendiniz.  Bu teknik,  web sitenizin  kullan\u0131c\u0131 deneyimini iyile\u015ftirmenize yard\u0131mc\u0131 olur.  Umar\u0131m bu makale faydal\u0131 olmu\u015ftur.  Daha fazla web geli\u015ftirme ipucu ve \u00f6\u011fretici i\u00e7in  <a href=\"https:\/\/fatihsoysal.com\">fatihsoysal.com<\/a> sitesini ziyaret edebilirsiniz.<\/p>\n<p>Ba\u015fka bir faydal\u0131 kaynak olarak, orijinal makalenin \u0130ngilizce versiyonuna  <a href=\"https:\/\/dev.to\/mike_andreuzza\/create-an-animated-expanding-search-bar-with-tailwind-css-462g\">buradan<\/a> ula\u015fabilirsiniz.<\/p>\n<p>#Etiketler: Tailwind CSS, Animasyon, Arama \u00c7ubu\u011fu, Geni\u015fleyen Arama \u00c7ubu\u011fu, Web Geli\u015ftirme, CSS Animasyonlar\u0131, Kullan\u0131c\u0131 Deneyimi, UI, UX, JavaScript,  HTML<\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Tailwind CSS ile Animasyonlu Geni\u015fleyen Arama \u00c7ubu\u011fu Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere Tailwind CSS kullanarak etkileyici bir&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-18496","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tailwind CSS ile Animasyonlu Geni\u015fleyen Arama \u00c7ubu\u011fu<\/title>\n<meta name=\"description\" content=\"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere Tailwind CSS kullanarak etkileyici bir animasyonlu geni\u015fleyen arama \u00e7ubu\u011fu nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu \u00e7al\u0131\u015fma, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek ve web sitenize modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in m\u00fckemmel bir yoldur. \u00d6ncelikle, gerekli HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tailwind CSS ile Animasyonlu Geni\u015fleyen Arama \u00c7ubu\u011fu\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere Tailwind CSS kullanarak etkileyici bir animasyonlu geni\u015fleyen arama \u00e7ubu\u011fu nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu \u00e7al\u0131\u015fma, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek ve web sitenize modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in m\u00fckemmel bir yoldur. \u00d6ncelikle, gerekli HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-18T09:30:15+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\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:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Tailwind CSS ile Animasyonlu Geni\u015fleyen Arama \u00c7ubu\u011fu\",\"datePublished\":\"2025-04-18T09:30:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/\"},\"wordCount\":461,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/\",\"name\":\"Tailwind CSS ile Animasyonlu Geni\u015fleyen Arama \u00c7ubu\u011fu\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-04-18T09:30:15+00:00\",\"description\":\"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere Tailwind CSS kullanarak etkileyici bir animasyonlu geni\u015fleyen arama \u00e7ubu\u011fu nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu \u00e7al\u0131\u015fma, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek ve web sitenize modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in m\u00fckemmel bir yoldur. \u00d6ncelikle, gerekli HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tailwind CSS ile Animasyonlu Geni\u015fleyen Arama \u00c7ubu\u011fu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Tailwind CSS ile Animasyonlu Geni\u015fleyen Arama \u00c7ubu\u011fu","description":"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere Tailwind CSS kullanarak etkileyici bir animasyonlu geni\u015fleyen arama \u00e7ubu\u011fu nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu \u00e7al\u0131\u015fma, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek ve web sitenize modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in m\u00fckemmel bir yoldur. \u00d6ncelikle, gerekli HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m.","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:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/","og_locale":"tr_TR","og_type":"article","og_title":"Tailwind CSS ile Animasyonlu Geni\u015fleyen Arama \u00c7ubu\u011fu","og_description":"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere Tailwind CSS kullanarak etkileyici bir animasyonlu geni\u015fleyen arama \u00e7ubu\u011fu nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu \u00e7al\u0131\u015fma, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek ve web sitenize modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in m\u00fckemmel bir yoldur. \u00d6ncelikle, gerekli HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m.","og_url":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-04-18T09:30:15+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Tailwind CSS ile Animasyonlu Geni\u015fleyen Arama \u00c7ubu\u011fu","datePublished":"2025-04-18T09:30:15+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/"},"wordCount":461,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/","url":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/","name":"Tailwind CSS ile Animasyonlu Geni\u015fleyen Arama \u00c7ubu\u011fu","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-04-18T09:30:15+00:00","description":"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere Tailwind CSS kullanarak etkileyici bir animasyonlu geni\u015fleyen arama \u00e7ubu\u011fu nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu \u00e7al\u0131\u015fma, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek ve web sitenize modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in m\u00fckemmel bir yoldur. \u00d6ncelikle, gerekli HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-ile-animasyonlu-genisleyen-arama-cubugu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tailwind CSS ile Animasyonlu Geni\u015fleyen Arama \u00c7ubu\u011fu"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/18496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=18496"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/18496\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=18496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=18496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=18496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}