Blog Yazılarında Kod Göstermek İçin Kod Penceresi

Bazı blogcular bloglarında java, html, css gibi kodları okurlarıyla paylaşmak isterler.Ancak bu kodları yazı editöründe direk paylaştığınızda kodlarınız değilde o kodlarla ortaya çıkan sonuç gözükür.

 

İşte bu yüzden kodlarınızı ayrı bir kod penceresinde paylaşmalısınız.Bu yazımda CSS ile nasıl kod penceresi oluşturacağınızı ve DIV ile kodlarınızı bu pencerede nasıl göstereceğinzi anlatacağım.

 

Blogger’da şablonunuzdaki kodlardan ]]></b:skin> kodunu bulun ve hemen üstüne aşağıdaki kodları ekleyin.

 

.codeview {
font-family: Arial, Helvetica, sans-serif;
color: #CC0000;
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
border-top : 2px solid #cccccc;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 2px solid #cccccc;
background-color: #FFFFFF;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family :
"Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

 

Yukarıda CSS kodları kod panceresini oluşturmak içindi.Blogger yazı editöründe yeni bir blog yazısı yazarken kodları göstereceğiniz yere şu kodu ekleyin.

 

<div class="codeview">
Kodlarınız buraya gelecek...
</div>

 

Ortaya çıkan sonuç şöyle olacaktır:

Blogger'da kod gösterme kutusu

8 yorum:

  1. bloguma bir radyonun embed kodunu yapıştırıyorum. gadget ekle kısmından blogta beyaz bir çerçeve olarak görünüyor.en son flash player bilgisayarımda yüklü ve sitesi de sorun olmadığını bildiriyor.embed code southcast radyo portalında bir radyonunun beyaz çerçeveye sağ tıkladığımda film yüklü değil yazısı var.bir player çubuğunun görünmesi gerekmez mi yoksa başka bir şey daha yapmammı gerekiyor.teşekkürler.

    YanıtlaSil
  2. Bu konuda bilgi sahibi değilim ama deneyip sorunu anlamaya çalışacağım.Eklemek istediğiniz radyonun embed kodlarını bana mail ile gönderebilirmisiniz?

    YanıtlaSil
  3. Merhaba Serdar. Ben uyguladım ve sonuç başarılı oldu ama kod penceresinin eni sayfadan taşıyor. Onu nasıl düzeltebilirim.

    YanıtlaSil
  4. @Gülsüm GÜVEN TUNCER

    .codeview { kodunun içine width:XXXpx; kodunu eklemeyi deneyin.XXX yerine sayfanın yazı bölümünün genişlik değerini yazın.

    YanıtlaSil
  5. Merhaba Serdar bey;
    Kodları uyguladım.width:450 yaptım çerçeve olarak aldı.Ancak;
    Sorun:
    1.HTML olarak göster ve yorumla her ikisindede kodu okudu ve görünüm haline geçti.
    Sonuç :
    Kod pencere içinde kod olarak gözükmüyor.
    Eksik bir yer yaptığımızda sanmıyorum.Çerçeve görülüyor fakat görüntülü kod olarak değil.
    Ne yapılabilir.
    Teşekkür ederim.

    YanıtlaSil
  6. @Adnan Güney
    Blogger yazı editöründe oluştur ve HTML kodları bölümleri vardır.Siz sanırım oluştur bölümüne yazmaya çalışıyorsunuz.

    YanıtlaSil
  7. Her ikisinide denedim Serdar bey.Sizin içeriklerden birinden çerçeve kodunu aldım (Geniş olan) bu oldu.Fakat yukarıda yapılan anlatım ve html de iken kodun içine kodu yapıştırdığımızda ve oluştur dan sonra önizleme yaptığımızda çerçeve çıkmıyor.Kod aktif olarak.

    YanıtlaSil
  8. merhaba serdar bey ben denedim problemsiz oldu oncelikle tesekkurler ama ben bu kodlari sitemde su sekilde gostermek istiyorum. ornek bir site vermem gerekirse http://www.maskolis.com/2013/03/artikel-lanjutan-yang-kemarin.html adresinde tema tanitimda blog sahibi, buka diye bir kod kullanmis. hatta iki adet resim alip upload ettim. Birinci resim http://imageshack.us/photo/my-images/42/resim1w.jpg/ adresinde, ikinci resim http://imageshack.us/photo/my-images/715/resim2o.jpg/ adresinde. bu sekilde acilir kapanir bicimde kod nasil yapiliyor.Yani menuye bastiginda kod gosterecek yine ayni menuye bastiginda kod kapanacak. bir de yanyana gelecek sekilde ornegin buka,buka,buka gibi 3-4 tane kod kutusunu yapabilirmiyiz, tesekkurler...

    YanıtlaSil

Blogger tarafından desteklenmektedir.