Blogger kod kutusu ekleme

Blogger kod kutusu kod paylaşımı eklenti paylaşımı gibi paylaşımlarda bulunan arkadaşların çok fazla kullandığı bir araç tema tasarımcılarının temaya özel yapmış olduğu çok güzel çok özellikli kod kutularıda var tabiki  ama onları kullanmak biraz kod bilgisi gerektiren bir iş olduğu için yeni başlayan arkadaşlar kullanmakta zorluk çekebilir.

Sizlere kendimce tasarladığım çok basit ve görsel anlamda da şık sayılabilecek kadar güzel kullanımı kolay kullanışlı bir kod kutusu sunacağım örnek sol kısımda <pre data-codetype="HTML">HTML kodları Buraya</pre> gibi uzun uzun kodlar yazmanıza gerek yok kod paylaşmak için.

Lafı daha fazla uzatmadan gelelim blogger kod kutusu kurulumuna blogger kontrol paneline girin Tema bölümününe tıklayın HTML'yi Düzenle kısmına tıklayın ve açılan kısımda CTRL F kombinasyonu ile
]]></b:skin> kodunu aratın kodu bulduktan sonra hemen üst kısmına aşağıdaki kodları yapıştırın temanızı kayıt edip çıkış yapabilirsiniz.

pre { 
background-image: linear-gradient(rgba(0, 0, 0, 0.05) 50%, transparent 50%, transparent);
background-size: 100% 50px;
border:solid #1eb093;
line-height:16px;
color:#000;
border-width:4px;
font-family:monospace;
font-size:14px;
padding:4px 7px;
background-color:#EEE;
border-radius:6px;
max-height:500px;
overflow:auto;}

1-Yukarıda kırmızı ile belirttiğim border solid #1eb093 kod kutusunun çerçevesidir siz istediğiniz rengi ayarlayabilirsiniz.

2-Yukarıda kırmızı ile belirttiğim line height:16px kodların satır aralarındaki boşluğu belirtir isterseniz onuda değiştirebilirsiniz.

3-Yukarıda kırmızı ile belirttiğim color: #000 kodlarınızın rengini belirtir isterseniz onuda değiştirebilirsiniz.

4-Yukarıda kırmızı ile belirttiğim border-width:4px kod kutusunun çerçeve kalınlığını belirtir isterseniz onuda değiştirebilirsiniz.

5-Yukarıda kırmızı ile belirttiğim font-family:monospace kodlarınızın yazı tipini belirtir isterseniz onuda değiştirebilirsiniz.

6-Yukarıda kırmızı ile belirttiğim font-size:14px kodlarınızın yazı boyutudur isterseniz onuda değiştirebilirsiniz.

7-Yukarıda kırmızı ile belirttiğim padding:4px 7px üst ve sol kenar açılarını belirtir bu boyut idealdir. ama isterseniz onuda değiştirebilirsiniz.

8-Yukarıda kırmızı ile belirttiğim background-color:#EEE kod kutusunun arka planını belirtir isterseniz onuda değiştirebilirsiniz.

9-Yukarıda kırmızı ile belirttiğim border-radius:6px kod kutusunun oval kenarlarını belirtir isterseniz onuda değiştirebilirsiniz.

10-Yukarıda kırmızı ile belirttiğim max-height:500px kod kutusunun yüksekliğini belirtir ve idealdir.

Yukarıdan aşağıya kadar sayfa boyunca uzayan kod kutuları bence hoş görünmemekte hemde kodları kopyalamak isteyen kişi için zorluk çıkarır kodu kopyalıyım derken komple sayfa içeriğide kopyalanır onun için 500px yeterlidir tam sayfanın orta kısmında kalır hemde kolay kopyalama işlemi yapılır.

Aslında çok basit bir konuyu tam detaylı bir şekilde açıkladığımı düşünüyorum yinede yapamayan yada bir sorun ile karşılaşan olursa yorum yaparak bildirebilir yada iletişim sayfasından bana ulaşabilirsiniz kodları kullanıcak arkadaşlara şimdiden hayırlı olsun diyeyim. Kodları bloğunuzda paylaşmak isterseniz Vip Mekan'dan alıntı olduğunu belirtirseniz sevinirim. Takipde kalın yazılarımı okumaya devam edin.