Spaksu Blog » Kodlama http://www.spaksu.com Kişisel Teknoloji , Kişisel Tasarım Tue, 26 Aug 2008 16:09:25 +0000 http://wordpress.org/?v=2.6.1 en Resimleriniz için .htaccess ile Hotlink Protection http://www.spaksu.com/resimleriniz-icin-htaccess-ile-hotlink-protection/ http://www.spaksu.com/resimleriniz-icin-htaccess-ile-hotlink-protection/#comments Tue, 24 Jun 2008 20:18:41 +0000 Spaksu http://www.spaksu.com/?p=366 Bazı internet sitelerinden kendi sitenizde yayınlamak için resim alırsınız ancak resmi sitenize eklediğinizde ise farklı bir imaj ile resmin size ait olmadığını yada resmin başka sitelerde yayınlamak için izin almanız gerektiğini belirten bir görsel çıkar. Aynı şekilde .htaccess yöntemi ile sizde sitenizde yayınladığınız resimlerin başka sitelerde gösterimini engellemek için yazının devamındaki uygulamayı kullnabilirsiniz. Aynı zamanda vereceğim linktende sitenize ait değerleri girerek hazır htaccess kodunu alabilir ve sitenize yerleştirebilirsiniz. Yönteme kısaca Htaccess for hotlink protection adıda verilir. Eğer htaccess kullanımı hakkında bilginiz yoksa öncelikle buradan bilgilendirme almanızı tavsiye ediyorum.

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?spaksu.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ /yasaklikullanim.gif [NC,R,L]
Yukardaki kodlamada 3. satırdı izin verdiğiniz site olan siteyi yazabilirsiniz. 4. Satıırda ise yasaklanan imaj yerine kullanılacak imajın urlsini belirtirsiniz.

Hazır olarak kod oluşturabileceğiniz site;
http://www.htaccesstools.com/hotlink-protection/

]]> http://www.spaksu.com/resimleriniz-icin-htaccess-ile-hotlink-protection/feed/ Javascript Css stil değiştirici hazırlamak http://www.spaksu.com/javascript-css-stil-degistirici-hazirlamak/ http://www.spaksu.com/javascript-css-stil-degistirici-hazirlamak/#comments Sun, 08 Jun 2008 09:22:29 +0000 Spaksu http://www.spaksu.com/?p=357 Bir önceki yazımda size söz verdiğim gibi beraber javascript yardımı ile css stil değiştirici hazırlayacağız. Ancak eğer css konusunda bilgi sahibi değilseniz lütfen uzman biri yardımı ile hazırlamanızı yapınız. Yapacağınız hata sitenizde değişik bozulmalara neden olabilir. Yazının devamında anlattığım css stil değiştiri hazırlama yabancı bir siteden Türkçeye çevirilmiş halidir.

1. Javascript styleswitcher dosyasını indirin

Vereceğim bu dosya stil geçişlerini sağlamanız için gereken bir js dosyasıdır.
İndir (styleswitcher.js)

2. <head> tagı arasında js dosyasını çağırın

Stil değiştiriyi ekleyeceğiniz sayfada </head> tagının hemen üstüne alttaki kodu ekleyin eğer koddaki src çağırma kısmı farklı ise kendi sitenize göre uygun hale getirin:
<script type="text/javascript" src="styleswitcher.js"></script>

3. Yeni bir stil dosyası oluşturun

Bu kısım en önemli kısımdır. Sitenizde bulunan css stil dosyasının bir kopyasını oluşturarak içindeki değerleri , renkleri yeni stile göre ayarlayın. Eğer stilinizdeki tanımlamalar diğer stil ile bağdaşmazsa uyumsuzluklar ortaya çıkabilir. Gerekli değişiklikleri yapıktan sonra dosyanızı “style-mavi.css” şeklinde farlı bir isim ile adlandırın ve kaydedin. Bu işlemi istediğiniz kadar stil oluşturmak için kullanabilirsiniz.

4. Head bölümünde stillere link verin

Dikkat etmeniz gereken nokta iki çeşit stil dosyası olduğudur. Ana stil ve Alternatif stil. Ana stiliniz temanın ilk stilidir Title yani başlık değeri default’dur.
<link rel="stylesheet" type="text/css" href="style.css" title="default" />

Oluşturduğunuz diğer stil dosyaları alternatif stillerdiir. Alttaki kod gibi “Rel” ve “Title” değerleri ana stilden farklıdır. Birden fazla alternatif eklemek için alttaki kodları tekrarlayabilirsiniz..
<link rel="alternate stylesheet" type="text/css" href="style-mavi.css" title="mavi" />

5. CSS stil değiştiricileri sitenize link olarak ekleyin.

Üstteki stil dosyalarını oluşturup tanımladıktan sonra buları ziyaretcilernizin kullanacağı hale getirmek için sitenizde istediğiniz herhangi bir yerde link olarak ister text formatında isterseniz imaj formatın kullanıcınıza suınabiilirsiniz. Altta belirttiğim kodda dikkat çeken kısım setActiveStyleSheet(’mavi’); olarak belirtiğimiz stil aktifleştirme bölümüdür.
<a href="/" onclick="setActiveStyleSheet(’mavi’); return false;">Mavi Tema</a>

Aynı link kodu ile alttakini kullanarakda ziyaretçinin orjinal stile dönmesi sağlanabilir:
<a href="/" onclick="setActiveStyleSheet(’default’); return false;">Orjinal Tema</a>

İşte bukadar stil değiştiriciniz hazır.

Eğer Css hakkında bilgi sahibi değilseniz lütfen uzman birinin gözetimi ile yapın. Yanlış bir şey yaptığınızda sitenizin yapısını bozabilirsiniz ve ben kesinlikle bu nedenden ötürü sorumluluk kabul etmem.

Kolay gelsin.

]]> http://www.spaksu.com/javascript-css-stil-degistirici-hazirlamak/feed/ Css’de Code Tagını Biçimlendirme http://www.spaksu.com/cssde-code-tagini-bicimlendirme/ http://www.spaksu.com/cssde-code-tagini-bicimlendirme/#comments Sat, 10 May 2008 13:01:36 +0000 Spaksu http://www.spaksu.com/?p=344 Sitenize yada blogunuza kullanımı göstermek amacıyla kaynak kodu eklerken epey zorluk çekersiniz. CSS ile hazırladığım basit ve ufak bir kodlama sayesinde istediğiniz biçimde ve renklerde sitenizde kodları gösterebilirsiniz. Verdiğim yapıyı css dosyanıza eklediğiniz taktirde <code>…</code> arasında kullanmanız yeterlidir. Size yazının devamında bir kaç renkte kodlama yapısı sunacağım. Yapıları gördüğünüz çerceveyide demo olarak kabul edebilirsiniz ve verdiğim kodları kendinize göre düzenleyip kendi biçiminizi oluşturabilirsiniz.

Sitemde gördüğünüz renkte;

code
{font:1em 'Courier New',Courier,Fixed;
display:block;
overflow:auto;
text-align:left;
background:#f8f8f8;
color:#111;
border:1px solid #ccc;
border-left:6px solid #ccc;padding:4px;}

Sitemde gördüğünüz biçimin mavisi;

code
{font:1em 'Courier New',Courier,Fixed;
display:block;
overflow:auto;
text-align:left;
background:#EAF3FA;
color:#222;
border:1px solid #83B4D5;
border-left:6px solid #83B4D5;padding:4px;}

Sitemde gördüğünüz biçimin kırmızısı;

code
{font:1em 'Courier New',Courier,Fixed;
display:block;
overflow:auto;
text-align:left;
background:#FFE3DD;
color:#111;
border:1px solid #FF3300;
border-left:6px solid #FF3300;padding:4px;}

]]> http://www.spaksu.com/cssde-code-tagini-bicimlendirme/feed/ 35 adet kullanışlı kod editör programı http://www.spaksu.com/35-adet-kullanisli-kod-editor-programi/ http://www.spaksu.com/35-adet-kullanisli-kod-editor-programi/#comments Wed, 07 May 2008 18:24:52 +0000 Spaksu http://www.spaksu.com/?p=340 Zamanımın az olması nedeniyle pek yazı yazamıyorum ancak elimden geldiği kadar internette yayınlanan faydalı bilgileri size haberdar etmeye özen gösteriyorum. Yine Smashing magazine sitesi güzel bir listeleme yapmış. Bu seferki konu 35 Adet kullanışlı kod editörü. Kod yazarları için önemli olan kodu yazarken aynı zamanda kontrol edebilmektir. Zamanında “C” Programlama dilinde ufak programlar yazarken en ufak bir noktalama hatasını bulmak epey zaman alıyordu. Şimdiki bu anlatılan programlar kod yazmak çok basit ve aynı zamanda eğlenceli bir hal alabiliyor. Kodların renklendirmesinden tutun hazır kod şemalarına kadar programların içinde barındırılıyor ve kod yazmak kolaylaşıyor. Fazla uzatmadan sizi 35 adet kullanışlı kod editörleri ile başbaşa bırakıyorum.

http://www.smashingmagazine.com/2008/05/07/35-useful-source-code-editors-reviewed

]]> http://www.spaksu.com/35-adet-kullanisli-kod-editor-programi/feed/ PHP ile Rasgele Resim Çağırma http://www.spaksu.com/php-ile-rasgele-resim-cagirma/ http://www.spaksu.com/php-ile-rasgele-resim-cagirma/#comments Sat, 03 May 2008 07:43:52 +0000 Spaksu http://www.spaksu.com/?p=338 Mesela sayfanızda wallpaper tarzında sabit resimler yayınlıyorsunuz yada yine wallpeper tarzında sabit arkaplanınız var. Fakat kullanıcının sıkılmasınıda istemiyorsunuz . İşte vereceğim kod tam olarak burada devreye giriyor. İnternet sitenizde bir klasör oluşturup içine boyutları aynı olan istediğiniz kadar resim aatıyorsunuz . Ve bu kod o klasörde bulunan resimmleri rasgele şekilde kullanıcılarınıza resim yada arkaplan olarak gösteriyor. Kulaanımı çok basit. Yazının devamında kodlama ve kullanımı için bilgileri bulabilirsiniz.

Kodu hostunuzda veya localhost’ta deneyin.

PHP kodu ; (foto.php olarak kaydedin)
< ?php
$dir = 'foto/';
$avatar_types[] = ‘gif’;
$avatar_types[] = ‘jpg; //ekleme yapabilirsin.
// ARTSTIL INTERACTIVE - www.artstil.net
// BURDAN SONRASINI DEGISTIRMEYINIZ.
$avatar = array_key_exists(’avatar’,$_GET)?$_GET['avatar']:”;
if ($avatar != ”) {
$avatar = urldecode($avatar);
}
else {
$avatars = array();
$directory = opendir($dir);
while ($list = readdir($directory)) {
if ($list != ‘.’ && $list != ‘..’) {
$ext_check = explode(’.',$list);
foreach ($avatar_types as $variable => $value) {
if (in_array($value,$ext_check) && !in_array($value,$avatars)) {
$avatars[] = $list;
}
}
}
}
closedir($directory);
$random = array_rand($avatars,1);
$avatar = $avatars[$random];
}
$file = fopen($dir.’/’.$avatar,’r');
$content = fread($file,filesize($dir.’/’.$avatar));
fclose($file);
die($content);
?>

Kullanım Şekli ; Üstteki kodu foto.php olarak kaydettikten sonra , kaydettiğiniz dosyanın bulunduğu alana foto/ isminde klasör oluşturun ve içine jpg yada gif formatında reesimlerinizi ekleyin. Kullanım şekli olarak normal src olarak çağırdığınız resimler yerine bu php dosyasını alttaki gibi çağırıcaksınız.

<img src="Foto.php">

]]> http://www.spaksu.com/php-ile-rasgele-resim-cagirma/feed/ Sitenizde sağ tuş menüsü http://www.spaksu.com/sitenizde-sag-tus-menusu/ http://www.spaksu.com/sitenizde-sag-tus-menusu/#comments Sat, 23 Feb 2008 08:43:18 +0000 Spaksu http://www.spaksu.com/sitenizde-sag-tius-menusu/ Eskiden internet sitelerinde sağ tuş tıklayıp kaynak kodlarını yada resimlerini (ç)almak isteyenler olurdu ki şimdi de var. Bunun için bir sürü yöntem geliştirildi sağtuş yasakları gibi. İşe yaranabilirliği tartışılır. Vereceğim yöntem çok az sitede kullanılıyor ancak sitenin navigasyonuna değer katan bir yöntem olduğu için tercih edilebilecek bir yöntem. Yöntem sağtuşu bir nevi site menüsü haline getiriyor. Menü içeriğini istediğiniz şekilde değiştirmenizi sağlıyor.Bu da navigasyonda avantaj sağlıyor. Uzatmadan siteyi vereyim ingilizce açıklamalar ve download için bu siteye girin ;

http://yura.thinkweb2.com/scripting/contextMenu/

]]> http://www.spaksu.com/sitenizde-sag-tus-menusu/feed/ CSS ile içeriğin ortalanması http://www.spaksu.com/css-ile-icerigin-ortalanmasi/ http://www.spaksu.com/css-ile-icerigin-ortalanmasi/#comments Mon, 19 Nov 2007 08:10:32 +0000 Spaksu http://www.spaksu.com/css-ile-icerigin-ortalanmasi/ Oxxi için hazırladığım giriş sayfasında bir tablo ortalaması hazırlamıştım. Çözünürlüğünüz ne olursa olsun sayfanızın içeriği üstten ve alttan tam olarak ortalanmış olarak gözükür. Yazının devamında css kod yapısını ve kullanımını bulabilirsiniz.

body {
background-color: #FF3300;
padding:0px;
margin:0px;
}
#icerik {
position:absolute;
height:200px;
width:400px;
margin:-100px 0px 0px -200px;
top: 50%;
left: 50%;
text-align: left;
padding: 0px;
background-color: #EEEEEE;
border: 1px dotted #000000;
overflow: auto;
}

Ve html sayfanızda cssyi import edip div tagı içinde id olarak aşağıdaki gibi kullanabilirsiniz. Örnek Sayfa için tıklayınız.
<div id="icerik"><center>Spaksu.com</center></div>

]]> http://www.spaksu.com/css-ile-icerigin-ortalanmasi/feed/ Basit Yatay Css Menu Yapımı http://www.spaksu.com/basit-yatay-css-menu-yapimi/ http://www.spaksu.com/basit-yatay-css-menu-yapimi/#comments Wed, 07 Nov 2007 11:54:45 +0000 Spaksu http://www.spaksu.com/basit-yatay-css-menu-yapimi/

1-İşte başlıyoruz önce cssmenu.html adında bir html dosyası oluşturalım. tek dosyada hem html hemde css kısmını ele alıcaz.
2-Menumüzü listeleme komutu olan <ul> komutunu kullanarak oluşturucağız işte menumuzun html kod yapısı:

<ul>
<li><a href="#">Css</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">ActionScript</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">SQL Server </a></li>
<li><a href="#">PHP</a></li>
</ul>

3- Sıra geldi css yapısını oluşturmaya :

<style type="text/css">
ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
background:#999900;
padding:5px;
border-right:1px solid #FFFFFF;
}
a:hover{
background:#CCCC00;
}
</style>

4-Alttaki sayfada css olarak istediğiniz değişikliği yapabilirsiniz. işte cssmenu.html full yapısı;

<html>
<head>
<style type="text/css">
ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
padding:5px;
border-right:1px solid #FFFFFF;
background-color: #FF3300;
}
a:hover{
background:#CCCC00;
}
</style>
<meta HTTP-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS yatay menu</title>
</head>
<body>
<ul>
<li><a href="#">Css</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">ActionScript</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">SQL Server </a></li>
<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

CSS Menuyu önizlemek için tıklayınız.

]]> http://www.spaksu.com/basit-yatay-css-menu-yapimi/feed/