Ocak 09, 2013

Blogger'da Kodları Çerçeve İçine Almak

Blogger'da Kodları Çerçeve İçine Almak

Blogger tasarımı , HTML kodları, Java ve Css kod paylaşımları yapan blogcuların her zaman kullanabileceği kod çerçeve yöntemi. Şimdi Kod Çerçeve Yöntemini istediğiniz tasarıma getirip kullanabileceksiniz. Eğer bu yöntemi  kullanmak istemeyen olursa ,  Kod Çevir adresini ziyaret edebilirler.
Şimdi gelelim kodları kod penceresi içine nasıl alınır? Ona bakalım

  • Blogger Kumanda Paneli
  • Şablon
  • HTML'yi Düzenle
  • Widget'ı Genişlet
Bu yolu takip ettikten sonra aşağıdaki kodu bulun;
]]></b:skin>
Yukarıdaki kodu bulduktan sonra tam üzerine gelecek şekilde aşağıdaki kodu yapıştırın.

.codeview { 
font-family: Arial, Helvetica, sans-serif; 
color: #0037FF; 
margin : 15px 35px 15px 15px; 
padding : 10px; 
clear : both; 
list-style-type : li; 
border-top : 2px solid #DBDBDE; 
border-right : 2px solid #DBDBDE; 
border-bottom : 2px solid #DBDBDE; 
border-left : 2px solid #DBDBDE; 
background-color: #FFFFFF; 


.codeview list { 
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ıdaki işlemi bitirdikten sonra şablonu kaydedip çıkın. Şablona kaydettiğimiz CSS ile tasarlanmış kodların çerçeve halinde gösterilmesini sağlayacak. Şimdi kodu uygulamaya geldik. Blogger'da yeni bir konu açın. Yazı düzenleme bölümünde HTML alanına girip aşağıdaki kodu yapıştırın.
<div class="codeview">
KOD BURAYA GELECEK.</div>
Yapıştırdığınız kodun ortasına paylaşmak istediğiniz kodları yapıştırın. Daha sonra her kod paylaşımında yukarıdaki kodu kullanacaksınız. 

Küçük bir hatırlatma: Eğer paylaşmak istediğiniz kodu HTML alanına yapıştırırsanız kodlar yan yana görünecek ve görüntü biraz çirkinleşecektir. Ama kodları normal metin yazma bölümünde girerseniz kodlar düzgün bir şekilde alt alta sıralanacaktır. Daha ayrıntılı olması için 2 resim de göstermek istiyorum. 

Önce paylaşmak istediğim kodu HTML bölümüne kodunun arasına ekliyorum ilk sonuç:
Şimdi ise kodları metin bölümünden giriyorum ikinci sonuç:
Eğer kod üzerinde değişiklik yapmak isterseniz düzenleyeceğiniz alanlar şunlar:
  • color: #CC0000;  Yazının rengi 
  • border-top : 2px solid #cccccc;  (2px) çerçevenin kalınlığı , #cccc çerçevenin rengi
  • border-right : 2px solid #cccccc; (2px) çerçevenin kalınlığı , #cccc çerçevenin rengi
  • border-bottom : 2px solid #cccccc; (2px) çerçevenin kalınlığı , #cccc çerçevenin rengi
  • border-left : 2px solid #cccccc; (2px) çerçevenin kalınlığı , #cccc çerçevenin rengi
  • background-color: #FFFFFF; Tasarımın arka plan rengi
Renkleri değiştirmek isterseniz Buradan değiştirebilirsiniz.
Ve sonunda bitti. Yapamadığınız bir yer olursa "YORUM" bölümünden iletebilirsiniz. Herkese kolay gelsin, iyi bloglamalar...

3 yorum :

Bence daha kısa yolu var. Çerçevenin kodunu bulup kodu yazarsak da olur.

@Ali yavas, Dediğiniz olabilir bu kod ile farklı tarzlarda çerçeve yapabilirsiniz. Tercih sizin.

kodu çerçeve içine alıyorum fakat daha sonra çerçevenin alt satırına inemiyorum

Yorum Gönder



Bloglama Zamanı'nda yayınlanacak yeni yazılar e-mail adresinize gelsin.


Google Arkadaşım Ol
Bloglama Zamanı
Bloglama Zamanı

Google+ paylaşımlarımı takip etmek için çevrelerinize ekleyin.