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

About Unknown

Web Sayfamızda, Bilgisayar, İntenret, Güvenlik Sistemleri, Cep Telefonları, Tablet Bilgisayarlar, Navigation Sistemleri, Modem Kurulumları ve Smart TV ayarları ile ilgili tamamı görsel anlatımla hazırlanmış makaleler bulabilirsiniz. Keyifli Zaman Geçirmenizi Dileriz.
«
Next
Sonraki Kayıt
»
Previous
Önceki Kayıt

Hiç yorum yok:

Yorum Gönder