{"id":297,"date":"2013-10-17T14:31:53","date_gmt":"2013-10-17T14:31:53","guid":{"rendered":"https:\/\/www.templatemonster.com\/tr\/blog\/?p=297"},"modified":"2020-02-27T10:21:35","modified_gmt":"2020-02-27T10:21:35","slug":"jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/","title":{"rendered":"jQuery ile Slide Kay\u0131t Formu Panel Kodu Nas\u0131l Olu\u015fturulur"},"content":{"rendered":"

Bir Giri\u015f\/Kay\u0131t Paneli<\/strong> d\u00fczeni olu\u015fturmak i\u00e7in pek \u00e7ok farkl\u0131 kullan\u0131c\u0131 aray\u00fcz\u00fc teknikleri bulunmaktad\u0131r. Benim en sevdi\u011fim yakla\u015f\u0131mlardan birisi tek bir sayfada iki formu i\u00e7eren ve her ikisinin aras\u0131nda bir navigasyon sunmakt\u0131r. B\u00fcy\u00fck dropdown veya pop-up kal\u0131c\u0131 pencere i\u015fe yaraya bilir ve ayr\u0131ca s\u00fcrg\u00fcl\u00fc panellerde \u00f6rnek verilebilir.<\/p>\n

Bu e\u011fitimde ben jQuery kullanarak tek bir sayfa i\u00e7erisinde d\u00f6nen iki s\u00fcrg\u00fcl\u00fc formun nas\u0131l in\u015fa edilebilece\u011fini sizlere g\u00f6stermek istiyorum. Etkisi \u00e7ok fazla kod gerektirmez ve do\u011fal olarak \u00e7o\u011funlukla tekrarlamaz.\u00a0Bunun ayn\u0131 zamanda JavaScript etkin olan ak\u0131ll\u0131 telefonlar ve di\u011fer mobil taray\u0131c\u0131larda \u00e7al\u0131\u015fmas\u0131 gerekir. \u00a0Kullan\u0131c\u0131 deneyimi i\u00e7in do\u011frudan geli\u015ftirilebilir ve ola\u011fan\u00fcst\u00fc \u00f6zellikleri ile kendi web sitelerinizde uygulamak i\u00e7in dikkate de\u011fer.<\/p>\n

Canl\u0131 Demo<\/a>\u00a0\u2013\u00a0Kaynak Kodunu Y\u00fckleyin<\/a><\/p>\n

\u015eimdi bir index.html sayfas\u0131 olarak ba\u015flayal\u0131m. \u00a0Ben projelerim \u00e7o\u011funda olu\u015fturdu\u011fum kullan\u0131m\u0131 basit bir HTML5 \u015fablonu olu\u015fturuyorum. A\u015fa\u011f\u0131dan bunu kopyalayabilirsiniz:<\/p>\n

\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22<\/pre>\n<\/td>\n
\n
<!doctype html>\r\n<html lang=\"en-US\">\r\n<head>\r\n  <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\">\r\n  <title>Sliding Registration Panel Demo<\/title>\r\n  <meta name=\"author\" content=\"Jake Rocheleau\">\r\n  <link rel=\"shortcut icon\" href=\"http:\/\/www.templatemonster.com\/favicon.ico\">\r\n  <link rel=\"icon\" href=\"http:\/\/www.templatemonster.com\/favicon.ico\">\r\n  <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n  <link rel=\"stylesheet\" type=\"text\/css\" href=\"http:\/\/fonts.googleapis.com\/css?family=ABeeZee:400,400italic\">\r\n  <script type=\"text\/javascript\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.2\/jquery<\/a>.min.js\"><\/script>\r\n  <script type=\"text\/javascript<\/a>\" src=\"formslider.js\"><\/script>\r\n<!--[if lt IE 9]>\r\n  <script src=\"http:\/\/html5shiv.googlecode.com\/svn\/trunk\/html5<\/a>.js\"><\/script>\r\n<![endif]-->\r\n<\/head>\r\n\r\n<body>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Header k\u0131sm\u0131na bir ka\u00e7 yerel dosya ekledi\u011fimin fark\u0131na varabilirsiniz. \u00a0\u00d6ncelikle sayfam\u0131zda tasar\u0131mlar\u0131m\u0131z\u0131 d\u00fczenleyece\u011fimiz bir styles.css dosyas\u0131 olu\u015ftural\u0131m. \u015eimdi o zaman baz\u0131 \u00f6zel sayfa metin i\u00e7in harici bir Google Web Fontlar\u0131n\u0131 sitil sayfam\u0131za dahil ettik. \u00a0 Kenara HTML5shiv ve jQuery k\u00fct\u00fcphanelerini ve di\u011fer referans formslider.js<\/strong> isimli beti\u011fi dahil edip ekledik.<\/p>\n
Daha sonra detayl\u0131 olarak bu dosya i\u00e7erisine depolanan t\u00fcm jQuery kodu ge\u00e7erli olacakt\u0131r. \u00a0\u015eimdi \u00a0body sayfam\u0131za inelim ve kodlar\u0131m\u0131z\u0131n nas\u0131l olmas\u0131 gerekti\u011fini inceleyelim.<\/p>\n
HTML Body Elemanlar\u0131<\/strong><\/p>\n
Yani nihai hedef, tek bir container i\u00e7inde iki \u015fekilde yerle\u015ftirilmektedir. \u00a0\u0130lk olarak giri\u015f formu oldu\u011fundan ve g\u00f6r\u00fcnt\u00fclenen sa\u011f sayfa y\u00fcklenmelidir. \u00a0Sonra ba\u011flant\u0131ya t\u0131kland\u0131\u011f\u0131nda giri\u015f formunun sola do\u011fru kayd\u0131rmak ve sa\u011f taraftan kay\u0131t formunu getirmek gerekmektedir.<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n35\r\n36\r\n37\r\n38\r\n39\r\n40\r\n41\r\n42\r\n43\r\n44\r\n45\r\n46\r\n47\r\n48<\/pre>\n<\/td>\n
\n
<div id=\"w\">\r\n<h1>jQuery Sliding Login\/Registration Form<\/h1>\r\n\r\n<div id=\"page\">\r\n  <div id=\"content-login\">\r\n\t<h2>Login to the Site<\/h2>\r\n\t<div class=\"content\">\r\n\t  <a href=\"#\" class=\"slidelink\" id=\"showregister\">Don't Have An Account? <\/a>\r\n\t  <form id=\"login\" name=\"login\" action=\"#\" method=\"post\">\r\n\t\t<label for=\"email\">Email Address<\/label>\r\n\t\t<input type=\"email\" name=\"email\" id=\"email\" tabindex=\"1\" autocomplete=\"off\">\r\n\r\n\t\t<label for=\"password\">Password<\/label>\r\n\t\t<input type=\"password\" name=\"password\" id=\"password\" tabindex=\"2\" autocomplete=\"off\">\r\n\r\n\t\t<input type=\"submit\" name=\"loginbtn\" id=\"loginbtn\" value=\"Login\" tabindex=\"3\">\r\n\t  <\/form>\r\n\t<\/div>\r\n  <\/div><!-- \/end #content-login -->\r\n\r\n  <div id=\"content-register\">\r\n\t<h2>Register a New Account<\/h2>\r\n\t<div>\r\n\t<a href=\"#\" id=\"showlogin\">\u2190 Already Have an Account? Login Now!<\/a>\r\n\t<form id=\"register\" name=\"register\" action=\"#\" method=\"post\">\r\n\t  <label for=\"fname\">First Name<\/label>\r\n\t  <input type=\"text\" name=\"fname\" id=\"fname\" tabindex=\"4\" autocomplete=\"off\">\r\n\r\n\t  <label for=\"lname\">Last Name<\/label>\r\n\t  <input type=\"text\" name=\"lname\" id=\"lname\" tabindex=\"5\" autocomplete=\"off\">\r\n\r\n\t  <label for=\"newemail\">Email Address<\/label>\r\n\t  <input type=\"email\" name=\"newemail\" id=\"newemail\" tabindex=\"6\" autocomplete=\"off\">\r\n\r\n\t  <label for=\"password1\">Password<\/label>\r\n\t  <input type=\"password\" name=\"password1\" id=\"password1\" tabindex=\"7\" autocomplete=\"off\">\r\n\r\n\t  <label for=\"password2\">Confirm Password<\/label>\r\n\t  <input type=\"password\" name=\"password2\" id=\"password2\" tabindex=\"8\" autocomplete=\"off\">\r\n\r\n\t  <input type=\"submit\" name=\"registerbtn\" id=\"registerbtn\" value=\"Sign Up\" tabindex=\"9\">\r\n\t<\/form>\r\n\t<\/div>\r\n  <\/div><!-- \/end #content-register -->\r\n\r\n<\/div><!-- \/end #page -->\r\n<\/div><!-- \/end #w --><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
B\u00fct\u00fcn wrapper container de dahil sayfa \u00fczerine odaklanmal\u0131d\u0131r \u00a0#page div<\/strong>. Ben formu i\u00e7erisinde b\u00f6ld\u00fcm \u00a0#content-login<\/strong>\u00a0ve\u00a0#content-register<\/strong>. D\u0131\u015f sayfa kab\u0131na position: relative; vermeliyim \u00a0ve absolute pozisyonlar\u0131 ile iki wrapper \u00a0ekledim.<\/p>\n
\u00d6ncelikle sol giri\u015f formunun \u00fcst tarafta olmas\u0131n\u0131 istiyorum ve sayfa y\u00fcklendi\u011finde hemen g\u00f6r\u00fcnt\u00fclenmesini istiyorum.<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27<\/pre>\n<\/td>\n
\n
\/* page structure *\/\r\n#w { width: 880px; margin: 0 auto; padding-top: 25px; }\r\n\r\n#page { \r\n  display: block;\r\n  position: relative;\r\n  overflow: hidden;\r\n  height: auto;\r\n  background: #fff; \r\n  box-sizing: border-box;\r\n  -webkit-box-shadow: 0 0 12px 0 rgba(150, 180, 210, .9);\r\n  -moz-box-shadow: 0 0 12px 0 rgba(150, 180, 210, .9);\r\n  box-shadow: 0 0 12px 0 rgba(150, 180, 210, .9);\r\n}\r\n.content {\r\n  box-sizing: border-box;\r\n  width: 600px;\r\n  margin: 0 auto;\r\n  padding-bottom: 30px;\r\n  padding: 5px 15px;\r\n  padding-top: 25px;\r\n}\r\n\r\n\/* inner page layouts *\/\r\n#content-login { display: block; position: relative; width: 100%; }\r\n\r\n#content-register { display: none; width: 100%; position: absolute; top: 0; left: 880px; }<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Mevcut olan plan jQuery\u2019s\u00a0.animate()<\/strong>\u00a0methodu ile bir ka\u00e7 saniye i\u00e7erisinde g\u00fcncelleyerek animasyon y\u00f6ntemi ile \u00e7al\u0131\u015ft\u0131rmakt\u0131r. \u00a0 Mutlak konumland\u0131rma kullan\u0131larak bir y\u00fcz ile kar\u015f\u0131lamak gerekir veya i\u00e7erik ta\u015f\u0131ma orijinal paketine sahip olmad\u0131\u011f\u0131 anlam\u0131na gelir.<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25<\/pre>\n<\/td>\n
\n
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  font-size: 100%;\r\n  font: inherit;\r\n  vertical-align: baseline;\r\n  outline: none;\r\n}\r\nhtml { height: 101%; }\r\nbody { background: #e8eff7; font-size: 62.5%; line-height: 1; padding-bottom: 55px; font-family: Arial, Geneva, sans-serif; }\r\n\r\narticle, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }\r\nol, ul { list-style: none; }\r\n\r\nblockquote, q { quotes: none; }\r\nblockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }\r\nstrong { font-weight: bold; } \r\n\r\na { text-decoration: none; color: #4983bd; }\r\na:hover { text-decoration: underline; }\r\n\r\ntable { border-collapse: collapse; border-spacing: 0; }\r\nimg { border: 0; max-width: 100%; }\r\ninput { outline: none; }<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Ayr\u0131ca not eklemek istiyorum benim belgemde CSS s\u0131n\u0131flar\u0131 da vard\u0131r. Eric Meyer'in CSS i s\u0131f\u0131rlar \u00f6zel \u015fablon olu\u015fturabilmem i\u00e7in \u00e7ift ekstra \u00f6zellikleri de ekledim. \u00a0Bu Firefox, IE9, Crhome, Opera ve Safari dahil t\u00fcm modern marka varsay\u0131lan taray\u0131c\u0131larda i\u015flenmesi i\u00e7in en h\u0131zl\u0131 yoldur. E\u011fer herhangi bir web sitesi sayfas\u0131nda bunlar\u0131 denemek istiyorsan\u0131z yukar\u0131daki kodlar\u0131 alabilirsiniz.<\/p>\n
Dinamik JQuery Animasyonlar<\/strong><\/p>\n
\u015eimdi bizim animasyonlar\u0131m\u0131z ile nihai etkiyi olu\u015fturabilmemiz gerekiyor. \u00d6ncelikle bir formslider.js dosyas\u0131 olu\u015fturmam\u0131z i\u00e7in tipik bir kurulum gerekmektedir\u00a0$(document).ready() clause<\/strong>. DOm i\u015flemi \u00a0bitene kadar bu t\u00fcm JavaScript kodu devre d\u0131\u015f\u0131 olarak devam etmektedir.<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9<\/pre>\n<\/td>\n
\n
$(document).ready(function(){\r\n  $(\"form\").submit(function(e) {\r\n    e.preventDefault();\r\n  });\r\n\r\n  var clogin = $(\"#content-login\");\r\n  var cregister = $(\"#content-register\");\r\n\r\n});<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Biz i\u015flem i\u00e7in kodu ilk blok sayfas\u0131na g\u00f6nderdi\u011fimizde herhangi bir bi\u00e7ime kar\u015f\u0131 denetlemeliyiz. Benim demo \u00f6rne\u011fimde hash(#) i\u00e7in eylem niteli\u011fi kurdum, y\u00fcklemek i\u00e7in herhangi bir arka uc komut dosyas\u0131na gerek yok.<\/p>\n
Fakat bunun yerine URL i\u00e7erisinde hash sembol\u00fc i\u00e7erisine y\u00fckleme yaparak tamamen form eylemini durdurabilirsiniz. \u00a0E\u011fer form d\u00fczg\u00fcn \u015fekilde g\u00f6nderimini yapmak istiyorsan\u0131z \u00a0e.preventDefault()<\/strong>\u00a0y\u00f6ntemini ile ilgili 3. sat\u0131rdaki kodu kald\u0131rmak gerekti\u011fini anlay\u0131n. Demo \u00f6rne\u011fi asl\u0131nda harika bir \u00e7\u00f6z\u00fcm do\u011fru \u00e7al\u0131\u015fmas\u0131 i\u00e7in formlar gerekiyor ise \u00e7al\u0131\u015fmayacakt\u0131r.<\/p>\n
Di\u011fer iki de\u011fi\u015fken sadece h\u0131zl\u0131 giri\u015f ba\u015fvurular ve kay\u0131t formu container divleri olan. \u00a0Biz jQuery de\u011fi\u015fken se\u00e7iciler kullanarak ve mekan yazarak bir \u00e7o\u011funu kaydedebiliriz, \u00e7\u00fcnk\u00fc bu kodlar\u0131 daha k\u0131sa tutacakt\u0131r.<\/p>\n
On\/Off \u00a0Fonksiyonlar\u0131n\u0131n Yap\u0131s\u0131<\/strong><\/p>\n
\u015eimdi jQuery kodunun geri kalan\u0131 bu iki animasyon etraf\u0131nda olacak. Kullan\u0131c\u0131 #showregister kimli\u011fi ile kay\u0131t ba\u011flant\u0131s\u0131na t\u0131klad\u0131\u011f\u0131 zaman ilk i\u015flevini \u00e7a\u011f\u0131racakt\u0131r.<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18<\/pre>\n<\/td>\n
\n
\/* display the register page *\/\r\n$(\"#showregister\").on(\"click\", function(e){\r\n  e.preventDefault();\r\n  var newheight = cregister.height();\r\n  $(cregister).css(\"display\", \"block\");\r\n\r\n  $(clogin).stop().animate({\r\n    \"left\": \"-880px\"\r\n  }, 800, function(){ \/* callback *\/ });\r\n\r\n  $(cregister).stop().animate({\r\n    \"left\": \"0px\"\r\n  }, 800, function(){ $(clogin).css(\"display\", \"none\"); });\r\n\r\n  $(\"#page\").stop().animate({\r\n    \"height\": newheight+\"px\"\r\n  }, 550, function(){ \/* callback *\/ });\r\n});<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Bu linke t\u0131kland\u0131\u011f\u0131 zaman yeni bir fonksiyon i\u00e7erisinde click olay\u0131na ge\u00e7mek i\u00e7in \u00e7a\u011f\u0131r\u0131r\u00a0e.preventDefault()<\/strong>; y\u00fcklenmesini href de\u011ferine t\u0131klanmas\u0131 i\u00e7in. E\u011fer \u00e7apa ba\u011flant\u0131lar\u0131n\u0131 bu yana b\u0131rakt\u0131rabilir iseniz bu kod sat\u0131r\u0131 i\u00e7in yeni bir sayfaya ge\u00e7i\u015fte y\u00fck olmayaca\u011f\u0131n\u0131 g\u00f6sterir -- ancak son \u00e7are olarak yeni bir kay\u0131t sayfas\u0131 y\u00fcklemek i\u00e7in href de\u011ferini ayarlayabilirsiniz. Daha sonra JavaScript etkin olmayan kullan\u0131c\u0131lar kay\u0131t formunu her iki \u015fekilde y\u00f6nlendirebilecek siniz.<\/p>\n
Ba\u015fka bir problem ise containerin y\u00fcksekli\u011fi. A\u00e7\u0131k\u00e7as\u0131 kay\u0131t formunun y\u00fcksekli\u011fi giri\u015f formuna g\u00f6re daha y\u00fcksek olacak. \u00a0Bu animasyon oldu\u011fu zaman i\u00e7erisinde ta\u015facak gibi dursa da bunu container den ayarlayabiliriz.<\/p>\n
\u0130lk iki animasyon sol pozisyonlar\u0131n\u0131 bizim containerin \u00fczerindeki kay\u0131t formuna 880px olarak bir hareket sa\u011flay\u0131n. Ayr\u0131ca kay\u0131t panelinden sonra arama y\u00f6ntemi s\u00fcrg\u00fcy\u00fc bitirmek i\u00e7in giri\u015f divi de\u015fi\u015ftirmelisiniz display: none; \u00a0\u015fimdi 3 animasyonu 550 milisaniye biraz daha h\u0131zl\u0131 sayfa y\u00fcksekli\u011fine gelir.<\/p>\n
Her \u015feyi bu tek fonksiyon ile yapabilirsiniz, Js kodlar\u0131na a\u015fina iseniz kesinlikle sa\u011flam kavrayacaks\u0131n\u0131z. \u00a0Baz\u0131 numaralar ile de\u011fi\u015fkenler ile benzer bir kod yap\u0131s\u0131 kullanarak daha farkl\u0131 giri\u015f formu elde etmek i\u00e7in kullanabilirsiniz. Biz sadece \u015fu anda #showlogin ba\u011flant\u0131s\u0131n\u0131 hedefliyoruz.<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17<\/pre>\n<\/td>\n
\n
\/* display the login page *\/\r\n$(\"#showlogin\").on(\"click\", function(e){\r\n  e.preventDefault();\r\n  var newheight = clogin.height();\r\n  $(clogin).css(\"display\", \"block\");\r\n\r\n  $(clogin).stop().animate({\r\n    \"left\": \"0px\"\r\n  }, 800, function() { \/* callback *\/ });\r\n  $(cregister).stop().animate({\r\n    \"left\": \"880px\"\r\n  }, 800, function() { $(cregister).css<\/a>(\"display\", \"none\"); });\r\n\r\n  $(\"#page\").stop().animate({\r\n    \"height\": newheight+\"px\"\r\n  }, 550, function(){ \/* callback *\/ });\r\n});<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Canl\u0131 Demo<\/a>\u00a0\u2013\u00a0Kaynak Kodunu Y\u00fckleyin<\/a><\/p>\n
\u00a0<\/strong><\/p>\n
\n","protected":false},"excerpt":{"rendered":"
Bir Giri\u015f\/Kay\u0131t Paneli d\u00fczeni olu\u015fturmak i\u00e7in pek \u00e7ok farkl\u0131 kullan\u0131c\u0131 aray\u00fcz\u00fc teknikleri bulunmaktad\u0131r. Benim en sevdi\u011fim yakla\u015f\u0131mlardan birisi tek bir sayfada iki formu i\u00e7eren ve her ikisinin aras\u0131nda bir navigasyon sunmakt\u0131r. B\u00fcy\u00fck dropdown veya pop-up kal\u0131c\u0131 pencere i\u015fe yaraya bilir ve ayr\u0131ca s\u00fcrg\u00fcl\u00fc panellerde \u00f6rnek verilebilir. Bu e\u011fitimde ben jQuery kullanarak tek bir sayfa i\u00e7erisinde […]<\/p>\n","protected":false},"author":1805522,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[],"yoast_head":"\njQuery ile Slide Kay\u0131t Formu Panel Kodu Nas\u0131l Olu\u015fturulur<\/title>\n<meta name=\"description\" content=\"jQuery teknolojilerini takip ediyor ve ilgileniyorsan\u0131z sizler i\u00e7in haz\u0131rlanm\u0131\u015f m\u00fckemmel bir Slide form eklentisi, kolayca indirin ve kullan\u0131n.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery ile Slide Kay\u0131t Formu Panel Kodu Nas\u0131l Olu\u015fturulur\" \/>\n<meta property=\"og:description\" content=\"jQuery teknolojilerini takip ediyor ve ilgileniyorsan\u0131z sizler i\u00e7in haz\u0131rlanm\u0131\u015f m\u00fckemmel bir Slide form eklentisi, kolayca indirin ve kullan\u0131n.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog TemplateMonster T\u00fcrkiye\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonsterTurkey\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-10-17T14:31:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-27T10:21:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2020\/03\/TemplateMonster.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"506\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Bar\u0131\u015f Hep\u00e7orman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@templatemonster\" \/>\n<meta name=\"twitter:site\" content=\"@templatemonster\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bar\u0131\u015f Hep\u00e7orman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/\"},\"author\":{\"name\":\"Bar\u0131\u015f Hep\u00e7orman\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/1846793b4f115999bfd6cc63b4d71815\"},\"headline\":\"jQuery ile Slide Kay\u0131t Formu Panel Kodu Nas\u0131l Olu\u015fturulur\",\"datePublished\":\"2013-10-17T14:31:53+00:00\",\"dateModified\":\"2020-02-27T10:21:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/\"},\"wordCount\":1013,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/#organization\"},\"articleSection\":[\"jQuery\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/\",\"url\":\"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/\",\"name\":\"jQuery ile Slide Kay\u0131t Formu Panel Kodu Nas\u0131l Olu\u015fturulur\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/#website\"},\"datePublished\":\"2013-10-17T14:31:53+00:00\",\"dateModified\":\"2020-02-27T10:21:35+00:00\",\"description\":\"jQuery teknolojilerini takip ediyor ve ilgileniyorsan\u0131z sizler i\u00e7in haz\u0131rlanm\u0131\u015f m\u00fckemmel bir Slide form eklentisi, kolayca indirin ve kullan\u0131n.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/tr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"jQuery ile Slide Kay\u0131t Formu Panel Kodu Nas\u0131l Olu\u015fturulur\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#website\",\"url\":\"https:\/\/monsterspost.com\/tr\/\",\"name\":\"Blog TemplateMonster T\u00fcrkiye\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/tr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#organization\",\"name\":\"MonsterPost T\u00fcrkiye\",\"url\":\"https:\/\/monsterspost.com\/tr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost T\u00fcrkiye\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/tr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/\",\"https:\/\/www.facebook.com\/TemplateMonsterTurkey\/\",\"https:\/\/twitter.com\/templatemonster\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/1846793b4f115999bfd6cc63b4d71815\",\"name\":\"Bar\u0131\u015f Hep\u00e7orman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eb66b810f522d016a5638a0a1bee79d2?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eb66b810f522d016a5638a0a1bee79d2?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Bar\u0131\u015f Hep\u00e7orman\"},\"description\":\"Bar\u0131\u015f profesyonel bir i\u00e7erik pazarlamac\u0131s\u0131 ve ilham veren bir yazard\u0131r. G\u00fcnd\u00fcz pazarlama m\u00fcd\u00fcr\u00fc, gece ise yazar, i\u015f, pazarlama, tasar\u0131m ve web geli\u015ftirme \u00fczerine bir\u00e7ok blog yaz\u0131s\u0131 yaz\u0131yor. Web sitesi olu\u015fturucular ve CMS ile \u00e7al\u0131\u015fmay\u0131 ve deneyimini okuyucularla payla\u015fmay\u0131 seviyor. Onu LinkedIn'de takip edin\",\"url\":\"https:\/\/monsterspost.com\/tr\/author\/baris\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery ile Slide Kay\u0131t Formu Panel Kodu Nas\u0131l Olu\u015fturulur","description":"jQuery teknolojilerini takip ediyor ve ilgileniyorsan\u0131z sizler i\u00e7in haz\u0131rlanm\u0131\u015f m\u00fckemmel bir Slide form eklentisi, kolayca indirin ve kullan\u0131n.","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:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/","og_locale":"tr_TR","og_type":"article","og_title":"jQuery ile Slide Kay\u0131t Formu Panel Kodu Nas\u0131l Olu\u015fturulur","og_description":"jQuery teknolojilerini takip ediyor ve ilgileniyorsan\u0131z sizler i\u00e7in haz\u0131rlanm\u0131\u015f m\u00fckemmel bir Slide form eklentisi, kolayca indirin ve kullan\u0131n.","og_url":"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/","og_site_name":"Blog TemplateMonster T\u00fcrkiye","article_publisher":"https:\/\/www.facebook.com\/TemplateMonsterTurkey\/","article_published_time":"2013-10-17T14:31:53+00:00","article_modified_time":"2020-02-27T10:21:35+00:00","og_image":[{"width":900,"height":506,"url":"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2020\/03\/TemplateMonster.jpg","type":"image\/jpeg"}],"author":"Bar\u0131\u015f Hep\u00e7orman","twitter_card":"summary_large_image","twitter_creator":"@templatemonster","twitter_site":"@templatemonster","twitter_misc":{"Yazan:":"Bar\u0131\u015f Hep\u00e7orman","Tahmini okuma s\u00fcresi":"9 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/"},"author":{"name":"Bar\u0131\u015f Hep\u00e7orman","@id":"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/1846793b4f115999bfd6cc63b4d71815"},"headline":"jQuery ile Slide Kay\u0131t Formu Panel Kodu Nas\u0131l Olu\u015fturulur","datePublished":"2013-10-17T14:31:53+00:00","dateModified":"2020-02-27T10:21:35+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/"},"wordCount":1013,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/tr\/#organization"},"articleSection":["jQuery"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/","url":"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/","name":"jQuery ile Slide Kay\u0131t Formu Panel Kodu Nas\u0131l Olu\u015fturulur","isPartOf":{"@id":"https:\/\/monsterspost.com\/tr\/#website"},"datePublished":"2013-10-17T14:31:53+00:00","dateModified":"2020-02-27T10:21:35+00:00","description":"jQuery teknolojilerini takip ediyor ve ilgileniyorsan\u0131z sizler i\u00e7in haz\u0131rlanm\u0131\u015f m\u00fckemmel bir Slide form eklentisi, kolayca indirin ve kullan\u0131n.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/tr\/jquery-ile-slide-kayit-formu-panel-kodu-nasil-olusturulur\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/tr\/"},{"@type":"ListItem","position":2,"name":"jQuery ile Slide Kay\u0131t Formu Panel Kodu Nas\u0131l Olu\u015fturulur"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/tr\/#website","url":"https:\/\/monsterspost.com\/tr\/","name":"Blog TemplateMonster T\u00fcrkiye","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/tr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/tr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"tr"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/tr\/#organization","name":"MonsterPost T\u00fcrkiye","url":"https:\/\/monsterspost.com\/tr\/","logo":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/monsterspost.com\/tr\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/tr\/wp-content\/uploads\/sites\/8\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost T\u00fcrkiye"},"image":{"@id":"https:\/\/monsterspost.com\/tr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/","https:\/\/www.facebook.com\/TemplateMonsterTurkey\/","https:\/\/twitter.com\/templatemonster"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/1846793b4f115999bfd6cc63b4d71815","name":"Bar\u0131\u015f Hep\u00e7orman","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/monsterspost.com\/tr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eb66b810f522d016a5638a0a1bee79d2?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eb66b810f522d016a5638a0a1bee79d2?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Bar\u0131\u015f Hep\u00e7orman"},"description":"Bar\u0131\u015f profesyonel bir i\u00e7erik pazarlamac\u0131s\u0131 ve ilham veren bir yazard\u0131r. G\u00fcnd\u00fcz pazarlama m\u00fcd\u00fcr\u00fc, gece ise yazar, i\u015f, pazarlama, tasar\u0131m ve web geli\u015ftirme \u00fczerine bir\u00e7ok blog yaz\u0131s\u0131 yaz\u0131yor. Web sitesi olu\u015fturucular ve CMS ile \u00e7al\u0131\u015fmay\u0131 ve deneyimini okuyucularla payla\u015fmay\u0131 seviyor. Onu LinkedIn'de takip edin","url":"https:\/\/monsterspost.com\/tr\/author\/baris\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/posts\/297"}],"collection":[{"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/users\/1805522"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/comments?post=297"}],"version-history":[{"count":23,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/posts\/297\/revisions"}],"predecessor-version":[{"id":12427,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/posts\/297\/revisions\/12427"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/media?parent=297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/categories?post=297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/tr\/wp-json\/wp\/v2\/tags?post=297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}