29 Ekim 2014 Çarşamba

Sayfa Başına Dön Butonu(css-fixed)

Merhaba arkadaşlar bu yazımda sizlere sayfa başına dön butonunun yapılmasını anlatacağım. Aslında olay oldukça basit css'in possition:fixed metodunu bilmeniz durumunda bu yazıya bakmanıza bile gerek kalmayacaktır. Aşağıda kodu bulunmaktadır.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
<div style="  position: fixed; bottom:10px;
    right:10px;background-color:red;width:30px;color:pink;"><a href="#top" _fcksavedurl="#top" _fcksavedurl="#top" class="sayfabasi"><img src="http://img.webme.com/pic/p/piriketseverler/sayfabasi.png" border="0" title="Sayfa Başına Dön" /></a> <br/></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>



Daha İyisi :)
<!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>Untitled Document</title>
</head>

<body>
<!--Toplist 24 Yukarı Çık Kodu Başlangıcı-->  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src='http://www.weebly.com/uploads/1/5/7/6/15762290/toplist24-yukaricik3.js' type='text/javascript'></script> <!--Toplist 24 Yukarı Çık Kodu Sonu-->   
<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>
</html>
js: 
https://drive.google.com/?utm_source=tr&utm_medium=button&utm_campaign=web&utm_content=gotodrive&usp=gtd&ltmpl=drive&pli=1#folders/0B2gchfxRq3uRZ05ERno0dUtpRWc



24 Ekim 2014 Cuma

Jquery Lightbox ile Resim Büyütme

Merhaba arkadaşlar,
Bilindiği üzere web üzerinde resim galerisi yapma aşaması bazen can sıkıcı olabiliyor. Bu can sıkıcılığı ortadan kaldıracak bir Jquery kütüphanesi işimizi kolaylaştıracaktır. Bu kısımda Lightbox işimize yarıyacaktır. Şimdi arkadaşlar uygulamalı bir şekilde anlatmaya başlayalım.
1.Adım:
https://yadi.sk/d/7sRQG_PzcGWL5 adresinden belirtilen js, css ve image sayfalarını indiriyoruz.
2. Adım: projemize indirilen jquery ve lightbox dosyalarının yolunu gösteriyoruz.
3. Adım: css lerimizi projemize import ediyoruz.
4. Resimlerin sadecce yolunu belirtip sitenizin istediğiniz alanına ekleyebilirsiniz.

KODU:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
    <title>Deneme</title>
    <meta charset="UTF-8">
    <link href="screen.css" rel="stylesheet" type="text/css"/>
    <link href="lightbox.css" rel="stylesheet" type="text/css"/>
    <script src="jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="lightbox.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="image-row">
<a class="example-image-link" href="img/image-1.jpg" data-lightbox="example-2" data-title="Ammar ASLAN"><img class="example-image" src="img/image-1.jpg" alt="image-1"/></a>
</div>
</body>
</html>