Blogger Kod Kutusu Ekleme [Hatasız]

Blogger Kod Kutusu Ekleme [Hatasız]Bildiğiniz üzere blogger bünyesinde yazı içerisine kod kutusu gibi bir özellik yok, ben de sitemin altyapısı olarak blogger kullandığım için sürekli olarak sizlerle yöntemler, scriptler vb. bilgilerimi paylaşıyorum bu yüzden de sürekli olarak bana yazı içerisinde kod paylaşmak için bir kutu gerekli amacı dışında görsel olarak da güzel durmalıydı ben de internette bulduğum bir CSS kutusunu kendimce düzenledim ve şık aynı zamanda da responsive bir kod kutusu hazırladım.

Kurulum:

  • Blogger Yönetim Paneli > Şablon > HTML’yi Düzenle bölümüne girelim.
  • CTRL + F yardımı ile “]]></b:skin>” değişkenini aratalım.
  • ]]></b:skin>” kısmının üzerine aşağıda vermiş olduğum kodu ekleyin.
  • Kırmızı ile belirttiğim kısım kod kutusunun çerçevesi ve scroll rengidir, mavi ile belirttiğim kısım ise arkaplan rengidir kendinize göre düzenleyebilirsiniz.
Kullanım:
Yazı içerisine kod ekleyeceğiniz zaman “<pre>Ekleyeceğiniz Kod</pre>” şeklinde eklerseniz kod kutunuz gözükecektir.
Eklenecek Kod:
pre {
heaight:20px;
border-style:solid;
border-color:#CF2F1F;
border-width:1px;
border-left:4px solid #CF2F1F;
font-family:Courier;
font-size:14px;
padding:4px;
overflow: auto;
overflow-x:hidden;
background-color:#EEEEEE;
overflow: auto;
}

Örnek:

Ekleyeceğiniz Kod