 |
| Blogger Kod Kutusu Ekleme |
Blogger Kod Kutusu Ekleme
Blogunuzda kod paylaşımı yaptığınız takdirde göreceksiniz ki içerik ile kodun aynı fonta aynı boyuta sahip olması pek de güzel bir görüntü sunmayacaktır. Dolaysıyla bu yazımda sizlere okurlarınıza kod paylaşamak istediğiniz zaman kodunuzun sitenizde gayet şık ve güzel görünümlü bir kutu içerisinde sunabileceğiniz bir kod kutusunu sizlerle paylaşmak istedim. Kod kutusu üzerinde CSS tasarım değişiklikler yaparak kod kutusuna istediğiniz şekli, görünümü vereceksiniz.
Kod Kutusunun Kurulumu :
- Blogger hesabımıza giriş yaparak Yönetim Paneli kısmında Şablon > HTML’yi Düzenle bölümüne giriş yapalım.
- CTRL + F kombinasyonu yardımı ile “]]></b:skin>” değişkenini aratalım
- “]]></b:skin>” kodunu bulduktan sonra bu kodun bir satır üstüne aşağıda vermiş olduğum kodları ekleyin.
- Kodu istediğiniz şekilde düzenleyebilir veya olduğu gibi kaydedip çıkabilirsiniz.
Kod Kutusu Üzerinde Yapabileceğiniz Değişiklikler
Aşağıda vermiş olduğum kod kutusu içinde turuncu ile belirttiğim renk kodları, kod kutusunun çerçevesi ve kod kutusunun scroll rengidir. Bu renk kodlarını dilediğiniz şekilde değiştirebilirsiniz. Yine aşağıda vermiş olduğum kod kutusu içerisinde mavi ile belirttiğim renk kodu, kod kutusunun arka plan rengidir. Kod kutusunun arka planını mavi ile belirttiğim renk kodu ile dilediğiniz gibi değiştirebilirsiniz.
Kod Kutusu İçin Eklemeniz Gereken Kod
pre {
/* Kod Kutusu Başlangıç/mrfurkanozkan.blogspot.com */
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;
/*Kod Kutusu Bitiş/mrfurkanozkan.blogspot.com */
}
Örnek Görünüm
Ekleyeceğiniz Kod
Kod Kutusunun Kullanımı
Özellikle acemi bloggerların bu konuda kafası karışacaktır. Kod kutusunun kullanımı dediğim yöntemle yaparsanız eğer sorunsuzca çalışacaktır ve siz de sorunsuzca kullanabileceksiniz.
- Öncelikle size vermiş olduğum kodların kurulumunu yani yukarıda kurulum aşamalarını adım adım belirttiğim kurulumu yapmış olmanız lazım
- Makalenizde yayınlamak istediğiniz kod hazır ise makalenizi yazarken "HTML" bölümünü açın ve <pre>Ekleyeceğiniz Kod</pre> bu kodun içinde bulunan Ekleyeceğiniz Kod kısmına istediğiniz kodları yapıştırın
- Tüm bunları yaptıktan sonra HTML bölümünde çıkabilirsiniz.
Not: HTML kısmında kod ekleme kısmını yapmanız şart yoksa kod kutusu karman çorman olacaktır.
Bir yazının daha sonuna geldik. Eğer ki kodun kullanımında, kurulumunda veya çalışmasında herhangi bir problem var ise bunu yorum ile belirtin. Makalemi beğendiyseniz sosyal medya hesaplarınızda paylaşarak bana destek olabilirsiniz. Esen kalın, beni okumaya devam edin 😊