Kod editörü araçlarini özelleştirme

Makale editörü - seçenekleri özelleştirme

Araç editöründen yararlanmayı bilenler için makale, konu yazmak ve sayfa düzeninde fark yaratmak çeşitli özelliştirmeler yaparak mümkün. Kullandığımız platformların bize sunduğu genellikle üst veya sağ kısımda bulunan bu araçlar CSS tanımlarıyla sayfamıza uygun renk ve biçim vererek makale, konularda kısa yazı ve kod paylaşımında kolaylıklar sağlayacak şekilde düzenleyebiliriz. Genellikle kullanacağımız araçlar div, pre, code, blockquote gibi makale araç çubuğunda bulunan seçenekler için CSS kodlarını paylaşıcam. Bu araçları daha önce kullanmayan arkadaşlar için açıklama yapmama gerek yok, deneyerek nasıl kullanıldığını öğrenebilirsiniz. Bu araçlar için kendim oluşturduğum ve kullandığım özelleştirme kodlarını paylaşıcam.

Div kullanımı ve kodlama(özelleştirme)

Div'e özellik vermek için CSS tanımlarını div ile birleşik veya CSS kısmına yazabilirsiniz. Bunun için style tagı arasında css tanımı kullanılır. Comi adını verdiğim div'in kullanıldığı kodlar aşağıdadır.

Div ile birleşik css kodu:

<div id="pre_header" style=" padding: 8px 15px; color: #fff; font-size: 16px; font-weight: bold; padding-left: 5px; padding-bottom: 2px; padding-top: 2px; background-color: #24a0ab; ">nerdesin:&nbsp;<strong>ziyaretci defteri</strong>&nbsp;
</div>

CSS kısmı için kullandığım div kodu: 

.comi {  padding: 8px 15px; color: #fff; font-size: 16px; font-weight: bold; padding-left: 5px; padding-bottom: 2px; padding-top: 2px; background-color: #24a0ab;}

Önizlemesi:

Bu bir div

Özelleştirilmiş (pre) biçimli yazı kullanımı

Pre kısaltması kullanılan bu tag biçimli yazı olarak tanımlanır. Sayfada tek satır olarak uzar, bunu  css tanımıyla değiştirip sayfa içerisinde kullandım.örnek görünüm ve kod aşağıdadır.
Kullandığım pre kodu:

pre { color: #000; background: #f7f1c6; margin: 0 05px; padding: 8px; border: 1px solid #040404; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; }

Önizlemesi:

buraya

Kod yayınlama kutucuğu(özelleştirme)

Kod kullanımını genellikle alıntı tagı ile (blockquate) yağtığım için kod kutucuğunu kısa kodlar için kullanıyorum.Ama genel olarak şu şekilde kullanılır <code><pre>kodlar</pre></code> burada kullandığım kutucuk kısa kodlar için. Siz tam kod buyutunda kullanarak kod paylaşımı yapabilirsiniz. Ben kullandığım kod kutucuğu kodlarını paylaşıcam, siz bu ek üzerinde oynama yaparak  kendinize göre boyut ayarlaması yapabilirsiniz. Her hangi bir sorun veya yardım gerektirecek bir durumda yorum kısmına yazarsanız yardımcı olucam. Ayrıca textarea tanımlamasıylada kod kutucuğu oluştura bilirsiniz.

Code kutucuğu kodları:

code { background: rgba(144, 144, 144, 0.075); border-radius: 4px; border: solid 1px; font-family: "Courier New", monospace; font-size: 0.9em; margin: 0 0.25em; padding: 0.25em 0.65em; }

Kullandığınız tanımlara ait ID araçlarda var olmasına dikkat ederek tüm araçlar'da özelleştirme yapıp renk veya biçimini zevkinize göre ayarlaya bilirsiniz. Vermiş olduğum editör araç seçeneklerinin kullanımını farklı amaçlarla kullanabilir ve kolaylıklar sağlayacak sekilde oluştura bilirsiniz. Genellikle kutucuk oluşturan seçeneklerde değişikliklere değindim, her makale veya konularda bir alıntı yada kod kullanımına ihtiyaç duyulduğu için.

BLOCKQOTE özelleştirme

Makale araçları arasında en çok kullandığım ve tüm kod paylaşımlarını yaptığım bu seçenek ,blogger oluştur sekmesinde göz önünde olduğu için seçtim. Fazla bir söze gerek yok.

blockquote { white-space: pre-wrap; word-wrap: break-word; background: url(http://www.teknobeyin.com/wp-content/themes/astra/images/kodcubugu.png) no-repeat scroll 0 0 #f9f9f9; border: 1px solid #ddd; display: block; font: 500 1em/1.5em Verdana,Sans-Serif; margin: 5px 0; overflow: auto; padding-top: 12px; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; text-align: left; }

Bu seçenekler dışında tasarım veya içerikler arasında değişiklik yapmak istediğiniz ve kendi tarzınızı yaratmak isterseniz eğer size önerim jQuery öğrenin.