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 :)
Bu Filmi Paylaş :

0 yorum:

Yorum Gönder

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