Blogger Kod Penceresi Oluşturma

Merhaba arkadaşlar,bu yayınımda sizlere bloğunuzda kullanabileceğiniz kod pencerelerini sunacağım.

Eğer bloğunuzda yayınlarda html,css,javascript gibi kodlar paylaşıyorsanız ve bunları pencere içine almak istiyorsanız aşağıdaki adımları uygulayın.

Adım 1:Aşağıdaki css kodunu ]]><b:skin> veya </style> kodunun üstüne ekliyoruz.

/* CSS Simple Pre Code */
pre {
    background: #333;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}

pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ddd;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}

pre::after {
    
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #91a7ff;
}

pre.code-html code {
    color: #aed581;
}

pre.code-javascript code {
    color: #ffa726;
}

pre.code-jquery code {
    color: #4dd0e1;
}

Adım 2:Aşağıdaki JavaScript kodunu</body> kodunun hemen üstüne ekleyin.

<script type="text/javascript">
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>
');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

Adım 3:Şimdi ise kullanım şeklini göstereyim hangi şekilde kullanmak istiyorsak aşağıdaki koddan seçiyoruz.

<pre class='code code-html'><label>HTML</label><code>...Html kod için</code></pre>

<pre class='code code-css'><label>CSS</label><code>... Css kod için ...</code></pre>

<pre class='code code-javascript'><label>JS</label><code>... JavaScript kod için ...</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>... jQuery kod için  ...</code></pre>

• Demo Görüntü

Sağlıcakla kalın...

 Kaynak:http://goo.gl/XVZPjs

Otomatik Slider Eklentisi (Css ile)

Merhaba arkadaşlar,

bu yayınımda sizlere blogunuza ekleyebileceğiniz otomatik geçen slider eklentisiden bahsedeceğim.

Otomatik olarak geçen slider manşet eklentisini gadget olarak da kullanabilirsiniz.Ben Gadget olarak denedim ama Gadget deilde blogda da kullanabilirsiniz blog kodlarından koymak istediğiniz yere koyalabilirsiniz.

Kullanımı

ADIM 1: Blogger Admin Panel'inden Şablon > Html'yi Düzenle diyoruz ve sonra Ctrl + F tuşlarına basarak ]]></b:skin> kodunu aratıp hemen üstüne aşağıdaki kodu yapıştırın.

/*! s3Slider for Blogger by Kod Blogcum => http://kodblogcum.blogspot.com */ .s3slider { margin:0 auto 10px; border:2px solid white; background:white none no-repeat 50% 50%; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4); -moz-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4); box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4); position:relative; overflow:hidden; } .s3slider.loading { background-image:url('data:image/gif;base64,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'); text-indent:-9999px; } .s3slider-content, .s3slider-content li { position:absolute; top:0; right:0; bottom:0; left:0; margin:0; padding:0; list-style:none; overflow:hidden; } .s3slider-content li { position:static; display:none; } .s3slider-content img { display:block; width:100%; height:100%; max-width:none; max-height:none; border:none; outline:none; padding:0; margin:0; } .s3slider-caption { position:absolute; right:0; bottom:0; left:0; height:auto; font:normal normal 11px/normal Helmet,Freesans,Sans-Serif; color:white; background-color:black; opacity:.8; filter:alpha(opacity=80); padding:7px 10px 10px; display:none; } .s3slider-title, .s3slider-meta {display:block} .s3slider-title a { font-size:110%; font-weight:bold; color:white; text-decoration:none; } .s3slider-title a:focus, .s3slider-title a:hover {text-decoration:underline} .s3slider-meta-comment:before {content:" - "}

ADIM 2 :Eklemek istediğiniz yere aşağıdaki kodları ekliyoruz ben Gadget olarak ekledim.
Gadget olarak eklemek için Blogger Admin Panel'inden Yerleşim > Gadget Ekle diyoruz.


<div id="s3slider-container"> <div class="s3slider loading" style="width:420px;height:270px;"> Memuat... </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> var s3slider_config = { url: 'http://kodblogcum.blogspot.com', numPost: 7, labelName: null, monthArray: [ "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ], noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC', newTabLink: false, containerId: 's3slider-container', slider: { width: 420, height: 270, timeOut: 4000 } }; </script> <script src="http://dte-project.googlecode.com/svn/trunk/blogger-s3slider.js"></script>

yukarıda http://kodblogcum.blogspot.com olan yere kendi blogunuzu yazarak uygulayabilirsiniz.

Memuat...

Css Dersleri 2 - Css Metin Düzenleme,Metini Özelleştirme

Bu makalemde sizlere Css le metinlere ne özellikleri verebiliriz ne özellikleri var onları göstereceğim.

Konu1 : Herhangi bir metinin rengini ayarlayın Renk özelliği metnin rengini ayarlamak için kullanılır. CSS ile, bir renk, en sık belirtilir: "# ff0000" gibi - bir HEX değeri gibi "rgb (255,0,0)" - RGB değeri "kırmızı" gibi - bir renk ismi
<html> <head> <style> body {color: red; } h1 {color: #00ff00;} p.ex {color: rgb(0,0,255);} </style></head> <body> <h1> This is heading 1</h1> <p> Bu paragraf kırmızı renktir.</p> <p class="ex"> Bu paragraf mavi renktir.</p> </body>	Başlık 1 Bu paragraf kırmızı renktir. Bu paragraf mavi renktir.

Konu2 : Metin Hizalama Text-align özelliği bir metnin yatay hizalamasını ayarlamak için kullanılır. Metin merkezli, ya da sağ veya sol, ya da haklı hizalanmış olabilir. Text-align "haklı" olarak ayarlandığında her satır eşit genişliğe sahip, böylece her satır gerilir, ve sol ve sağ kenar boşlukları düz.
<html> <head> <style> h1 {text-align: center;} p.date {text-align: right;} p.main {text-align: justify;} </style></head> <body> <h1> CSS Metin Örneği</h1> <p class="date"> May, 2009</p> <p class="main"> In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since</p> </body> </html>	CSS Metin Örneği May, 2015 In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. '

Konu3 : Linklerin altındaki çizgiyi kaldırın. Text-decoration özelliği ayarlamak veya metinden dekorasyonları kaldırmak için kullanılır. Text-decoration özelliği çoğunlukla tasarım amaçlı linklerden alt çizgiler kaldırmak için kullanılır.
<html> <head> <style> a { text-decoration: none; } </style> </head> <body> <p> Link: <a href="http://kodblogcum.blogspot.com">Kodblogcum.blogspot.com</a></p> </body> </html>	Link : kodblogcum.blogspot.com

Konu 4 : Metin süsleme,üstü çizili,ortası çizgili,altı çizili
<html> <head> <style> h1 {text-decoration: overline;} h2 {text-decoration: line-through;} h3 {text-decoration: underline;} </style></head> <body> <h1> Başlık 1</h1> <h2> Başlık 2</h2> <h3> Başlık 3</h3> </body> </html>	Başlık 1 Başlık 2 Başlık 3

Konu 5 : Metin harflerini kontrol edin,                kelimenin hepsi büyük olsun,                kelimenin hepsi küçük olsun,                kelimenin sadece baş harfleri büyük olsun. Metin dönüşümü kelimelerin metinde büyük veya küçük harflerlerle başlaması için kullanılır.
<head> <style> p.uppercase {text-transform: uppercase;} p.lowercase {text-transform: lowercase;} p.capitalize {text-transform: capitalize;} </style> </head> <body> <p class="uppercase"> Yeni Metin 1</p> <p class="lowercase"> Yeni Metin 2</p> <p class="capitalize"> Yeni Metin 3</p> </body> </html>	Yeni Metin 1. Yeni Metin 2 Yeni Metin 3.

Karakterleri arasındaki boşluğu belirtin Bu örnek  karakterler arasındaki boşluğu azaltmak için kullanılır.
<html> <head> <style> h1 {letter-spacing: 3px;} h2 {letter-spacing: -3px;} </style></head> <body> <h1> Başlık 1</h1> <h2> Başlık 2</h2> </body></html>	Başlık 1 Başlık 2

Kelimeler  arasındaki beyaz boşluğu belirtin Bu örnek, bir paragraftaki kelimeler arasında beyaz alanı artırmak veya azaltmak için kullanılır.
<html> <head> <style> p { word-spacing: 30px;} </style></head> <body> <p> This is some text in a paragraph.</p> </body> </html>	This is some text in a paragraph.

Css Metin Etiketleri ve Anlamları

Metinlerle ilgili Css etiketleri ve anlamları
Özellik	Açıklama
text-decoration:	Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
text-decoration: none:	Linkin altının çizili olmamasını sağlar.
text-align:	Metnin dikey olarak nasıl hizalanacağını belirler.
left:	Metni sola yaslar.
right:	Metni sağa yaslar.
justify:	Metni iki yana yaslar.
center:	Metni ortalar.
text-transform:	Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
overline :	Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
uppercase:	Kelimelerin bütün harflerinin büyük olmasını sağlar.
line-through:	Kelimenin ortasından çizili olmasını sağlar.
underline:	Kelimenin altının (Satır altından) çizili olmasını sağlar.
lowercase:	Kelimelerin bütün harflerinin küçük olmasını sağlar.
capitalize:	Kelimelerin ilk harflerinin büyük olmasını sağlar.
text-text-indent:	Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.

Css Dersleri 1 -Css Background Kodları

Bu makalemde sizlere Css arka plan kodlarından bahsedeceğim.

Konu1:Bir sayfanın arka plan rengini ayarlayın <html><head> <style> body {background-color: #b0c4de;} </style></head> <body> <h1> CSS WEB SAYFASI!</h1> <p> Örnek 1</p> </body> </html>

CSS WEB SAYFASI! Örnek 1

Konu2:Farklı unsurların arka plan rengini ayarlayın <html><head> <style> h1 { background-color: #6495ed;} p { background-color: #e0ffff;} </style></head> <body> <h1> ARKA PLAN RENK ÖRNEĞİ</h1> <p> Örnek metin 1 </body> </html>

CSS ARKA PLAN RENK ÖRNEĞİ Örnek metin 1

Konu3:Bir sayfaya arka plan olarak resim ekleyin <html><head> <style> body { background-image: url("resimurl.jpg"); } </style></head> <body> <h1> CSS WEB SAYFASI!</h1> </body> </html>

CSS WEB SAYFASI!

Konu3:Arka plan resminin tekrarlanmaması için gerekli kod body { background-image: url("img_tree.png"); background-repeat: no-repeat; }

Css Arka Plan Özellikleri

Özellik	Açıklama
background:	Gerideki görünüm.
background-attachment:	Bir arka plan görüntüsü sayfanın geri kalanı ile sabit veya kayar olup olmadığını belirler.
background-color:	Zeminin rengini belirler.
background-image:	Zemine resim yerleştirilmesini sağlar.
background-position:	Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
background-repeat:	Bir arka plan görüntüsünün kaç kere tekrarlanmasını belirler.

Hazır Textbox Css Örnekleri

ÖRNEK 1

<input class="textbox"type="text"> //HTML KODU <br><br> <style> .textbox { font-family: Arial, Helvetica, sans-serif; background: rgba(255, 255, 255, 0.44); color: #333; //CSS KODU border: 1px solid #A4A4A4; padding: 4px 8px 4px 4px !important; line-height: 1; width: 275px; height:25px; } .textbox:hover { border: 1px solid #FF00FF; box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); } .textbox:focus { border: 1px solid #4d90fe; outline: none; box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); background: rgb(255, 255, 255); } </style>


ÖRNEK 2

<input class="textbox"type="text"> <style> .textbox1 { background: white; border: 1px solid #ffa853; border-radius: 5px; box-shadow: 0 0 5px 3px #ffa853; color: #666; outline: none; height:23px; width: 275px; } </style>


ÖRNEK 3

<b>//HTML KODU</b> <input class="textbox"type="text"> <br><br> <style> .textbox2 { border-top: solid 1px #8e8e8e; border-right: solid 1px #d1d1d1; border-left: solid 1px #d1d1d1; <b>// CSS KODU</b> border-bottom: solid 1px #e4e4e4; height: 25px; width: 275px; } .textbox2:focus { border-color: #4488cc; border-style: solid; border-width: 2px; outline: 0; } </style>


ÖRNEK 4

<input class="textbox4"type="text"> <style> .textbox4 { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjYxRDEzQTBCMzI0MzExRTFBNDYzRkQ4Qzc3RDdBOTg5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjYxRDEzQTBDMzI0MzExRTFBNDYzRkQ4Qzc3RDdBOTg5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjFEMTNBMDkzMjQzMTFFMUE0NjNGRDhDNzdEN0E5ODkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjFEMTNBMEEzMjQzMTFFMUE0NjNGRDhDNzdEN0E5ODkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz52VTCHAAABFUlEQVR42uxV0Q2DIBBV4z8bdAM26AZ1Ap3AToAT6AR1Ap2gbuAGzKD/TkCP5NmQRpQaSH96yQsJHO/k7t0ZK6WikJZEgS14gHSeZxX6BQuhwerL3pw6ACMIQkuQHsgluDQnM2ugN3rgrK33ha3INdbqBHn1wWFVUU7ghMKxLgt8Oe46yVQ7lrgoD/JdwDf/tg+ueK4mGDfOR5zV8D3VaBwFy6CM1VrsCfjYG81BclrPHVZp7HcoLN8LshdgNMg50pDh7In+uSCIsKUpnqZJWfQ8EB4gOlLRnXBzVVFvpIA5yJTBV241aeLSLI622aRmiho8k3uYRcM6LlLksEWzMA/DjqP4+oNLW5G9Wfz/J/88wEuAAQA9yExzBAEQqwAAAABJRU5ErkJggg==) no-repeat 245px 0 #FFF; height: 25px; width: 275px; border: 1px solid #848484; } </style>


ÖRNEK 5

<input class="textbox5"type="text"> <style> .textbox5 { padding: 1px 20px; border: 0; height: 25px; width: 275px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset; -moz-box-shadow: 1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset; -webkit-box-shadow: 1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset; -webkit-background-clip: padding-box; outline: 0; } </style>


ÖRNEK 6

<input type="text" class="textbox6"> <style> .textbox6 { background: #ccc; border: 1px solid #666; box-shadow: 0 0 5px #666 inset; color: #333; float: left; padding: 7px 10px; width: 275px; outline: none; } </style>


ÖRNEK 7

<input class="textbox7"type="text"> <br><br> <style> .textbox7 { width: 275px; border: solid 1px #ccc; height: 26px; background: #5E768D; background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #546A7F), color-stop(20%, #5E768D)); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 0 #f2f2f2; -webkit-box-shadow: 0 1px 0 #F2F2F2; font-family: sans-serif; font-size: 16px; color: #F2F2F2; text-transform: uppercase; text-shadow: 0 -1px 0 #334F71; } .textbox7:focus { background: #728EAA; background: -moz-linear-gradient(top, #668099 0%, #728EAA 20%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #668099), color-stop(20%, #728EAA)); outline: 0; } </style>


ÖRNEK 8

<input class="textbox"type="text"> <style> .textbox8 { height: 25px; width: 275px; border: 1px solid #B9BDC1; color: #797979; -moz-box-shadow: 0 2px 4px #bbb inset; -webkit-box-shadow: 0 2px 4px #BBB inset; box-shadow: 0 2px 4px #BBB inset; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .textbox8:focus { background-color: #E7E8E7; outline: 0; } </style>


ÖRNEK 9


<input type="text"class="inputs" placeholder="e-mail" /> <br> <input type="password" class="inputs"placeholder="Password" /> <style> .inputs { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 0 #FFF, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; -moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; -ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; -o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; box-shadow: 0 1px 0 #FFF, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background: #EAE7E7; border: 1px solid #C8C8C8; color: #777; font: 13px Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 15px 10px 15px 40px; width: 270px; } .inputs:focus { -webkit-box-shadow: 0 0 2px #ED1C24 inset; -moz-box-shadow: 0 0 2px #ed1c24 inset; -ms-box-shadow: 0 0 2px #ed1c24 inset; -o-box-shadow: 0 0 2px #ed1c24 inset; box-shadow: 0 0 2px #ED1C24 inset; background-color: #FFF; border: 1px solid #ED1C24; outline: none; } </style>


ÖRNEK 10




<input type="text"class="inputs1" placeholder="Name"> <br><br> <input type="text"class="inputs1" placeholder="e-mail"> <br><br> <input type="password" class="inputs1"placeholder="Password"> <style> .inputs1 { background: #1F2124; background: -moz-linear-gradient(#1F2124, #27292C); background: -ms-linear-gradient(#1F2124, #27292C); background: -o-linear-gradient(#1F2124, #27292C); background: -webkit-gradient(linear, 0 0, 0 100%, from(#1F2124), to(#27292C)); background: -webkit-linear-gradient(#1F2124, #27292C); background: linear-gradient(#1F2124, #27292C); border: 1px solid #000; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); border-radius: 3px; font-family: 'Ubuntu', 'Lato', sans-serif; color: #FFF; width: 270px; height: 25px; } .inputs1:focus { box-shadow: inset 0 0 2px #000; background: #494D54; border-color: #51CBEE; outline: none; } </style>

Bilmeniz Gereken Css Kodları

Menu Gizleme Kodu 

<style type="text/css"> <!-- td.nav {visibility:hidden;} --> </style

Siteyi Ortalama Kodu
<style type="text/css"> <!-- html, body { text-align: center; } --> </style>

Arkaplan Yapma Kodu
<style type="text/css"> <!-- body{background-image:url(RESMİN URL'Sİ BURAYA YAZILACAK);background-attachment: fixed} --> </style>

Text menu kodu
<!-- begin class menu --> <div class="menu"> <ul> <li><a href="siteadı.tr.gg">sayfanızın adı</a></li> </ul> </div> <!-- end class menu -->

Köprü eklediğiniz yazıların altının çizilmemesi için 
<style> <!-- A{text-decoration:none} --> </style>

FİREFOX ve İE vs. site ortalamak için 
Tasarımın üzerine <div align="center"> <table border="0" width="70%"> <tr><td> Tasarımın altına </td></tr> </table> </div>

Arka plan sabitleme kodu
<style type="text/css"> <!-- body { background-image: url("arkaplandosyasi.jpg"); background-attachment: fixed; } --> </style>

CSS Kodları ve Anlamları

Bu makalemde sizlere CSS Kodlarını ve Anlamlarını anlatacağım, 

————————————————————————

LİNK ÖZELLİKLERİ
a : Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.
a:hover : Linkin imleç üzerine getirildiğindeki durumudur.
a:active : Linkin tıklandığı andaki durumudur.
a:visited : Linkin tıklandıktan sonraki durumudur.

————————————————————————

BİÇİMLENDİRME
color: Linkin rengini belirler.
background-color: Linkin zemin rengini belirler.
background-image: Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration: Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
font-weight: Yazının kalınlık veya inceliğini belirler.
border: Linkin etrafına kenarlık ekler.
display: Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.

————————————————————————

LİSTE ÖZELLİKLERİ
disk: Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.

————————————————————————

KATMAN ÖZELLİKLERİ
position: Katmanın yerinin belirlenmesini sağlar.
absolute: Katmanın yerinin pencere esas alınarak belirlenmesini sağlar.
relative: Katmanın yerinin bir önceki katman esas alınarak belirlenmesini sağlar.
static: Katmanın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
top: Katmanın üstten ne kadar aşağıda olması gerektiğini belirler.
left: Katmanın soldan ne kadar içeride olması gerektiğini belirler.
width: Katmanın genişliğinin ne kadar olacağını belirler.
height: Katmanın yüksekliğinin ne kadar olacağını belirler.
overflow: Katmanın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto: Otomatik olarak belirlenir.
scroll: Kaydırma çubuğu ekleyerek görünmesini sağlar.
visible : Katmanı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
hidden: Sığmayan yerleri gizler.
visibility: Katmanın görünebilirlik ayarını yapar.
visible : Katmanın görünür olmasını sağlar.
hidden: Katmanı gizler.
z-index : Katmanların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri katmanın en altta olacağını belirtir.

————————————————————————

FONT ÖZELLİKLERİ
font-family: Yazı türünü belirler.(Arial , Verdana gibi.)
font-style: Yazının normal veya sağa eğik olmasını sağlar.
font-variant: Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-weight: Yazının kalınlık-inceliğini belirler.
font-size: Yazının büyüklüğünü belirler.

————————————————————————

TEXT ÖZELLİKLERİ
word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.

————————————————————————

İMLEÇ ÖZELLİKLERİ
crosshair: İmlecin artı işareti şeklinde olmasını sağlar.
auto: İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
default: İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.
hand: İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
move: İmlecin taşıma işareti şeklinde olmasını sağlar.
ne-resize: İmlecin sağa yatık normal ok olmasını sağlar.
nw-resize: İmlecin sola yatık normal ok olmasını sağlar.
se-resize: İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
sw-resize: İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
n-resize: İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
s-resize: İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
w-resize: İmlecin sola doğru ince ok şeklinde olmasını sağlar.
e-resize: İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
text: İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
wait: İmlecin meşgul animasyonuna dönüşmesini sağlar.
help: İmlecin yardım-soru işaretine dönüşmesini sağlar.

————————————————————————

ZEMİN ÖZELLİKLERİ
background-color: Zeminin rengini belirler.
color : Renk adı.
transparent: Zeminin saydam olmasını sağlar.
background-image: Zemine resim yerleştirilmesini sağlar.
url : Zemine yerleştirilen resmin adresi.
background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.
repeat : Resmin bütün zemine yayılmasını sağlar.
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
top : Resmi yukarı yerleştirir.
center : Resmi ortalar.
bottom : Resmi aşağı yerleştirir.
left : Resmi sola yerleştirir.
right: Resmi sağa yerleştirir.
…px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.

————————————————————————

TABLO ÖZELLİKLERİ
margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.

_________________________________________________________________

padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

_________________________________________________________________

border : Tablonun kenarlarının şekillendirilmesini sağlar.

_________________________________________________________________

border-top : Tablonun üst kenarının şekillendirilmesini sağlar.
border-left : Tablonun sol kenarının şekillendirilmesini sağlar.
border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.

_________________________________________________________________

border-width : Tablonun kenarlarının kalınlığını belirler.
border-top-width : Tablonun üst kenarının kalınlığını belirler.
border-right-width : Tablonun sağ kenarının kalınlığını belirler.
border-bottom-width : Tablonun alt kenarının kalınlığını belirler.
border-left-width : Tablonun sol kenarının kalınlığını belirler.

_________________________________________________________________

border-style : Tablonun kenarlık türünü belirler.
border-top-style : Tablonun üst kenarlık türünü belirler.
border-right-style : Tablonun sağ kenarlık türünü belirler.
border-bottom-style : Tablonun alt kenarlık türünü belirler.
border-left-style : Tablonun sol kenarlık türünü belirler.

_________________________________________________________________

border-color : Tablonun kenarlarının rengini belirler.
border-top-color : Tablonun üst kenarının rengini belirler.
border-right-color : Tablonun sağ kenarının rengini belirler.
border-bottom-color : Tablonun alt kenarının rengini belirler.
border-left-color : Tablonun sol kenarının rengini belirler.

_________________________________________________________________

color : Tabloda geçen metnin rengini belirler.
width : Tablonon genişliğini belirler.
height : Tablonun yüksekliğini belirler.