CSS etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
CSS etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Blogger Kod Penceresi Oluşturma

Pazartesi, Ekim 19, 2015 Yorum Yapmak İstermisiniz? icon18_edit_allbkg
blogger-kod-penceresi-olusturma

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>
Sağlıcakla kalın...
 Kaynak:http://goo.gl/XVZPjs

Otomatik Slider Eklentisi (Css ile)

Cumartesi, Mayıs 16, 2015 Yorum Yapmak İstermisiniz? icon18_edit_allbkg


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.





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.




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

Memuat...

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

Perşembe, Şubat 05, 2015 Yorum Yapmak İstermisiniz? icon18_edit_allbkg
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

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.

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.
Link : kodblogcum.blogspot.com


Konu 4 : Metin süsleme,üstü çizili,ortası çizgili,altı çizili

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.
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.

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.
This is some text in a paragraph.


Css Metin Etiketleri ve Anlamları

Metinlerle ilgili Css etiketleri ve anlamları
ÖzellikAçı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ı

Çarşamba, Şubat 04, 2015 Yorum Yapmak İstermisiniz? icon18_edit_allbkg
Bu makalemde sizlere Css arka plan kodlarından bahsedeceğim.

Konu1:Bir sayfanın arka plan rengini ayarlayın

CSS WEB SAYFASI!

Örnek 1

Konu2:Farklı unsurların arka plan rengini ayarlayın


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


Konu3:Bir sayfaya arka plan olarak resim ekleyin

CSS WEB SAYFASI!


Konu3:Arka plan resminin tekrarlanmaması için gerekli kod

Css Arka Plan Özellikleri
ÖzellikAçı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

Salı, Şubat 03, 2015 2 Yorumlar icon18_edit_allbkg
ÖRNEK 1




ÖRNEK 2




ÖRNEK 3




ÖRNEK 4




ÖRNEK 5




ÖRNEK 6




ÖRNEK 7




ÖRNEK 8




ÖRNEK 9





ÖRNEK 10