Bilgi Not ve Uyarı Mesajı Kutusu Yapımı

Temmuz 21, 2015
Merhabalar güzel ve yakışıklı blogcu arkadaşlarım! Hepimiz blog yazılarımız arasında illaki bilgi veriyoruz, not ekliyoruz veya uyarıda bulunuyoruz. Bu uyarılarımız sönük kalmasın düz yazıdan ayrı olsun diye şimdi öyle kutular yapacağım ki güzellikler güzellikler :)


Bilgi Not ve Uyarı Mesajı Kutusu Yapımı

Mesela yazılarınız arasında bir not eklemek veya bir şeye dikkat çekmek istiyorsunuz. İşte tam burada kutularımız devreye giriyor. Her kutunun arkasının renkli oluşu ve başında ikon olması ona ayrı bir güzellik katıyor. 

Ben internette blogger uyarı kutusu yapımı, notlarımı kutu içinde gösterme, css kutuları yapma gibi konuları araştırdım fakat aradığım özelliklte bir şey bulamadım bu anlatacağım kutuları çok sevdim ve sizlerle paylaşmak istedim. Canlı örneklerini aşağıda bulabilirsiniz.

Blogger bilgi uyarı ve not kutusu nasıl yapılır?

İlk olarak blogger panelimizden Şablon-HTML'yi Düzenle yolunu takip edip kodlarımızı açıyoruz. Kodlarımız içerisindeki ]]></b:skin> kodunu buluyoruz. Bunu CTRL+F tuşlarına basıp açılan arama kutumuza yazarak daha hızlı bulabiliriz.

Bulduğumuz kodun bir üst satırına aşağıdaki CSS kodlarını kopyalayıp yapıştırıyoruz.

.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.info {
 background: #e0e5eb url('http://2.bp.blogspot.com/-3rcGQ-VAKb8/UlA4L72c6wI/AAAAAAAAFtY/f__fkV_xBsQ/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('http://2.bp.blogspot.com/-_Y9kuQODeBs/UlA4LwDUkhI/AAAAAAAAFtk/Rm0QwoddGLw/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('http://2.bp.blogspot.com/-rgsBmdJYFkM/UlA4LyWCrqI/AAAAAAAAFtc/suIf3IwnpgE/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

Şablonumuzu kaydediyoruz. 

Burada gördüğünüz gibi Bilgi yazınız bu şekilde olacak ve yazınızın uzunluğuna göre kutu otomatikman şekil alacak.
Burada gördüğünüz gibi Not yazınız bu şekilde olacak ve yazınızın uzunluğuna göre kutu otomatikman şekil alacak.
Burada gördüğünüz gibi Uyarı yazınız bu şekilde olacak ve yazınızın uzunluğuna göre kutu otomatikman şekil alacak.

Şimdi yazılarımız içinde bu kutuları nasıl kullanacağımıza geldi. Normal bir yayın hazırlarken yazı yazdığımız alanda Oluştur ve HTML diye iki buton görürsünüz (sol üstte). Mesela bilgi notu paylaşmak istiyorsak birazdan aşağıda vereceğim bilgi notunun kodarını HTML butonuna basarak oraya yapıştırmamız ve Oluştur dememiz gerekecek.

Hangi kutuyu kullanmak istiyorsak aşağıdaki kodların içerisinden onu seçin.

Bilgi Kutusu İçin:
<div class='info'>
Bilgi kutusu için bu kodu HTML ye yapıştırdıktan sonra buraya yazdığım yazıları kendi notunuzla değiştirin.
</div>

Not Kutusu İçin:
<div class='tips'>
Not kutusu için bu kodu HTML ye yapıştırdıktan sonra buraya yazdığım yazıları kendi notunuzla değiştirin.
</div>

Uyarı Kutusu İçin:
<div class='warning'>
Uyarı kutusu için bu kodu HTML ye yapıştırdıktan sonra buraya yazdığım yazıları kendi notunuzla değiştirin.
</div>

Yani farkettiyseniz notlarımızı <div class='warning'> ile </div> kodlarının arasına yazıyoruz.

İşlem bu kadar. Gördüğünüz üzere blogger bloğumuzda not kutusu yapımı bu kadar basit. Nası blog daha güzel oldu dimi? :) Daha da güzel olacak yeterki beni takip et ;)

Anlatamamış olabilirim sen anlamadığın yerleri çekinme aşağıdan yorumla sor :) Ama unutma yorum yapmak için öncelikle bloğu izlemen gerek. İyi bloglamalar.

Altı yıldır blog işleriyle uğraşıyorum. Edindiğim tecrübeleri sizlerle paylaşıyorum.

9 Yorum
avatar

Merhabalar siteniz gerçekten çok kaliteli , başarılarınızın devamını diliyorum.

Yanıtla
avatar

Çok teşekkür ederim yardımcı olabiliyorsam ne mutlu bana :)

Yanıtla
avatar

Selamlar başarılı insan, peki yorum kutusu üstüne senin yaptığına benzer "yorumlarda kod vs. kullanmak için" başlığını ve vereceğim kodlar da ki gibi istediğim yazıları nasıl ekleyebilirim..kodlar aşağıda ki gibi olacak ama nasıl bir türlü beceremedim hata veriyor

div style="background: #26ABE6; border: double 8px #FFF; font-size: 18px; margin: 40px; padding: 30px; text-align: justify;">
span style="font-family: Verdana,sans-serif;">span style="color: white;"Yorum Yazma Kuralları !

1- Küfürlü, Sataşmacı, Spam veya Reklam İçeren Yorumlar Yapmamaya

2-Yaptığınız yorumun, yazıyla alakalı olmasına Spam veya Reklam İçeren Yorumlar olmamasına özen gösteriniz.

3- Her zaman nazik bir üslup kullanmaya dikkat ediniz.

4- Cevap yazma süresi değişiklik gösterebilir.

5- Yorumlarınız Yönetici Onayından Geçtikten Sonra Yayınlanacaktır.

6- Anlayışınız için TEŞEKKÜRLER..

Yanıtla
avatar

yönetici panelinden ayarlar - yayınlar ve yorumlar bölümünü açın yorum formu iletisi bölümüne uyarılarınızı ekleyin. kaydedin.

Yanıtla
avatar

ellerıne kollarına sağlık

Yanıtla
avatar

<iframe width="1280" height="720" src="https://www.youtube.com/embed/qyH1sw__3nI?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

Yanıtla

Yorumlarda Kod vs. Kullanmak İÇİN
  • Lütfen sadece bu konuyla ilgili yorumlarınızı bırakınız.
  • Yoruma kod eklemek için <i rel="code"> kodu bunun yerine yazın </i>
  • Daha uzun kod eklemek için <i rel="pre"> kodu bunun yerine yazın </i>
  • Tırnak işareti kullanmak için <i rel="quote"> yorumu bunun yerine yazın </i>
  • Resim eklemek için <i rel="image"> resim url </i>
  • Video eklemek için [iframe] URL embed kodunu buraya yapıştırın [/iframe]
  • Sonra aşağıdaki butona basın ve kodları dönüştürün.
  • © 2015 Blog Bakkalı ✔