blogger bilgi kutusu yapımı, blogger not kutusu yapımı, blogger uyarı kutusu yapımı, blogger özel kutu yapım kodları, TeknoWin
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 not kutularına ihtiyaç oluyor.Anlatıa geçiyorum adımları izleyiniz.

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.
Ş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.
Umarım Yardımcı olmuşumdur yapamadığınız bir yer veya takıldıgınız bir sorun olursa yorumlarda belirtin.
Demo / Önizleme
Axact

Admin Ælis

TeknooWin.blogspot.com Bir çok konuda fikir sahibi olduğu kategorilere yönelip kullanıcıya en iyi ve en özgün bilgiyi sunmayı amaç edinmiştir.TeknoWin Olarak Güncel Haber , Teknoloji , İnternet , Program İndirme , Blogger Konuları , Blogger Temaları Magazin Haberleri , İlginç Bilgiler ,Pratik Bilgiler ve Çözümler , Program Hataları ve Çözümleri Film İndir ve Dizi İndir Oyun İndir , Film Dizi Hakkında Öneriler , Videolar Komik Gifler Fotograflar Tüm Bu Kategorileri Baz Alan Genel Güncel Paylaşım ve Portal Sitesidir...

Yorum Yap:

0 Hiç Yorum Yapılmamış İlk Yorumu Sen Yapmak İstermisin:

Yorum yazabilmek için:
Yorumlama biçimi seçeneklerinden profil üyeliğiniz yoksa; Adı/URL profilini seçip kendi belirlediğiniz isimle URL kısmını boş bırakarak yorum yazabilir ya da Anonim profili seçeneği ile isimsiz olarak yorum yapabilirsiniz.