Çeşitli Uygulamaların Olduğu Bölüm
Psd Navigasyon
Psd navigasyon menüTürkiye Blog!
Türkiye blog çöplüğü olmasın!Yettin Artık Terör!
Yettin artık terör!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.

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.

<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 & 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>
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…
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..

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…

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…

<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>
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…

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…

<!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>
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…

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.
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…

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.

<!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>
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.

index.html
<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>
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.

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.

<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ı & 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>
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…

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.

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…

Mayıs 9, 2012 Tarihinde 



