Son Eklenenler
css ile olusturulmus duyuru kutusu etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
css ile olusturulmus duyuru kutusu etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

CSS3 ile Oluşturulmuş Blogger Duyuru Kutuları

CSS3 İle Oluşturulmuş Duyuru Kutuları - ærakman Blog
İzmir'e gideceğimi siz değerli okurlarıma bildirmek için duyuru kutusu aradım ettim kendim yapayım dedim ne edeyim :) İşte yaptıklarımı burada sunuyorum :) Demo veremeyeceğim.Yolculuktan önce acele ile yazıyorum :)

Ayrıca CSS olarak ilk yaptığım kod bütünü diyebilirim.Diğer arama kutularından biraz kopya çektim kabul ediyorum.Ama CSS öğrenmek için azıcık örnek almaktan ne olur ? :)



Öncelikle, Kumanda Paneli > Tasarım (Yeni panelde Şablon) >  HTML'yi Düzenle bölümüne gelin ve aşağıdaki kodu bulun

]]></b:skin>

Bulduğunuz kodun hemen öncesine aşağıdaki CSS kodunu ekleyin.

.aerakman-duyuru, .aerakman-duyuru2, .aerakman-duyuru3, .aerakman-duyuru4 { background:#F3F3F3; border:1px solid #C1C1C1; text-align:center; margin:0 auto 10px; padding:5px 10px; -moz-box-shadow:inset 0 0 1px #fff; -webkit-box-shadow:inset 0 0 1px #fff; box-shadow:inset 0 0 1px #fff; text-shadow:0 -1px rgba(255,255,255,0.5); font-size:12px; } 

.aerakman-duyuru { background: #FFF6BF; border-color:#FFD324; }

.aerakman-duyuru2 { background: #ADCBE7; border-color:#0F5C8E; }

.aerakman-duyuru3 { background: #D6ECA6; border-color:#8DC93E; }

.aerakman-duyuru4 { background: #cccccc; border-color:#4c4c4c; }

Aşağıdaki kodlarımızı ise isterseniz gadget olarak ekleyebilir isterseniz de temanızın şablonundan uygun bir bölüme ekleyebilirsiniz :) Kodlar da <div> kullanmamın sebebi <head></head> tagları içerisinde rahatça kullanabilmenizi sağlamaktır. :)

<p class="aerakman-duyuru"> <strong>Duyuru: </strong> Yazıyı Buraya Yazabilirsiniz </p> 

<p class="aerakman-duyuru2"> <strong>Duyuru: </strong> Yazıyı Buraya Yazabilirsiniz </p>

<p class="aerakman-duyuru3"> <strong>Duyuru: </strong> Yazıyı Buraya Yazabilirsiniz </p>

<p class="aerakman-duyuru4"> <strong>Duyuru: </strong> Yazıyı Buraya Yazabilirsiniz </p>

Renkleri değiştirmek için CSS kodumuzdaki renk kodları ile oynayabilirsiniz.Güle güle kullanın :)

Layer"

Reklam

 
Support : Türkçe | Blogger | Temaları
Copyright © 2014 Film Siteleri - Tüm Hakları Saklıdır
Filmsitelerin.blogspot.comTürkçe Blogger Temaları
powered by Filmsiteleri.net