CSS ile Kod Editörü!

[Qarizma]

WordPress ile bloglayanların ki özellikle programlama ve tasarım kodlamaları ile uğraşanların çoğunun genelde ilk indirdiği eklenti kod editörleridir ki bunlar arasında en popüleri syntax adı verilen oldukça fazla dili kapsayan bir editördür bilmeyenler için söylüyorum ne işimize yarar ki bu editörler diye soracak olursanız hemen söyliyeyim yaptığınız uygulamalrın kodlarını ziyaretçilerinize göstermek isteyebilirsiniz eğer direk olarak kodu yazdığınızda renksiz iğrenç bir görüntü ortaya çıkar en azından kafa karışıtırıcı olur işte bu tarz yazımlar yerine bir kod editörü eklentisi yardımı ile yazılarımızda göstermek istediğimiz kodları renkelendirerek hoş bir görünüm sağlar fakat genelde tek düzelikten hoşlanmayanlar var ise kendi kod editörünüzü yapabilirsiniz tabiki diğer eklentiler gibi olmaz ama oldukça basit ve sade görünümlü hoş bir editör yapabilirsiniz.

Yapacağımız bu işlem için hiç bir programlama dilini kullanmayacağız çünkü bir eklenti yapmayacağız sadece bir tasarım dile css’i kullanarak html de kod gösterimine olanak sağlayan “<pre>” parametresini düzenleyeceğiz bildiğiniz gibi html de bazı parametreler yada tagların çeşitli fonksiyonları vardır örneğin <form> tagı form oluşturmamıza <h1> tagı yazı eklememizi sağlar aynı şekilde de <pre> tagını da kod daha dpğrusu alan gösterimimizi sağlar.

Şimdi kodlamamızı yapalım. Bunu yapmadan önce css de shadow ve radius özelliklerini belritmek istiyorum shadow öğenin kabartma gibi görünmesini sağlar radius ise örneğin bir kutu yaptığımız zaman köşelerin eğimi yani yuvarlak veya düz olmasını sağlar.Otomatik shadow ve radius bilgi için bakabilirsiniz.
“

width: 550px; margin: 0 auto; background: #222; padding: 20px;

genişlik yer ve kutumuzu arkaplan rengini ve kenarlıklarını belirledik margin:konum width:genişlikbackground: arkaplan rengi padding:yazının kenarlara olan uzaklığı.

şimdide <pre> tagları arasına ekleyeceğimiz yazının özelliklerini ekleyelim.
“

font-size: 15px; color: #FFFFFF; text-shadow: 0px 2px 3px #171717;

font-size: fontun büyüklüğü color:rengi text-shadow:shadow u yukarıda açıklamıştık burada text e yönedirdik bu da yazımızı kabartılmış gibi gösterecektir. Tabi kabartma rengini değiştirebilirsiniz ben #171717 olarak ayarladım.

Son olarakta box yani kutumuzun özelliklerini belirleyelim dilerseniz shadow veya raidus fonksiyonlarını kullanmayabilirsiniz ama görsel açıdan hoş bir görünüm sağladığı için kullanabilirsiniz.
“

-webkit-box-shadow: 0px 2px 3px #555;
-moz-box-shadow: 0px 2px 3px #555;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;

Yukarıda radius değerlerini küçülttükçe kutunun köşelerindeki yuvarlıklar düzelşemeye başlayacaktır. Son aşamamız ise html yapacağımız işlem oldukça basit ama bundan önce yukarıdaki kodlamayı toplu olarak gösterelim.
“

pre {
width: 550px; margin: 0 auto; background: #222; padding: 20px;
font-size: 15px; color: #FFFFFF; text-shadow: 0px 2px 3px #171717;

-webkit-box-shadow: 0px 2px 3px #555;
-moz-box-shadow: 0px 2px 3px #555;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;

}

Html kısmında ise sadece ekleyeceğimiz kodu yazıyı veya özel alan da dahil herhangi bir kısmı eklemek için tek yapmamız gereke <pre>buraya ekleyein</pre> tagları arasına kodlarımızı eklemek basit bir kod olabilir yazı ile ilgili bir açıklama olabilir veya aklınıza gelebilecek başka bir özel alan olabilir onun için kullanabilirsiniz.
Son olarakta blogunuza nasıl entegre edebilirsiniz gerçi profesyoneller bilirde olurki henüz yeni başlamışsınızdır diye onuda söyliyelim yukarıdaki kodlama hoşunuza gitti ise herhangi bir değişiklik veya ekleme yapmayacak iseniz kodu alıp temanızın css dosyasına kopyalayıp yapıştırmanız yeterli daha sonra ana panelinizden yazı ekleden girip html kısmını açıp ekleyeceğiniz yazıları <pre>buraya</pre> şeklinde eklemeniz yeterli olacaktır.

[ssyazilim]

eyvallah koç

[kadircetin4921]

güzel paylaşım