Bloglar İçin Renkli Not Kutusu Nasıl Hazırlanır?

  Blog sayfaları için renkli notlar oluşturmak hem göze hoş gelir hem de vermek istediğiniz bilgi dikkat çeker. Not kutularının özelliği 4 renkten birini seçebiliyor olmanız ve hepsinin kenarında katlanmış efekti vardır. Yeşil, sarı, mavi ve kırmızı renkte bu notları oluşturarak blog sayfanızı hareketlendirebilirsiniz. Ekleyeceğiniz css kodundan sonra istediğiniz rengin kodunu kullanarak notlarınızı paylaşabilirsiniz.

 Yukarıda örneğini gördüğünüz not kutularını blog sayfanıza eklemek için aşağıdaki css kodunu ]]></b:skin> kodunun bir satır üzerine ekleyin ve kaydedin. En son aşamada çalışmazsa css kodlarını </style> kodunun bir satır üzerine ekleyerek deneyebilirsiniz.

/* CSS Note by Arlina Design */
.note{position:relative;width:60%;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.orange{background:#f39c12}
.note.crusta{background:#F2784B}
.note.river{background:#3498db}
.note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}
.note.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22}
.note.crusta:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}
.note.river:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}

2. Aşama: Css kodunu eklediğimize göre şimdi aşağıdaki 4 html kodunu blog sayfamızda kullanabiliriz. Vereceğim dört renk kutusunun hepsini de kullanabilirsiniz tekini de. Yayın alanında HTML kısmına ekleyerek belirtilen yere istediğiniz notu verebilirsiniz. Ayrıca kutunun boyutunu değiştirmek için kod içindeki width:60% kısmını değiştirebilirsiniz. Yukarıda verdiğim görsel'deki renk sırasına göre html kodları şöyle;

Yeşil Renk:

<div class='note'>...NOT BURAYA YAZILACAK...</div>

Turuncu Renk:

<div class='note orange'>...NOT BURAYA YAZILACAK...</div>

Mavi Renk:

<div class='note river'>...NOT BURAYA YAZILACAK...</div>

Kırmızı Renk:

<div class='note crusta'>...NOT BURAYA YAZILACAK...</div>

Kaynak: Arlina Design

✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵