CSS3 ile Blogger Uyarı Satırı Oluşturmak

CSS3 kodlama dilinin yaygınlaşması ile eskiden kabusa dönen bir çok tasarım konusu artık kolayca yapılabilir hale geldi. Çoğu kişinin eklenti olarak sunduğu kodlar aslında basitleştirilmiş birer CSS3 kod dizini. Ben sizlere bir çok yerde widget yada Blogger eklentisi olarak sunulan kodları bir nebze olsun farklı şekilde kullanabilin diye Blogger Dersleri kuşağında açıklayarak anlatmaya çalışacağım. CSS3 ile ufak satır renklendirmeleri yaparak duyuru kutuları yada dikkat edilmesini istediğiniz paragraflar hazırlayabilirsiniz.

Hemen Size bir örnekle tam olarak ne kastettiğimi göstermek istiyorum :

Duyuru: http://www.bloggerdersleri.com Yazıyı Buraya Yazabilirsiniz

Table kodları ile rahatla yapılabilecek olan örneği css ile yapacağız. Unutmayın ki <table> kodları eski ve geliştirilemeyen bir kod dizinidir ve Google gelecekte kalmış olan bu kod dizini pek sevmez. CSS ise Google'ın favorisidir. Resimli Uyarı Satırı Oluşturmak İstiyorsanız Buradan Buyurun : Blogger Uyarı Satırı - II

Blogger İçin CSS3 ile Uyarı Satırı Tasarlamak

Her ne kadar Blogger için desem de farklı platformlarda da işe yarar bir kod dizilimidir. CSS kullanırken basitçe bilmeniz gereken iki kod dizilimi vardır. Birincisi oluşturucu kod dizini, ikincisi çağırıcı kod dizini.

]]></b:skin> üzerine yapıştırmanız gerekli denilen tüm kodlar oluşturucu niteliktedir. Kullanmak için HTML/JavaScrip Gadget'ı açtığımız yada yazı içerisinde kullandığınız kodlar ise çağırıcı kodlardır. Blogger temalarınıza işlem yaparken ]]></b:skin> üzerine oluşturucuları yapıştırırız ve bu kodları kullanmak istediğimizde ise çağırıcı kodları devreye sokarız.

]]></b:skin> Üzerine Yapıştırmanız Gereken Kodlar :

 .Bloggerdersleri-duyuru, .Bloggerdersleri-duyuru2, .Bloggerdersleri-duyuru3, .Bloggerdersleri-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; } 

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

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

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

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

Oluşturucu kodlarda tanımlama işlemi vardır. Kırmızı ile yazılmış olan : .Bloggerdersleri-duyuru kısmı ikinci Bloggerdersleri-duyuru kısmında tanımlanmıştır. Background rengi #FFF6BF , olsun çerçeve #FFD324; renginde olsun.

Bu kodları çağırmak istediğimizde ise aşşağıda ki kodları kullanmak istediğimiz yere ekleriz

<p class="Bloggerdersleri-duyuru"> <strong>Duyuru: </strong> http://www.bloggerdersleri.com Yazıyı Buraya Yazabilirsiniz </p>

Gördüğünüz gibi kodlar içerisinde bulunan kırmızı ile yazılmış Bloggerdersleri-duyuru kısmı gene bizle. Burada temamıza şunu söylemiş oluruz Bloggerdersleri-duyuru ismi ile tanımlanmış olan stili burada kullan, Bloggerdersleri-duyuru yerine 1 , sadasd , hoppala gibi yazılar yazabilirdiniz fark etmez bu o stili tanımlayan bir şifre gibidir. Temanız bunu anlar ve o stili çağırır sisteminin basitçe kullanım mantığı budur.

Kodlar üzerinde kendinize göre değişiklikler yaparak çerçeveleri kalınlaştırabilir, kaldırabilir, uzunlukları ayarlaya bilir, yazı stili değiştirebilirsiniz.

Kullanım mantığı oldukça basittir ]]></b:skin> üzerine yapıştırmanız gereken kodları yapıştırın ve hangi şekilde kullanmak istiyorsanız aşağıda ki kodlardan dilediğinizi yada hepsini seçin ve yazmak istediklerinizi ekleyin.


<p class="Bloggerdersleri-duyuru"> <strong>Duyuru: </strong> http://www.bloggerdersleri.com Yazıyı Buraya Yazabilirsiniz </p> 

<p class="Bloggerdersleri-duyuru2"> <strong>Duyuru: </strong> http://www.bloggerdersleri.com Yazıyı Buraya Yazabilirsiniz </p> 

<p class="Bloggerdersleri-duyuru3"> <strong>Duyuru: </strong> http://www.bloggerdersleri.com Yazıyı Buraya Yazabilirsiniz </p>

<p class="Bloggerdersleri-duyuru4"> <strong>Duyuru: </strong> http://www.bloggerdersleri.com Yazıyı Buraya Yazabilirsiniz </p>

Umarım temanıza eklediğiniz kodların nasıl çalıştığına dair bir fikriniz oluşmuştur . :)