Perşembe, Haziran 18, 2026
En güncel:

vehbiakdogan

Senior Sofware Developer

vehbiakdogan

Senior Sofware Developer

Javascript-jQuery

jQuery

jQuery Basit Bir Slider Eklentisi

merhaba arkadaşlar Kullanımı kolay basit bir jquery slider eklentisi yazdım sizlerle de paylaşmak istiyorum.

jQuery slider Eklentisi

Kullanımı 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Vehbi Akdoğan Slider Eklentisi </title>
	<meta name="description" content="Vehbi Akdoğan Tab Eklentisi, jQuery tab eklentisi  " />
	<meta name="keyword" content="Vehbi Akdoğan Tab Eklentisi, jQuery tab eklentisi   " />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<meta name="author" content="Vehbi Akdogan" />
	<link rel="stylesheet" href="style/style.css?v=1.0" />
	<script type="text/javascript" src="http://vehbiakdogan.com/demolar/_jq.js"></script>
	<script type="text/javascript" src="js/akdoganSlider.jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			$("ul.akdoganSlider").akdoganSlider({
				width:"1000px", // slider Genişlik default 100%
				height:"500px", // slider Yükseklik default 100%
				ileriGeriOk :true, // ileri Geri Nesneleri Görünsünmü ? true/false
				geriOkHtml: "Geri Git", // geri ok html
				ileriOkHtml: "İleri Git", // ileri ok html
				noktaHtml : "&spades;", // alt nokta html
				autoPlay: true
			});
			
		});
	</script>
</head>
<body>
	<div class="ortala">
		<ul class="akdoganSlider">
			<li> <img src="images/1.jpg" alt="" /> <p> İçerik Yazısı </p></li>
			<li> <img src="images/2.jpg" alt="" /> <p> İçerik Yazısı </p></li>
			<li> <img src="images/3.jpg" alt="" /> <p> İçerik Yazısı </p></li>
		</ul>
	</div>
</body>
</html>

Parametreler

  • width: Sliderin genişliğini belirtir. Default Değeri 100%
  • height: Sliderin yüksekliğini belirtir. Default Değeri 100%
  • ileriGeriOk:ileri Geri Okların Gösterilip Gösterilmeyeceğini Belirtir. Alabileceği değerler True/False. Default değeri True.
  • geriOkHtml: Geri Okunun Htmlini belirtir Default Değeri “Geri” Dir. html kodu kullanabilirsiniz.
  • ileriOkHtml: İleri Okunun Htmlini belirtir Default Değeri “İleri” Dir. html kodu kullanabilirsiniz.
  • noktaHtml: Slider sayısını gösteren noktalardır. boş bırakırsanız sayı olarak görünecektir..
  • autoPlay:Sliderin Otomatik olarak Dönmesini Gösterir. alabileceği değerler true/false. Default Değeri false.

    • DEMO Download

Javascript-jQuery
Vehbi Akdoğan
jQuery

akdoganTab jQuery Tab Eklentisi

Merhaba arkadaşlar kendim hazırlamış olduğum basit ve kullanımı oldukça kolay olan tab eklentisini sizlerle paylaşmak istiyorum.

Eklentiyi Github üzerinden İnceleyebilirsiniz.
Öncelikle eklentinin kullanımına bir bakalım.

KULLANIMI

Öncelikle jQuery Kütüphanesini Ve Eklenti Kütüphanesini ekleyelim. 

 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="akdoganTab.jquery.js"></script>

Daha Sonra Eklentimizi Çalıştıralım. 

 

<script type="text/javascript">
		$(function(){
			$("ul.tab").akdoganTab({
				aktifIndis: 0, // default değer 0
				tabDivAktif: "aktif", // default değer aktif 
				tabIcerik :$(".icerik"), // default değer $(".icerik")
				tabEffect: "fade" // default değer null 
			});
			
		});
	</script>

Html Yapısı: 

<ul class="tab">
	<li>Tab1</li>
	<li>Tab2</li>
	<li>Tab3</li>
</ul>
<div class="icerik">Tab1 içeriği</div>
<div class="icerik">Tab2 içeriği</div>
<div class="icerik">Tab3 içeriği</div>

Parametreler

  • aktifIndis : Tab Eklentisinin açılışta hangi Tab içeriğinin görünür olacağını belirler.
    Default Değeri 0 dır. Yani 1. Tab Görünür Olacaktır.
  • tabDivAktif : Aktif Olan Tab ın classıdır. default değeri “aktif” dir.
  • tabIcerik : Tab İçeriklerine Ait Nesneyi Gösterir. Default Değeri ” $(“.icerik”)” tir.
  • tabEffect : Tab Geçişi Arasındaki Effekti Gösterir. Default değeri null dur. yani effekt yoktur.
    Alabileceği Değerler:

    • slide: slideDown effecti ile değişir.
    • fade: fadeIn effecti ile değişir.
    • slow: slow effecti ile değişir.
    • ease: easeIn effecti ile değişir.
    • null: effect olmadan değişir.

Demo | Download

Javascript-jQuery
Vehbi Akdoğan
jQuery snow Effect

jQuery Kar Yağdırma Effekti

Merhaba arkadaşlar yeni yıl yaklaşıyor. Erzurumda bu yıl pek kar göremediğimiz için bende hiç deiğilse web sitemde kar yağsın diye bir eklenti hazırladım.
Eklentimi sizlerle de paylaşmak istiyorum.
Eklentinin Adı akdoganKarEffect

Evet şimdi nklentimizi nasıl Kullanacağımıza bakalım.
Github üzerinden anlatım yaptım githubdan da bakabilirsiniz.

akdoganKarEffect Kullanımı

Öncelikle jquery kütühanesini ve eklentimizi sayfaya dahil ediyoruz.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery.akdoganKarEffect.js"></script>

Daha Sonra Eklentimizi Çalıştırıyoruz.

	<script type="text/javascript">
		$(function(){
			$(document).akdoganKarEffect({
				minBoyut:15, // minimum kar tanesi boyutu default değer 10
				maxBoyut:25, // maximum kar tanesi boyutu default değer 20
				karHizi:1000, // kar tanesi eklenme hızı default değer 500
				karTanesiRengi: "#fff", // kar tanesi rengi  default değer #FFFFFF
			});
		});
	</script>

Evet Kullanımı bu kadar kolay şimdi Parametrelerimize bir göz atalım

Methodlar Ve Kullanımı

  • minBoyut: Minimum Kar Boyutunu Belirler.Default değeri 10 dur.
  • maxBoyut: Maximum kar tanesi boyutunu belirler. default değeri 20 dir.
  • karHizi: Kar tanelerinin ne kadar sıklıkta doğacağını belirler. Default değeri 500ms dir.
  • karTanesiRengi: Kar tanelerinin rengini belirler. Default değeri #ffffff (beyaz) dır.

DEMO

DOWNLOAD

Html-Html5Javascript-jQuery
Vehbi Akdoğan
jQuery

jQuery GeriSayım Sayacı Eklentisi CountDown

zamanlı işlemler yaptıran ve ne kadar zaman kaldığını kulanıcıya göstermek isteyenler için basit ve kullanışlı bir geri sayım sayacı hazırladım.
Tabi durduk yere hazırlamadım bana lazım oldu yaptım yapmışken sizlerle de paylaşayım dedim.

Öncelikle Eklentimizi Github üzerinden İndiriyoruz.

akdoganSayac Kullanımı

Eklentimizin 3 parametresi var

Gün: Default Değeri 10
Saat: Default Değeri 24
Dakika: Default Değeri 60
Saniye: Default Değeri 60

Öncelikle jQuery Kütüphanesini Ve Eklenti Dosyamızı Çağırıyoruz.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="akdoganSayac.js"></script>

Daha Sonra Eklentimizi Çalıştırıyoruz.

<script type="text/javascript">
        $(function(){
           	$("#akdoganSayac").akdoganSayac({
		'gun' : 10, 
		'saat' : 3, 
		'dakika' : 2,
		'saniye' : 20
	});
    });
    </script>

Şeklinde Kullanabilirsiniz.

Tasarım Değiştirmek için Css İle Müdahale edebilirsiniz.

Örnek:

       span.gun {
	color:#aaa;
}
span.saat {
	color:#ccc;
}
span.dakika {
	color:#ddd;
}
span.saniye {
	color:#eee;
}
span.min {
	font-size: 20px;
}

Eklentimizi Kullanmka Bu kadar kolay 🙂

Çalışan canlı örneğimiz için Tıklayın

Html-Html5Javascript-jQuery
Vehbi Akdoğan
javascritp saat yapımı

Javascript Saat Yapalım

Genelde sorulan bir konu olduğu için blogumda bir saat örneği yapmaya karar verdim. Javascript kullanarak saat yapmak için öncelikle javascriptin Date() Sınıfını kullanmamız gerekiyor.

Javascriptte tarih ile ilgili işlemler Date sınıfı ile yapılıyor.

Yeri gelmişken söyleyelim javascriptte de sınıf başlatmak için new anahtar kelimesi kullanılıyor.

Gerekli açıklamalarımızı yaptığımıza göre kodlarımızı yazabiliriz.

Kodlarımız aşağıdaki gibi olacak. 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Vehi Akdoğan - jQuery İle Saat Yapımı</title>
	<script type="text/javascript" src="http://vehbiakdogan.com/demolar/_jq.js"></script>
	<script type="text/javascript">
		$(function(){
			$.saat = function(){
				var tarih = new Date(),
				saat = tarih.getHours(), // Saat
				dakika = tarih.getMinutes(), // Dakika
				saniye = tarih.getSeconds(); // saniye
				
				if( saat <9 ) saat = "0" + saat;
				if( dakika <9 ) dakika = "0" + dakika;
				if( saniye <9 ) saniye = "0" + saniye;
				
				$("#saat").html("<span class='saat'>" + saat + "</span>:<span class='dakika'>" + dakika + "</span>:<span class='saniye'>" + saniye + "</span>");
			
			}
			setInterval("$.saat()",1000);
			
			
		});
		
		
	</script>
	<style type="text/css">
		#saat {
			position:absolute;
			width:500px;
			hieght:100px;
			top:50%;
			left:50%;
			margin-top:-80px;
			margin-left:-250px;
			overflow:hidden;
			font:128px arial;
			color:#bbb;
		}
		span.saat {
			color:#aaa;
		}
		span.dakika {
			color:#cc;
		}
		span.saniye {
			color:#eee;
		}
	</style>
</head>
<body>
	<div id="saat"></div>
</body>
</html>

Javascript Kodlarımızı Açıklarsak:

$.saat Adında bir Fonksiyon oluşturduk. $.saat = function(){…} şeklinde.

var tarih = new Date() Tarih Sınıfımızı başlattık.
saat = tarih.getHours() o anki saatimizi aldık
dakika = tarih.getMinutes() O anki dakikayı aldık
saniye = tarih.getSeconds() o anki saniyeyi aldık

daha sonra saat,saniye,dakika yı kontrol ettirip sıfırdan küçük ise başına 0 ekledik.

Ve daha sonra #saat id li divimizin içine yazdırdık.

Benim span kulanmamın sebebi renk vermek içindi siz isterseniz kullanmayabilirsiniz.

Demo

Html-Html5Javascript-jQuery
Vehbi Akdoğan
jQuery

jQuery imza Eklentisi

Merhaba arkadaşlar kurumsal şirketlerde çalışanlar bilir genelde şirkette yapılan tüm sitelerde sitenin altına yapan şirketin logosu eklenir.

Çalıştığım ajansta bizde yaptığımız her sitenin altına logomuzu ekliyoruz ve her site için aynı kodları yazmak bir zamandan sonra sıkıcı geliyor bende bu yüzden jQuery imza eklentisi adında bir eklenti yazdım.

jQuery imza eklentisi

Öncelikle Eklentimizi Buradan İndiriyoruz.

Daha sonra html sayfamızda jQuery kütüphanesini ve Yazmış olduğum imza.js Dosyasını çağırıyoruz.

Ve eklentimizi çalıştırıyoruz. 

 

<!DOCTYPE html>
<html>
<head>
	<title>Vehbi Akdoğan imza.js </title>
	<meta charset="utf-8">
	<meta name="description" content="" />
	<meta name="keyword" content="" />
	<meta name="author" content="Vehbi Akdogan" />
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="imza.js"></script>
	<script type="text/javascript">
	$(function(){
		$('body').imza({
			metin: 'Design And Code By', // üzerine geldiğinde görünecek metin. varsayılan olarak design And Code By
			url : 'http://vehbiakdogan.com', // Tıklandığında yönlendirilecek adres. varsayılan olarak boş
			logoYol: 'logo.png', // şirket logosunun yolu. varsayılan olarak style/images/logo.png 
			color : '#000' // girilen metnin rengi. varsayılan olarak #000
		});
	});
	</script>
	
	
</head>
<body>

</body>
</html>

Gerekli Açıklamaları Kod İçerisinde Yazdım.

Demo

Eklentim ücretsizdir isteyen herkes github üzerinden indirebilir

Html-Html5Javascript-jQuery
Vehbi Akdoğan

Sayfa Yenilenmeden Link Değiştirme

Html5 ile gelen bir özellik olan location.hash sayesinde artık sayfa yenilenmeden linkimizi değiştirebiliyoruz. bende bugün nasıl değiştireceğimizden bahsetmek istiyorum.

Kodlarımız: 



<!DOCTYPE html>
<html>
<head>
	<title>Html5 ile sayfa yenilenmeden link değiştirme </title>
	<meta charset="utf-8">
	<meta name="description" content="" />
	<meta name="keyword" content="" />
	<meta name="author" content="Vehbi Akdogan" />
	<script src="js/jquery.min.js?v=1.0"></script>
	<script type="text/javascript">
		
		$(function(){
			
			$("ul.menu li a").click(function(){
				var hash = $(this).attr("href"); // adresi aldık 
				location.hash = hash; // adres çubuğumuzu değiştirdik 
				$(".hash").html("mevcut adres: " + hash); // ekrana gösterdik 
				
				return false;
			});
			
			
			
		});
	</script>
	
	<style type="text/css">
		ul.menu li {
			float:left;border:1px solid #ddd;
			padding:5px 15px;
			margin-lefT:5px;
			list-style:none;
		}
		ul.menu li a {
			display:block;
			width:100%;
			height:100%;
			text-align:center;
			text-decoration:none;
			color:#555;
		}
		.hash {
			clear: both;
			margin-top:20px;
			width:100%;
			color:#555;
			displaY:block;
		}
	</style>
	
</head>
<body>

<ul class="menu">
	<li> <a href="anasayfa.html">Anasayfa</a></li>
	<li> <a href="hakkimizda.html">Hakkımızda</a></li>
	<li> <a href="iletisim.html">İletişim</a></li>
</ul>
<div class="hash"></div>

</body>
</html>

Demo

Html-Html5Javascript-jQuery
Vehbi Akdoğan

Css Ve Script Dosyalarına Neden Parametre Verilir

Sizde benim gibi önünüze gelen sitenin kodlarını karıştırıyorsanız size css dosyasına parametre verenleri illaki görmüşsünüzdür.
Bende bu parametre veren arkadaşlar neden parametre vermişler onu araştırdım.

Css Dosyası tarayıcı üzerinden yorumlanarak çalışan dosyalardır ve bu dosyalar tarayıcının önbelleğine kaydedilir.
Biz css dosyamızda herhangi bir güncelleme yaptığımızda da tarayıcının geçmişini silmeden yaptığımız değişikliği göremiyoruz. Bu yüzden css dosyasına parametre vererek sitede herhangi bir güncelleme olduğunda tarayıcının bunu hemen algılamasını sağlamış oluyoruz.

örneğin :

ilk başlangıçta css dosyamız:
style.css?v=1.0
olsun.
Güncelleme yapınca Css dosyamızın paarametresini
style.css?v=1.1
yaparsak tarayıcıda dosyanın değiştiğini anlayıp güncelleme yapacaktır.

 

Aynı işlemleri script dosyaları içinde uygulayabilirsiniz.

Css-Css3Html-Html5Javascript-jQuery
Vehbi Akdoğan