WordPress'te CSS ile Code Bölümü Oluşturmak

Bu anlatımımızda CSS kodu ile Wordpress yüklü sitemizde kod paylaştığımızda bu kodun paylaşım alanını şekillendireceğiz. Yani paylaşım alanına bir resim ekleyeceğiz. Bu resim sitenizin adı olabilir veya bir yazı olabilir.

Merhabalar,

Bu anlatımımızda CSS kodu ile wordpress yüklü sitemizde kod paylaştığımızda bu kodun paylaşım alanını şekillendireceğiz. Yani paylaşım alanına bir resim ekleyeceğiz. Bu resim sitenizin adı olabilir veya bir yazı olabilir...



Ne anlatmak istediğimi aşağıdaki kod ile anlayacaksınız.

Kod:


code {

margin : 4px 8px;

padding : 8px;

text-align : left;

display : block;

overflow : auto;

font : 500 1em/1.5em 'Lucida Console', 'courier new', monospace;

background: #ff9966 url(http://img69.xooimage.com/files/a/d/7/code-30f53ad.png) right top no-repeat;

border : 1px dashed #D7C3C3;

}




Kodu sisteminizin 'style.css' dosyasında herhangi bir bölüme ekleyiniz. Kullanmak için yazınızda html/görsel alanından html e tıklayıp ardından more, code, bul, ins gibi komutlardan code butonunda tıklayınız. Kodunuzu yazıp code kodunu kapatınız.

Ayrıca kod alanının arkaplanı turuncu renkte ve ekli olan resim kendi resmimiz. Siz koddaki:


background: #ff9966 url(http://img69.xooimage.com/files/a/d/7/code-30f53ad.png)



alanları kendinize göre değiştiriniz.

Tabi ki tek bu alanları değil, CSS bilginizle diğer alanlarda da oynamalar yapabilirsiniz. :)

Çalışmanın Örneği / Önizleme:

  • Etiketler;
Bugrahan05 Bugrahan05
Sanalkurs.net
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Yukarı Git