Uygulamalar

Çeşitli Uygulamaların Olduğu Bölüm

Psd Navigasyon

Psd navigasyon menü
Süper bir psd tasarımı ile yine beraberiz aşağıdaki ekran görüntüsü olan şu menü tasarımı kumaş parçasıymış gibi yanlarında dikişler olan güzel bir psd çalışmasını paylaşmak istiyorum özellikle grunge şablon veya tasarımlar için daha uygun olabilir diye düşünüyorum…
devami

Türkiye Blog!

Türkiye blog çöplüğü olmasın!
İnternetin her eve girmesiyle oluşan bu sanal toplumda herkese göre bir yer mevcut, örnek vermek gerekirse web tasarımcılar, oyun oynayanlar, haber okuyanlar, sosyal paylaşım sitelerinde takılanlar, blogger‘lar vs.. en çok dikkat çeken konuyu özellikle boldladım çünkü...
devami

Yettin Artık Terör!

Yettin artık terör!
Bugün yine şehit haberiyle uyandık, bu seferki şehit olan mehmetçik sayısı 26′yı buldu. Peki ama neden ? çünkü hükümetin başarısız politikaları ve başarısız adımları Kürt sorunu ve açılımı sınır dışı operasyon gibi konuların yetersiz kalmasıyla yeteri kadar olmasada kaba taslak sorunun...
devami
Tüm Gösterilen Konular Yer = Uygulamalar
0

Jquery Haberler Uygulaması »

Merhaba sevgili arkadaşlar uzun bir aradan sonra tekrar wbmaster paylaşımlarına devam ediyoruz.. bu gün sizlere çok güzel bir uygulama olan compactnewsi tanıtacağım.
Bu uyuhulama sayesinde sağ yada sol sidebarınızda son eklenen konular, haberler, son eklenen yazılar veya yorumlar gibi widget oluşturup yayınlayabilirsiniz vereceğim rardaki dosyaları metin editörü ile düzenleyip kendinize göre ayarlayabilir ve çok rahat kullanabilirsiniz kolay gelsin.
jquery news

DEMO | DOWNLOAD


1

Jquery Büyüteç Uygulaması »

Merhaba arkadaşlar, bu uygulamamızda ufak resimlerinize büyüteç efekti vermeyi ve resimlerinizin daha okunaklı olabilmesi için uygulamanın anlatımına geçeceğim. Bu uygulama wordpress eklentisi değildir. ilk başta buna bir açıklık getireyim jquery modüller her sisteme etegre edilebileceği gibi eklenti olarakta yapılabilir lakin gerekli metodları uygulamak şart. Örneğin uygulamamız için dosyamızı indirdiğinizde klasörü ftp deki dizininize atıp dosyaları header veya resimlerinizin bulunduğu dosyalarınızın içine entegre etmeniz gerekmektedir.

jquery_buyutec

DEMO | DOWNLOAD

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" type="image/vnd.microsoft.icon" href="/wp-content/themes/Mahlukat/images/favicon.gif">
<title>Büyüteç jQuery &amp; CSS | Tutorialzine demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1>Büyüteç efekti</h1>
<h2><a href="http://mahlukat.net">jquery büyüteç efekti</a></h2>
<div id="main">
<div id="iphone">
<div id="webpage">
<img src="img/webpage.png" width="499" height="283" alt="Web Page" />
<div id="retina"></div>
</div>
</div>
</div>
<p class="credit"><a href="http://zandog.deviantart.com/art/Apple-iPhone-4G-PSD-161681253">zandog’s iPhone 4 PSD was used in the making of this demo</a></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

0

Jquery Balon Slide Uygulaması »

Merhaba değerli okurlar uzun bir aradan sonra paylaşımlarımıza kaldığımız yerden devam ediyoruz jquery balon slide bildiğimiz sliderlar ile aynı görevi üstlensede balon efektli açılması buna ek bir avantaj kazandırmış. Demo adresimizden dilerseniz bakabilir veya indirip sitenizde kullanabilirsiniz…

balon

DEMO | DOWNLOAD


1

Jquery Geri Sayım Sayacı »

Merhaba arkadaşlar, bu gün sizlere jquery geri sayım sayacını paylaşmak istiyorum bu geri sayım sayacı belirlediğiniz bir tarihe otomatik tanımlanıp o tarihe kalan süreyi ekrana gösteriyor ayarları ve kullanımı oldukca basit isterseniz aşağıdaki linklerimizden test edip ardından indirebilirsiniz..

jquery-countdown-timer

DEMO | DOWNLOAD


2

Jquery Sliders Modülü »

Merhaba değerli okurlar bu yazımda’da diğer konulardaki gibi eşsiz modüller ve uygulamalar paylaşacağım bu vermiş olduğum jquery sliders modulü ile banner resimlerinize hareketli efektler verebilirsiniz…

jquery_sliders

DEMO | DOWNLOAD


0

Jquery Pano Uygulaması »

Merhaba arkadaşlar, bu güz sizlere jquery ve css ile pano uygulaması ile notlarını web sitenizde görsel olarak tutmaya yarayan bu uygulamayı paylaşıyorum. İçeriği oldukça basit olan bu uygulama notlarınızı statik olarak tutmanıza ve değiştirmenize olana sağlıyor. Yapacağınız tek şey dosyaların içindeki kodları kendinize göre uyarlayıp web sitelerinizde kullanmak kolay gelsin…

notlar için pano

DEMO | DOWNLOAD

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sticky notes using CSS3 and Google Fonts (Step 5)</title>
<link  href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css">
<style type="text/css">
*{
  margin:0;
  padding:0;
}
body{
  font-family:arial,sans-serif;
  font-size:100%;
  margin:3em;
  background:#666;
  color:#fff;
}
h2,p{
  font-size:100%;
  font-weight:normal;
}
ul,li{
  list-style:none;
}
ul{
  overflow:hidden;
  padding:3em;
}
ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:10em;
  width:10em;
  padding:1em;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
}
ul li{
  margin:1em;
  float:left;
}
ul li h2{
  font-size:140%;
  font-weight:bold;
  padding-bottom:10px;
}
ul li p{
  font-family:"Reenie Beanie",arial,sans-serif;
  font-size:180%;
}
ul li a{
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform:rotate(-6deg);
}
ul li:nth-child(even) a{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}
ul li:nth-child(3n) a{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}
ul li:nth-child(5n) a{
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
}
ul li a:hover,ul li a:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}
ol{text-align:center;}
ol li{display:inline;padding-right:1em;}
ol li a{color:#fff;}
</style>
</head>
<body>
  <ol>
    <li><a href="step1.html">Step #1</a></li>
    <li><a href="step2.html">Step #2</a></li>
    <li><a href="step3.html">Step #3</a></li>
    <li><a href="step4.html">Step #4</a></li>
    <li><strong>Step #5</strong></li>
    <li><a href="#"></a></li>
  </ol>
  <ul>
    <li>
      <a href="#">
        <h2>Title #1</h2>
        <p>Text Content #1</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #2</h2>
        <p>Text Content #2</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #3</h2>
        <p>Text Content #3</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #4</h2>
        <p>Text Content #4</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #5</h2>
        <p>Text Content #5</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #6</h2>
        <p>Text Content #6</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #2</h2>
        <p>Text Content #2</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #7</h2>
        <p>Text Content #7</p>
      </a>
    </li>
    <li>
      <a href="#">
        <h2>Title #8</h2>
        <p>Text Content #8</p>
      </a>
    </li>
  </ul>
</body>
</html>


4

Jquery Resim Galerisi »

Merhaba arkadaşlar, bu gün sizlere jquery’nin nimetlerinden yine bir paylaşım suncağım. Jquery Resim Galerisi, bu script ile güzel bir galeri yapmanız mümkün eksik olan bir yanı anlaşılacağı üzere admin veya kontrol panelinin olmaması. Uygulamayı aşağıdaki demo adresinden kontrol edebilir yine aynı şekilde download edebilir ve kendine göre uyarlayabilirsiniz…

resim_galerisi

DEMO | DOWNLOAD


2

Jquery Navigasyon Menü »

Selam arkadaşlar, bu gün sizlere jquery ile navigasyon’lu menü içerikli bir paylaşım suncağım. Altta verniş olduğun index.html içeriğini kendinize göre ayarlayıp rahatça kullanabilirsiniz. Çok şık ve sade bir tasarımlı bu menüyü aşağıdan inidirp hemen kullanmaya başlayabilirsiniz…

navigasyon_menü

DEMO | DOWNLOAD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A Navigasyonlu Menü</title>
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="shortcut icon" href="/wp-content/themes/Mahlukat/images/favicon.gif">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="menu-container">
<ul id="navigationMenu">
<li><a href="#" class="normalMenu">Anasayfa</a></li>
<li><a href="#" class="normalMenu">Servisler</a></li>
<li><a href="http://www.mahlukat.net" class="selectedMenu">Mahlukat.net</a></li>
<li><a href="#" class="normalMenu">Ekipman</a></li>
<li><a href="#" class="normalMenu">Hakkımızda</a></li>
<li><a href="#" class="normalMenu">İletişim</a></li>
</ul>
</div>
</body>
</html>


0

Güzel Bir Share Bar »

Merhaba arkadaşlar, bu gün sizlere güzel bir share bar ve sosyal medyada çok etkili olan paylaşım butonlarını paylaşacağım, yalnızca bu buttonlar sabit değil farenizin hareketine göre pozisyonlarını kendi belirliyor. Çok şık ve kullanımı basit bu tuşların demosuna aşığadın bakabilir, yada indirip sitenizde uygulayabilirsiniz…

share bar

DEMO | DOWNLOAD


0

Güzel Bir Saat Uygulaması »

Merhaba arkadaşlar, bu gün sizlere Jquery Güzel Bir Saat Uygulaması ‘nı göstereceğim. Aslında bilfiğimiz bir saatten farkı yok sadece görsel olarak birazdaha zenginleştirilmiş ve site içi kullanım için daha kolaylaştırılmıştır geniş sidebarlı wordpress temaları için oldukça uygun bir uygulama diyebiliriz.

saat_uygulamasi

DEMO | DOWNLOAD


3

Jquery KnockOut Uygulaması »

Merhaba arkadaşlar, bu akşam sizlere jquery ile knockout adı verilen ziyaretçi defteri mantığı ile çalışan güzel bir post gönderme uygulamasını paylaşacağım. Uygulama gayet basit ilgili dosyayı indirip gerekli alanları kendinize göre düzenledikten sonra yapmanız gereken tek şey ftp serverınıza ilgili dosyayı uplamak. Dilerseniz uygulamanın demo adresinden yararlanabilirsiniz…

knockout uygulaması

DEMO | DOWNLOAD


1

Mosaic Slider Uygulaması »

Merhaba arkadaşlar, bir günlük aradan sonra yine sizlerle Mosaic Slider Uygulaması ile beraberiz. Telekom yüzünden dün içerik giremedim varsayılan ağ geçidi çevrimdışı uyarısı verdide durdu… en son dns adresleri kısmına modemin ip’sini girdimde öyle düzeliverdi namussuz :) neyse konuya gelecek olursak çok güzel bir slider resimleri kareler içinde toplayıp hoş bir görünüm sağlıyor. Demo ve Download adresleri aşağıdadır.

mosaic_slider

DEMO | DOWNLOAD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mosaic Slider | Mahlukat demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="shortcut icon" href="/wp-content/themes/Mahlukat/images/favicon.gif">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Mosaic Slider</h1>
<div id="main">
        <div id="mosaic-slideshow">
        <div class="arrow left"></div>
        <div class="arrow right"></div>
    </div>
</div>
<h2><a href="http://mahlukat.net/">Mahlukat’a geri Dön</a></h2>
<div class="credit">
    <a href="http://theal.deviantart.com/art/Motorola-Droid-PSD-144615077">Motorolla Droid by theal</a>
    <a href="http://zandog.deviantart.com/art/HTC-Dream-Android-PSD-152512050">HTC Dream by zandog</a>
    <a href="http://zandog.deviantart.com/art/Motorola-Droid-PSD-152356162">Motorola Droid by zandog</a>
    <a href="http://bigkobe.deviantart.com/art/HTC-Dream-PSD-129383371">HTC Dream by bigkobe</a>
    <a href="http://zandog.deviantart.com/art/Nexus-One-by-Google-PSD-152032149">Nexus One by zandog</a>
</div>
</body>
</html>


1

Jquery Login Kutusu »

Merhaba arkadaşiar, bu gün sizlere jquery ile login kutusu tasarımını ve kodlarını paylaşacağım. Ekler dosyanın içersinde olup “demo” adresimizden kontrol edip “download” linkinden’de kolaylıkla indirip projelerinize, sitelerinizde kullanabilirsiniz.

login kutusu

DEMO | DOWNLOAD

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carbon Fiber Signup Form | Mahlukat Demo</title>
<link rel="shortcut icon" href="/wp-content/themes/Mahlukat/images/favicon.gif">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="carbonForm">
        <h1>Üye Ol</h1>
    <form action="submit.php" method="post" id="signupForm">
    <div class="fieldContainer">
        <div class="formRow">
            <div class="label">
                <label for="name">İsim:</label>
            </div>
            <div class="field">
                <input type="text" name="name" id="name" />
            </div>
        </div>
        <div class="formRow">
            <div class="label">
                <label for="email">Email:</label>
            </div>
            <div class="field">
                <input type="text" name="email" id="email" />
            </div>
        </div>
        <div class="formRow">
            <div class="label">
                <label for="pass">Password:</label>
            </div>
            <div class="field">
                <input type="password" name="pass" id="pass" />
            </div>
        </div>
    </div> <!– Closing fieldContainer –>
    <div class="signupButton">
        <input type="submit" name="submit" id="submit" value="Signup" />
    </div>
    </form>  
</div>
<h2 id="footer"><a href="http://www.mahlukat.net">Mahlukat.net’e Geri Dön</a></h2>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

6

Jquery Slideout Uygulaması »

Merhaba arkadaşlar, bu güz sizlere pek alışa gelmemiş bir uygulamayı paylaşmak istyiorum, jquery slide uygulaması tooltips gibi açılan ama kullanmak için illaki bir text yazısına yada linke gerek duymadan çalışan bir örnektir. İlgili dosya aşağıdadır, incelemek için demo’dan faydalanabilirsiniz.

jquery slide out

DEMO | DOWNLOAD


5

Renkli İstatistik Uygulaması »

Merhaba arkadaşlar, Bu dersimizde jQuery ve CSS3′ün getirdiği bir üç boyutlu dinamik kaydırıcı uygulamasını anlatacağım. Sürgü kullanılırken resizable verdiğimiz kodlar doğrultusunda istatistik oranları istediğimiz şekilde hareket edebiliyor, bu şekilde dinamik veriler ve oranlar elde edilebiliyor.

renkli istatistik

DEMO | DOWNLOAD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Renkli İstatistik Uygulaması CSS3 | Mahlukat Demo</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="shortcut icon" href="/wp-content/themes/Mahlukat/images/favicon.gif">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="sliders.js"></script>
</head>
<body>
<h1>Jquery Renkli İstatistik Uygulaması &amp; CSS3</h1>
<h2>Mahlukat.net’e<a href="http://tutorialzine.com/2010/03/colorful-sliders-jquery-css3/"> Geri Dön</a></h2>
<div class="main">
<div class="colorful-slider blue">
<div class="slider-handle"></div>
</div>
<div class="colorful-slider green">
<div class="slider-handle"></div>
</div>
<div class="colorful-slider orange">
<div class="slider-handle"></div>
</div>
<div class="cube-area">
<div class="cuboid blue">
<div class="cu-top"></div>
<div class="cu-mid"></div>
<div class="cu-bottom"></div>
</div>
<div class="cuboid green">
<div class="cu-top"></div>
<div class="cu-mid"></div>
<div class="cu-bottom"></div>
</div>
<div class="cuboid orange">
<div class="cu-top"></div>
<div class="cu-mid"></div>
<div class="cu-bottom"></div>
</div>
<div class="perspective">
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>

2

Ajax Selector Uygulaması »

Merhaba arkadaşlar, bu gün sizlere Ajax Selector Uygulaması’nı göstereceğim esasında dosyayı download ettikten sonra çok daha rahat anlayabilirsiniz mantığını ve düzenlemesini bu arada yeni olarak artık bütün paylaşımlarımın demo sunu vermeye karar verdim, bu günden itibaren her içerikte demo olacak böylelikle indirmeden önce daha iyi karar verme ve işinize yarayıp yaramayacağını en iyi şekilde anlayabileceksiniz…

DEMO | DOWNLOAD


1

Jquery Slider »

Merhaba arkadaşlar, Jquery Slider jquery’nin nimetlerinden hepimiz faydalanıyoruz, bir kaç satır kodla sitelerimizi büyüleyici hale getiriyoruz hal böyle oluncada piyasaya birçok jquery uygulamaları adı altında sürülen onlarca hatta binlerce modüller mevcut sadece işinize yarayacak olan uygulamayı bulup, kendinize göre derlemek. İşine yarayacak olanlar içinse şu uygulamayı veriyorum.

İşleyişi: fare ile bir resmin üstüne gelindiğinde enlemesine doğru açılır, enlemesine ve boylamasına seçenekleri dosya içinde mevcuttur.

DOWNLOAD


1

Jquery Filterable Portfolio »

Bir portfolyo siteniz var ve yaptığınız çalışmaları kategorize ederek ziyaretçilerinize yada müşterilerinize görsel olarak sunmak istiyorsunuz. İşte bu uygulama tam size göre aparatif çalışma sistemiyle temalarınıza, html sayfalarınıza, yani dinamik veya statik  sayfalarınıza rahatlıkla entegre edebilir, çalışmalarınızı jquery tadında sergileyebilirsiniz…

DEMO | DOWNLOAD

 


Toplam 2 sayfa, 1. sayfa gösteriliyor.12
Facebook sayfamızı beğenebilir ve takip edebilirsiniz.
Sosyal Mecra






Webmaster Blog! Made in Turkey

IP Adresiniz » 38.107.179.224
Anlık Gösterge » Şuan Kişi Online!

search
Site içinde arama gerçekleştirebilirsiniz.
Yayınlanmasını istediğiniz konuları gönderebilirsiniz.