blogger uyarı kutusu yapımı, blogger notlarımı kutu içinde gösterme, blogger css kutuları yapma
Merhabalar yeni bir blogger konusu hakkında karşınızdayım.Bu yazımda blogger yazı içi not kutularından bahsedicem.

Bu konu hakkında daha önce bir anlatım yapmıştım dilerseniz burdan onada göz atabilirsiniz.
Burdakide aynı sonuç fakat CSS farklı yani not kutuları daha farklı stillere sahip fazla uzatmadan anlatıma geçiyorum adımları izleyin. Unutmadan Şablonun bir kopyasını almayı unutmayın ne olur ne olmaz.

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.
.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;
}
✔Ş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='note'>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='note orange'>Not 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 2 İçin
div class='note river'>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='note crusta'>Uyarı kutusu için bu kodu HTML ye yapıştırdıktan 
sonra buraya yazdığım 
yazıları kendi notunuzla değiştirin....</div>
Umarım Yardımcı olmuşumdur yapamadığınız bir yer veya takıldıgınız bir sorun olursa yorumlarda belirtin.
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:

2 Yorum Yapılmış:

  1. Admin süpersin çok teşekkürler bende böyle farklı bir not kutuları arıyordum.

    YanıtlaSil
    Yanıtlar
    1. @Buse Rica ederim beğenmenize sevindim

      Sil

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.