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

Alıntıdır