Dream41 Takip Eden Duyuru Panosu

[Dream41]

Merhaba arkadaşlar kodladığım duyuru panosu paylaşıyorum sayfa indikçe takip eder hoverli olduğu için demodan bakmanızda fayda var.

İlk önce demo verelim sayfayı aşağı kaydırarak bakabilirsiniz .

Kod: Tümünü Seç Tümünü Kopyala

http://codepen.io/dream41/pen/ZLRreX

Temanızın global.css en alta bu kodları ekleyin.

Kod: Tümünü Seç Tümünü Kopyala

.altduyuru{
  background:rgba(76, 175, 80, 0.71);
  color:#fff;
  padding:6px;
  bottom:0;
  left:0;
  position:fixed;
  width:100%;
  transition:all 0.4s;
}

.altduyuru:hover{
  background:#4CAF50;
}

.altduyuru a{
  color:#fff;
  text-decoration:none;
}

index şablonu {$header} altına veya header şablonu en alta bu kodu ekleyin.

Kod: Tümünü Seç Tümünü Kopyala

<div class="altduyuru">Duyurunuzu Yazın <a href="#">Link</a></div>  

Not:İstediğiniz başka şekilde varsa konu altında yorum olarak söylerseniz kodlaya bilirim.

---

Kapana bilir özelliği ekliyen atakaj.
Demo:

Kod: Tümünü Seç Tümünü Kopyala

http://codepen.io/anon/pen/QdBWQx

CSS Kodları:

Kod: Tümünü Seç Tümünü Kopyala

#altduyuru{
 background:rgba(76, 175, 80, 0.71);
 color:#fff;
 padding:6px;
 bottom:0;
 left:0;
 position:fixed;
 width:100%;
 transition:all 0.4s;
}

#altduyuru:hover{
 background:#4CAF50;
}

#altduyuru a{
 color:#fff;
 text-decoration:none;
}

._kapat {
 float: right;
 margin-right: 25px;
}

.alt-kapat {
 display: none;
}

html kodaları:

Kod: Tümünü Seç Tümünü Kopyala

<div id="altduyuru">Duyurunuzu Yazın <a href="#">Link</a><a class="_kapat" onclick="altkapat('altduyuru');" href="#">X</a></div>  

headerinclude en alta ekleyin:

Kod: Tümünü Seç Tümünü Kopyala

<script>function altkapat(id) {
 document.getElementById(id).classList.add("alt-kapat");
}</script>

[Besico]

Teşekkürler

[Ainsworth]

Eline sağlık. Şöyle daha kullanılabilir olması açısından kapanabilir olanını yaptım;

Kod: Tümünü Seç Tümünü Kopyala

http://codepen.io/anon/pen/QdBWQx

[Dream41]

Eline sağlık. Şöyle daha kullanılabilir olması açısından kapanabilir olanını yaptım;

Kod: Tümünü Seç Tümünü Kopyala

http://codepen.io/anon/pen/QdBWQx

Teşekkürler kodları konuya düzgün bir biçimde ekledim.

[#Power]

İyi güzel css yazıyorsunuz da duyuru panosu görmekten sıkıldım. Yani bunun yapımı kolay, biraz bilgisi olan yapabilir(basit bir duyuru panosundan bahsediyorum). Çok zorlamaya gerek yok bence :P

[hipolito]

Mesela şu bastıkça geçen (slide mıdır nedir tam bilmiyorum) ondan yapabilirsiniz.. Açıkçası hoş bir şey yaparsanız kullanılır :)