1. Klasik ve basit bir çerçeve ile başlayalım
İlk örnek en basit çerçeve örneği olsun.Resimde gördüğünüz gibi yazılarınızı 1 pixel kalınlığında siyah bir çerçeve içine almak için ]]></b:skin> kodundan önce şu kodu ekleyin:
2. Çerçevenin kalınlığını ve rengini değiştirelim
İkinci örnekte çerçevinin kalınlığını 3 pixele çıkaralım ve rengini kırmızı yapalım.Bunun için kodları şu şekilde değiştiriyoruz:
3. Çerçeve şeklini noktalı yapalım
Üçüncü ve dördüncü örnekte çerçevenin şeklinde yapabileceğiniz değişiklikleri göstermek istiyorum.Öncelikle noktalı çerçeve yapalım.Örneğin çerçevemiz 2 pixel kalınlığında, siyah renkte ve noktalı olsun.Bunun için eklememiz gereken kod şu:
4. Çerçeve şeklini çizgili yapalım
Çerçevemizin şeklini noktalı yapmanın dışında bir başka sık kullanılan yöntem de çizgili yapmaktır.Bunun için de kırmızı renkli, 1 pixel kalınlığında ve çizgili bir çerçreve örneği verelim.Eklememiz gereken kod şu:
Bu ve bundan sonra göstereceğim örnekte kullanacağımız yöntem CSS3 olduğu için Internet Explorer gibi çağ dışı tarayıcılarda çalışmaz.Bu örnekte yazımızı 1 pixel kalınlığında, siyah renkli ve 10 pixel yarıçapında oval köşeli bir çerçeve içine alacağız.Eklememiz gereken kod şu:
Son olarak oval köşeli çerçevinin şeklini noktalı , kalınlığını 2 pixel ve yarıçapını 20 pixel yapıp bir çerçeve oluşturarak yazıyı bitirelim.Ekleyeceğimiz kod şu:
Sayfanızda bulunan widgetler için de çerçeve yapmanız mümkün. Bunun için Şablonunuzda ]]> kodunun üstüne şu kodu ekleyin:
Not: Kendi araştırmalarım sonucu işime yarayan eklenti ve kodları sizlerle de paylaşıyorum. Bu da onlardan biridir ve bloghocam.blogspot.com'dan Alıntıdır.
İlk örnek en basit çerçeve örneği olsun.Resimde gördüğünüz gibi yazılarınızı 1 pixel kalınlığında siyah bir çerçeve içine almak için ]]></b:skin> kodundan önce şu kodu ekleyin:
.post { border:1px solid #000; padding:8px }
2. Çerçevenin kalınlığını ve rengini değiştirelim
.post { border:3px solid #ef1010; padding:8px }
3. Çerçeve şeklini noktalı yapalım
.post { border:2px dotted #000; padding:8px }
4. Çerçeve şeklini çizgili yapalım
Çerçevemizin şeklini noktalı yapmanın dışında bir başka sık kullanılan yöntem de çizgili yapmaktır.Bunun için de kırmızı renkli, 1 pixel kalınlığında ve çizgili bir çerçreve örneği verelim.Eklememiz gereken kod şu:
.post { border:1px dashed #ef1010; padding:8px }5. Oval köşeli çerçeve yapalım
Bu ve bundan sonra göstereceğim örnekte kullanacağımız yöntem CSS3 olduğu için Internet Explorer gibi çağ dışı tarayıcılarda çalışmaz.Bu örnekte yazımızı 1 pixel kalınlığında, siyah renkli ve 10 pixel yarıçapında oval köşeli bir çerçeve içine alacağız.Eklememiz gereken kod şu:
.post { border:1px solid #000; padding:8px;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius:6. Oval köşeli noktalı çerçeve yapalım
Son olarak oval köşeli çerçevinin şeklini noktalı , kalınlığını 2 pixel ve yarıçapını 20 pixel yapıp bir çerçeve oluşturarak yazıyı bitirelim.Ekleyeceğimiz kod şu:
.post { border:2px dotted #000; padding:8px;-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px; }7.Widgetler için kenarlık yapalım
Sayfanızda bulunan widgetler için de çerçeve yapmanız mümkün. Bunun için Şablonunuzda ]]> kodunun üstüne şu kodu ekleyin:
.sidebar .widget { border:1px solid #000; padding:5px }#000 yerine sayfanız için uygun olan renk kodunu yapıştırabilirsiniz.
Not: Kendi araştırmalarım sonucu işime yarayan eklenti ve kodları sizlerle de paylaşıyorum. Bu da onlardan biridir ve bloghocam.blogspot.com'dan Alıntıdır.
Yorumlar