Anasayfa / Css - Html / Kod Kutusu Css – Html
html-css
html-css

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 :   Sitenize WhatsApp İletişim Kodu Ekleyin

Html Kodu :

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

Bunları da kontrol edebilirsiniz.

Whatsapp 310x165 - Sitenize WhatsApp İletişim Kodu Ekleyin

Sitenize WhatsApp İletişim Kodu Ekleyin

Eğer sitenizden satış yapıyor ya da farklı bir konuda ziyaretçiler ile iletişim halinde olmanız gerekiyorsa …

8 Yorum

  1. Hüseyin Tekin

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

  2. Metin Bıyık

    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 :)

  3. furkan

    Saol Kardşeim Denerim Bi Ara :)

  4. Emre

    çok çok teşekkürler

  5. Genisarsiv.com

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

  6. Nedim Yıldırım
    Nedim Yıldırım

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

  7. ahmet idin

    kod kutusu için sagol :D

  8. Mesut İpek

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

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir