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

4-renkli-not-kutusu-hazırlama

  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.

blog-kodları

 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 ⤵

YAZIYI PAYLAŞ

BENZER YAZILAR

SONRAKİ
« Prev Post
ÖNCEKİ
Next Post »

2 yorum

yorum YAZ
30 Ocak 2018 14:35

Teşekkürler bu kod için. Kendime göre çok hoş bir şekilde uyarlamış oldum :)

Cevap Ver
avatar
30 Ocak 2018 18:00

Güzel görünüyor..işinize yaradıysa ne güzel.

Cevap Ver
avatar

YORUM YAPARAK KATKIDA BULUNABİLİRSİNİZ...

1) Yaptığınız yorumun, yazıyla alakalı olmasına özen gösterin.
2) Yazım ve dil bilgisi kurallarına mümkün olduğunca dikkat edin.
3) Kullandığınız üslubun sizi yansıttığını unutmayın.
4) Yorum yaparken link eklemeyin.