günümüzde ücretsiz olarak dağıtılan ve güçlü yapısıyla bir çok form kullanıcısı tarafından tercih edilen mybb form sisteminin kurulumunu sizlere bu yazımda anlatacağım. web sayfalarıyla ilk tanıştığımda kullandığım ilk sistem olan mybb konusunda şunları söyleyebilirim ki form kullanacaksanız. yani ir form sitesi istiyorsanız mybb kullanmanızı sizlere tavsiyederim. gerçektende tema, eklenti desteği Okumaya Devam Et

merhaba değerli takipçilerim. sizlere wordpress dail tüm web sitelerinizde kullanabileceğiniz basit ama etkili bir sayaç kodu paylaşacağım. bu kod ile sayfalarınıza sayaç ekleyebilirsiniz. ziyaretçilerinizi an ve an takip edebilirsiniz. tek yapmanız gereken şey sayaç kodunu sayfanızın uygun yerine eklemenizdir. sayfanızı yormaz ve sayfanızı yavaşlatmaz. kullanmak isteyenler rahatlıkla kullanabilir.   <script Okumaya Devam Et

bu yazımda sizlere javascript ile nasıl basit ama etkili bir harektli menü yapabiliriz bunu anlatacağız. biz bunu 2 adımda yapacağız. ilk kısım head etiketleri arasında bulunacak kod parçalarıdır. 2. kısım ise body etiketleri arasında yer alacak kısımdır. sözü fazla uzatmadan kodlarımızı yazmaya başlayalım.   ///// ADIM 1 <HEAD> Bölümleri arasına Okumaya Devam Et

Genel amaçlı olsun özel amaçlı olsun tüm uygulama ve sistem yazılımları  programlama dilleriyle yazılır. Bir programlama dili, insanların bilgisayara çeşitli işlemler yaptırmasına imkan veren her türlü sembol, karakter ve kurallar grubudur. Programlama dilleri insanlarla bilgisayarlar arasında tercümanlık görevi yapar. Programlama dilleri, bilgisayara neyi, ne zaman, nasıl yapacağını belirten deyim ve Okumaya Devam Et

php ile nasıl resim upload scripti hazırlayabiliriz bizim için neler gerekli bunları anlatacağım. yüklenen resimlerin kıydını tutmak için veritabanına ihtiyaç duyacağız. bir veritabanımızın olduğunu varsayalım. localhost üzerinde veritabanınızı oluşturabilirsiniz? her zamanki gibi bizlere gerekenleri sıralayılım. upload adında bir klasör oluşturalım. resimler isimli klasörümüzü açalım yüklenen resimnler buraya yüklenecek. vtbaglan.php dosyamızı Okumaya Devam Et

Öncelikle aşağıdaki kodları gözlemleyerek mysql veritabanımızı ve tablomuzu oluşturuyoruz: Php Ziyaretçi Defteri Yapımı PHP- Kodu: &#8211; phpMyAdmin SQL Dump &#8211; version 2.10.3 &#8211; http://www.phpmyadmin.net &#8211; &#8211; Anamakine: localhost &#8211; Üretim Zamanı: 24 Mart 2008 saat 15:21:23 &#8211; Sunucu sürümü: 5.0.45 &#8211; PHP Sürümü: 5.2.3 SET SQL_MODE=&#8221;NO_AUTO_VALUE_ON_ZERO”; &#8211; &#8211; Veritabanı: `ziyaretcidefteri` &#8211; &#8211; ——————————————————– &#8211; &#8211; Tablo yapısı: `mesajlar` &#8211; CREATE TABLE `mesajlar` ( `id` int(11) NOT NULL auto_increment, `adisoyadi` varchar(60) collate latin1_general_ci NOT NULL, `email` varchar(60) collate latin1_general_ci NOT NULL, `baslik` varchar(225) collate latin1_general_ci NOT NULL, `mesaj` text collate latin1_general_ci NOT NULL, `tarih` varchar(60) collate latin1_general_ci NOT NULL, PRIMARY KEY  (`id`) ) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=15 ; &#8211; &#8211; Tablo döküm verisi `mesajlar` Şimdi de indeximizi oluşturan kodları yazalım Bunun için Okumaya Devam Et

bu yazımda wordpress bloğunda nasıl katagoriler ekleyebiliriz ve bu eklediğimiz katagorileri düzenlemeyi ve silmeyi sizlere anlatacağım. öncelikle bu katagoriler ne işe yarar onu açıklamakla yazıma başlamak isterim. wordpress bloğunuzu açtınız ve yazdığınız bir takım yazıları belli katagoriler altında toplamak istiyorsunuz, bu katagorileri açarak ziyaretçilerinizin aradıkları bilgileri rahatlıkla erişmesini istiyorsunuz diyelim Okumaya Devam Et

bir önceki yazımda joomla hakkında bir takım bilgiler vermiştim. bu yazımda ise devamı niteliğinde olarak joomla kurulumundan bahsedeceğim. joomla kurulumunu nasıl yapabiliriz bu yazımda bunu anlatacağım. öncelikle joomlanın en güncel sürümünü yazımın altından edinebilirsiniz. yazımın altındaki bağlantıya tıklayıp joomlayı indirdiğinizi varsayarak kurulum anlatımına başlayabiliriz. öncelikle joomla kurulumu için mysql veritabanına Okumaya Devam Et

Joomla, web içeriğini yayınlamak için ücretsiz ve açık kaynaklı bir içerik yönetim sistemidir (CMS). Yıllar boyunca Joomla! birçok ödül kazandı. Size, güçlü çevrimiçi uygulamalar geliştirmenize olanak tanır. CMS bağımsız kullanılabilen bir model görüntü denetleyicisi web uygulaması çerçevesinde inşa edilmiştir. Joomla platformun, kullanıcı dostu, geliştirilebilir, çok dilli, erişilebilir, duyarlı, arama motorunun Okumaya Devam Et

merhaba arkadaşlar. bu yazımda sizlerle jquery kullanarak slider yapmayı anlatacağım.

bu yazımda jquery komutlarını kullanarak basit bir slider yapacağız.

öncelikle slider nedir kısaca açıklayalım.

bloklarda gördüğümüz bir kavramdır web setinizin sağında ve ya solunda bulunan yan menülere slider diyoruz işte bu sliderin yapımını kavramak için basit bir slider yapacağız.

kodları yazmadan önce yapılması gerekenleri inceleyelim.

slider adında bir klasör oluşturun.

klasör içerisinde index.html dosyası oluşturalım burada kodlarımızın çalışacağı ana sayfamız yer alacaktır. burada html ve jquery kodları bulunacak.

resimlerinizi koyabilmeniz için images adında bir klasör oluşturun.

yazımın sonunda resimleri sizlerle paylaşacağım. sizler kendinize uygun resimnler kullanabilirsiniz.

son olarakta css komutları yazacağımız bir css klasörü oluşturun ve içerisinede style.css dosyamızı oluşturun.

her zamanki gibi ilk olarak style.css dosyamızın kodlarını yazarak işe başlayalım.

 

css kod:

 

/* Css Sıfırlama */
body {font: 12px/19px Arial; margin: auto}
table,tr,td,h1,h2,h3,h4,h5,h6,ul,li,input,form,textarea {padding: 0; margin: 0; list-style-type: none; border: none;}
img {border: none;}
a {text-decoration: none;}
:focus {outline: none;}

/* Slider */
#slider_container {height: 275px; background-image: url("../images/morarka.png"); background-repeat: no-repeat}
#slider_alt {height: 140px; background-image: url("../images/slider_alt.jpg"); background-repeat: no-repeat}
.slider_alt {margin-left: 410px;}
.slider_alt li {float:left; padding: 80px 20px 0 0; }
.slider {float: left; margin-top: 50px; margin-left: 30px;}
#once {margin-left: 80px; margin-top: 55px}
#sonra {margin-top: 55px}
#yazi {margin-top: 25px; width: 300px}
#goruntu {width: 289px; height: 180px; overflow: hidden}

 

evet arkadaşlar css dosyamız bu şekilde olacaktır.

 

şimdi ise son olarak index.html dosyamızın kodlarını yazalım.

 

<!DOCTYPE html>
<head>
<title>JQuery ile Slider Yapımı</title>
<link rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
var a=0;
$(document).ready(function(){
//açılış ayarlarının yapılması
$(".aciklama li").hide();
$(".aciklama li:eq("+a+")").show();
$("#r0").hide();
$("#r0").attr({src:"images/s_btn2.jpg"});
$("#r0").show();

//geri okuna basılca çalıştır
$("#once").click(function(){
once();
});
//ileri okuna basılca çalıştır
$("#sonra").click(function(){
sonra();
});
//butonlara basılca çalıştır
$(".slider_alt li").click(function(){
var b=$(this).index();
btn(b);
});
});

//geri gitme fonksiyonu
function once(){
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn.jpg"});
$("#r"+a).show();
a--;
if(a<0){a=5};
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn2.jpg"});
$("#r"+a).show();
$(".resim li").hide();
$(".aciklama li").hide();
$(".resim li:eq("+a+")").show();
$(".aciklama li:eq("+a+")").show();
};

//ileri gitme fonksiyonu
function sonra(){
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn.jpg"});
$("#r"+a).show();
a++;
if(a>5){a=0};
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn2.jpg"});
$("#r"+a).show();
$(".resim li").hide();
$(".aciklama li").hide();
$(".resim li:eq("+a+")").show();
$(".aciklama li:eq("+a+")").show();
};

//buton ile slide geçiş fonksiyonu
function btn(b){
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn.jpg"});
$("#r"+a).show();
a=b;
$("#r"+a).hide();
$("#r"+a).attr({src:"images/s_btn2.jpg"});
$("#r"+a).show();
$(".resim li").hide();
$(".aciklama li").hide();
$(".resim li:eq("+a+")").show();
$(".aciklama li:eq("+a+")").show();
};

//her on saniyede, bir sonrakine geç
var int=self.setInterval("sonra()",10000);
</script>
</head>
<body>
<div id="slider_container">
<div class="slider">
<div id="once"><a href="javascript:void(0)"><img src="images/onceki.png" /></a></div>
</div>
<div class="slider">
<div id="yazi">
<ul class="aciklama">
<li>1. resim ile ilgili yazı</li>
<li>2. resim ile ilgili yazı</li>
<li>3. resim ile ilgili yazı</li>
<li>4. resim ile ilgili yazı</li>
<li>5. resim ile ilgili yazı</li>
<li>6. resim ile ilgili yazı</li>
</ul>
</div>
</div>
<div class="slider">
<div id="goruntu">
<ul class="resim">
<li><a href="#"><img src="images/resim1.jpg" /></a></li>
<li><a href="#"><img src="images/resim2.jpg" /></a></li>
<li><a href="#"><img src="images/resim3.jpg" /></a></li>
<li><a href="#"><img src="images/resim4.jpg" /></a></li>
<li><a href="#"><img src="images/resim5.jpg" /></a></li>
<li><a href="#"><img src="images/resim6.jpg" /></a></li>
</ul>
</div>
</div>
<div class="slider">
<div id="sonra"><a href="javascript:void(0)"><img src="images/sonraki.png" /></a></div>
</div>
</div>

<div id="slider_alt"><div class="slider_alt">
<ul>
<li><a href="javascript:void(0)"><img id="r0" src="images/s_btn.jpg" /></a></li>
<li><a href="javascript:void(0)"><img id="r1" src="images/s_btn.jpg" /></a></li>
<li><a href="javascript:void(0)"><img id="r2" src="images/s_btn.jpg" /></a></li>
<li><a href="javascript:void(0)"><img id="r3" src="images/s_btn.jpg" /></a></li>
<li><a href="javascript:void(0)"><img id="r4" src="images/s_btn.jpg" /></a></li>
<li><a href="javascript:void(0)"><img id="r5" src="images/s_btn.jpg" /></a></li>
</ul>
</div></div>
</body>
</html>

 

evet arkadaşlar html kodlarımızıda bu şekilde yazdıktan sonra jquery sliderimiz oluşmuş oldu.

yazımın altında resimleri bulabilirsiniz.

iyi bloglamalar herkese.

jquery ile slider yapımı