Arkadaşlar baştan söyleyeyim bu yazı bölüm hakkında bilgiler içerir ve gene baştan söyleyeyim oceanic 815 düşmüyor. Faraday’ın teorisi kısmen doğru çıkıyor. Kısmen diyorum çünkü bizimkiler L.A.’a gidemiyor. Aslında gidiyorlar ama o bizimkiler gitmiyor Neyse sizin kafanız karıştı en iyisi siz buradan 6. sezon ilk bölümü izleyin.

Çekiliş numaram tam olarak bir milyon üç yüz bin iki yüz otuz

Katılmak bedava , katılmak isteyen arkadaşlar http://www.ozgurlukicin.com/piyango/ bu adresten olabilirler.

Onuncu sınıfın sonunda günde 13 14 bölüm bitirerek, izleyeme başladığım lost’un son sezonu salı günü başlayacak. Umarım hiç aralık vermeden yayınlarlar ve hiçbir bölüm sınav haftalarıyla çakışmaz :/ Bakalım n’olcak, hayırlısı

Bu yazıda seo ile ilgili çalışırken işinizi kolaylaştıracak bir iki firefox eklentisinden bahsedeceğim.

#Web Developer

Seo sorunlarını teşhis etmeye ve biçimlendirmeye yarar. Firefox, seamonkey, flok için tasarlanmıştır, her platformda çalışır. Windows mac os ve hatta linux u destekler.  [bağlantı adresi]

#Groowe

Bir çok arama sitesine girmeden size arama imkanı sunar. Bu sayede zamandan tasarruf edersiniz. [bağlantı adresi]

#Search Status

Girdiğiniz bir site hakkında aklınıza gelebilecek önemli arama motorlarındaki bilgileri verir. [bağlantı adresi]

#User Agent Switcher

Tarayıcının kullanıcı arayüzüne geçiş için bir menü ve bir araç çubuğu düğmesi ekler. O Firefox, Flock, SeaMonkey ve Songbird için tasarlanmıştır ve her platformda çalışır bu tarayıcılar Windows, Mac OS X ve Linux dahil destekler. [bağlantı adresi]

Bu yazımda sizlere standartları yakalamak ve css yazmayı daha kolay hale getirecek 10 yöntem vereceğim. Hadi başlayalım.

1- Her zaman css sıfırlamayla başla

Çoğu kez olur bu bazı tarayıcılar düzgün gösterirken bazısı o kadar da düzgün göstermez. Bu sorunu gidermek için iki farklı yöntem var;

ilki kullanımı kolay birşey, aşağıdaki kısa kod parçası fakat her biraz eksik kalabiliyor.

* { margin:0; padding:0; }

Diğeri eric meyerinki daha uzun ama ilkinden daha iyi olduğunu söyleyebilirim.

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

2- Kolay tarama için girinti

Doğru söyleyin sizce de aşağıdaki gibi bir görünüm hoş mu?

.classname {
background: #FFF;
border: 0;
color: #252525;
float: left;
margin: 0;
padding: 0;
}

Böyle göze daha hoş görünüyor.

.classname {
     background: #FFF;
     border: 0;
     color: #252525;
     float: left;
     margin: 0;
     padding: 0;
}

3- Yorum bırakmayı unutmayın

Tasarımı yaparız, ve belli bir zaman onunla hiç uğraşmayız. Neyi nereye yazdığımızı unuturuz tabiki.

sonra css dosyasını tekrar düzenleyeceğimiz zaman, ona tekrar alışma süreci olur. İşte bu süreci kısa tutmak için

size tavsiyem yorum bırakın, ahanda böyle.

/********** Hacı boşuna arama sidebar kodları burda **********/

4- Tek Satır yada çok satır kararı sen ver

Size burda iki farklı yol sunuyorum, aşağıda örneği verdim anlaycaksınız. Benim fikrimi sorarsanız tek satır.

.classname { border: 0; background: #000; color: #676767; padding: 0;}

.classname {
background: #FFF;
border: 0;
color: #252525;
float: left;
margin: 0;
padding: 0;
}

5- Yazılarınızda Bir stil belitleyin

Tek bir yazı stiliniz olsun, her yazı için ayrı ayrı css kodunuza eklemelerde bulunmayın, bu size hem zamandan tasarruf yapacak,

hemde yazılarınızda sabit bir görüntü kazandıracaktır. Css kodunuzda yoksa yazılarınız için h1 h2 h3 pre code bloq stilleri belirleyin,

yada onları bir gözden geçirin bu size kalmış.

6- Koşullu Css

Ne yazık ki dünyada tek bir tarayıcı firması yok bu yüzden sitemize farklı tarayıcılarla ulaşılabiliyor ve sitemizin görüntüsü

hepsinde istediğimiz gibi çıkmıyor, bu sorunu anlatmak için css in if fonksiyonunu kullanabiliriz. http://www.conditional-css.com/usage bu adreste

bir anlatım var ingilizce fakat anlayacağınızı umuyorum.

7- Kısa kodları kullanın

Bu kuralda yine css dosyamızın boyutunu azaltmak için geliştirilmiş. Aşağıda bir bölümün margin ini belirleyen css kodu var.

Onun altında da bir css kodu ikiside aynı işi görüyor, fakat sizde görüyorsunuz ki ikincisi daha kısa.

.classname {
margin-top: 1px;
margin-right: 2px;
margin-bottom: 4px;
margin-left: 1px;
}

Yukarıdaki kod sırasıyla üst, sağ, aşağı ve sol u belirtiyor. Aşağıdaki kod da sırasıyla aynı yünleri belirtiyor.

.classname { margin: 1px 2px 4px 1px; }

8- Kendinize bir içindekiler tablosu oluşturun

Daha önce 3. kuralda bahsettiğimiz olayın biraz daha genel hali css dosyamızda sırasıyla hangi dıv lerin belirlendiğini gösteren

bir tablo oluşturun bu işinizi kolaylaştıracaktır.

/*****************************************************
1. HEADER kodu
2. NAVIGATION kodu
3. CONTENT kodu
4. SIDEBAR kodu
5. FOOTER kodu
*****************************************************/

9- class ve ıd leri kolay takip için

Aşağıda dağınık css dosyasından bir parça görüyorsunuz.

.wackyblueline5 { ... }
.leftsidesection { ... }
#bodyleftcurve2 { ... }

Ve burada da daha düzenli css dosyasından bir kod parçası, size tavsiyem css ıd ve class larınızı düzgün belirleyin birden fazla kelime ise

onları ‘-’ ile ayırın.

.sidebar-title { ... }
.postwrap { ... }
.main-navigation { ... }

10- Alfabetik sıra

Bu kural biraz olayı aşmışlar için geçerli olabilir. Neyse css kodlarını alfabetik sıraya göre yazarsanız okunması kolay olur.

.classname {
border: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin: 48px;
padding: 0;
position: relative;
z-index: 101;
}

İlk yazımda ne yazayım diye düşünürken sonunda işe yarar bir şeyler buldum. Bu yazımda size jqueryve css ile hazırlanmış hoş bir efekt uygulaması anlatacağım. Yapılış kısmına geçmeden önce uygulamanın örneğine şuradan bakabilirsiniz. Şimdi lafı kısa kesip icraata geçelim.

xhtml kısmı

Bu bölüm işin en kolay kısmı, aşağıdaki kodları resminizin görünmesini istediğimiz kısma yerleştirin. Tabi ki yerleştirmeden önce resim url lerinizi ve açıklamalarınızı eklemeyi unutmayın.

<ul>
	<li>
		<a href="#"><span><img src="resim_url.gif" alt="" /></span></a>
		<h2><a href="#">Resim açıklaması</a></h2>
	</li>
</ul>

Css Kodları

Css kodlarında düzenleme yapmanıza gerek yok fakat isterseniz açıklamakısmındaki yazı rengini vb. değişikliklerde bulunabilirsiniz. Kodları css klasörünüze yerleştirin.

ul.gallery {
	width: 708px; /*--Adjust width according to your scenario--*/
	list-style: none;
	margin: 0; padding: 0;
}
ul.gallery li {
	float: left;
	margin: 10px; padding: 0;
	text-align: center;
	border: 1px solid #ccc;
	-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/
}
ul.gallery li a.thumb {
	width: 204px; /*--Width of image--*/
	height: 182px; /*--Height of image--*/
	padding: 5px;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}
ul.gallery li span { /*--Used to crop image--*/
	width: 204px;
	height: 182px;
	overflow: hidden;
	display: block;
}
ul.gallery li a.thumb:hover {
	background: #333; /*--Hover effect for browser with js turned off--*/
}
ul.gallery li h2 {
	font-size: 1em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 10px;
	background: #f0f0f0;
	border-top: 1px solid #fff; /*--Subtle bevel effect--*/
}
ul.gallery li a {text-decoration: none; color: #777; display: block;}

Jquery Kısmı

Bu bölümde ilk olarak aşağıdaki aşağıdaki kodu head tagları arasına ekleyin.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Daha sonra aşağıdaki kodu yine head tagları arasına  ekleyin.

<script type="text/javascript">

$(document).ready(function() {

	$("ul.gallery li").hover(function() { //On hover...

		var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

		//Set a background image(thumbOver) on the <a> tag - Set position to bottom
		$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

		//Animate the image to 0 opacity (fade it out)
		$(this).find("span").stop().fadeTo('normal', 0 , function() {
			$(this).hide() //Hide the image after fade
		});
	} , function() { //on hover out...
		//Fade the image to full opacity
		$(this).find("span").stop().fadeTo('normal', 1).show();
	});

});

</script>

İşte bu kadar sizin yapacağınız tek şey html kodlarına resimlerinizi eklemek.