Sitenize kullanışlı sade ve basit duyuru paneli ekleyin.

[Hatake]

Öncelikle demo verelim;

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

http://webh4t.10tl.net/

İndexteki duyuru yazan kısımdır. Hiç bir temada sıkıntı yaşamazsınız. Her temaya uyumludur. Yapımına geçelim;

Admin Paneli - Temalar ve Şablonlar - Kullandığınız Temanın CSS leri - CSS Oluştur

CSS Adı: duyuru.css
CSS İçeriği;

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

@import url(https://fonts.googleapis.com/css?family=Roboto);

.duyuru1, .duyuru2 {
 display: inline-block;
 float: left;
 font-family: 'Roboto';
 margin-bottom: 10px;
}

.duyuru1 {
 border-radius: 3px 0px 0px 3px;
 width: 80px;
 text-align: center;
 background-color: #37474F;
 color: #fff;
 padding: 10px;
}

.duyuru2 {
 width: calc(100% - 120px);
 width: -webkit-calc(100% - 120px);
 padding: 10px;
 background-color: #455A64;
 color: #fff;
 transition: all 250ms;
 border-radius: 0px 3px 3px 0px;
}

.duyuru2:hover {
 width: calc(100% - 130px);
 width: -webkit-calc(100% - 130px);
 padding-left: 20px;
}

Daha sonrasında Temalar & Şablonlar - Kullandığınız temanın index şablonunu açıp {$header} kodunun tam altına bu kodu ekliyoruz.

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

<div class="duyuru1"><b>DUYURU</b></div>
<div class="duyuru2">Yetkili alımları başladı, yetki almak için webh4t@gmail.com adresine mail gönderebilirsiniz.</div>

[kirito]

Teşekkürler, tema mükemmel gidiyor :)

[Gameiro.]

Ellerine sağlık Mete :) yine döktürüyorsun.