html-css
  • Cem Karakurt
  • 39 Okunma
  • 20 Aralık 2013
  • 8
  •  

Kod Kutusu Css – Html

Blogunda eklenti,tema ve benzeri içerik paylaşanlar kodları daha düzenli kullanıcılarına sunmak için  kod kutusu içine eklerler.Wordpress kullananlar “SyntaxHighlighter Evolved” eklentisi ile gelişmiş bir kod kutusuna sahip oluyorlar.Bende blogumda bu eklentiyi kullanıyorum.Blogger ve diğer platformları kullananlar için bir eklenti paylaşacağım. Kod kutusu yapmanın bir çok yolu var bu sadece bir tanesi.

Demo :

kod kutusu

Css-Html Birleşik

<pre style="font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace; color: #000000; background-color: #eee;font-size: 12px;border: 1px dashed #999999;line-height: 14px;padding: 5px; overflow: auto; width: 100%"><code>buraya kodunuz gelecek
</code></pre>

Yukarıdaki kodu göstermek istediğiniz yere ekleyerek direk gösterebilirsiniz.Ya da kodları html/css olarak parçalayıp yerden tasarruf yapabilirsiniz.

Css Kodu :

pre{
font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;
color: #000000;
background-color: #eee;
font-size: 12px;
border: 1px dashed #999999;
line-height: 14px;
padding: 5px;
overflow: auto;
width: 100%
}

Yukarıda verdiğim css kodunu temanızda diğer css kodlarının yanına ekleyin.Ekledikten sonra sadece aşağıdaki kod ile kod kutusu oluşturabilirsiniz.

Not: Css kodlarını düzenleyip daha güzel bir görüşüş kazandırabilirsiniz.

İlginizi Çekebilir :   Popup Şeklinde Facebook Kutusu ve Mail Takip Eklentisi

Html Kodu :

<pre><code>buraya kodunuz gelecek
</code></pre>

YORUM YAP


BU YAZIYA 8 YORUM YAPILMIŞ

    Hüseyin Tekin 21 Aralık 2013 - 19:07

    Bu olayı merak ediyordum teşekkürler denerim lazım olucağında.

    Metin Bıyık 21 Aralık 2013 - 22:58

    Bende Hüseyin gibi bu olayı çok merak ediyordum :) Kendim kutu yapıp içine kod koyardım bu sefer koyduğum kod geçerli olurdu taktiğini öğrenmiş oldum :)

    furkan 22 Aralık 2013 - 00:24

    Saol Kardşeim Denerim Bi Ara :)

    Emre 22 Aralık 2013 - 00:35

    çok çok teşekkürler

    Genisarsiv.com 22 Aralık 2013 - 09:08

    Bende bunu arıyordum lazım oluyor teşekkürler

    Nedim Yıldırım 22 Aralık 2013 - 16:51

    Kod verirken ihtiyacımız olabiliyor. Teşekkürler :)

    ahmet idin 14 Şubat 2014 - 18:30

    kod kutusu için sagol :D

    Mesut İpek 5 Şubat 2015 - 16:13

    Kod kutusu için Teşekkürler. Rica etsem css konularına ağırlık verebilir misin