Blogger dekoratif içerik başlıklı tarih şerit eklenti makalemizden sonra, dekoratif tarih şerit eklentimize (Flag) bayrak stil görünüm özelliğini nasıl uygulayabiliriz. Blogunuz da yayımlamış olduğunuz yazıların üst kısmında görülen ve arka plan rengi olmayan transparan yazı yayın tarih bilgilerini eklediğimiz CSS kod yardımı ile sağ tarafta düz dikey olan görselinize iç bükey açı vererek (Flag) bayrak görünümüne nasıl değiştirebiliriz? İlgili adımları takip ederek blogunuz da (Flag) bayrak görünüm eklentisini kullanabilirsiniz.
Flag tarih şerit eklentisi, CSS kodlarından oluşturulmuş olup, hiçbir resim kullanılmadan sade bir görünüme sahiptir. Eklentinin arka plan rengini blog temanıza göre tasarlayabilir, sayfa genişliğine göre ebatlarını ayarlayabilir, yazı fontunu büyük küçük olarak zevkinize göre tanzim edebilirsiniz. Bayrak görünümlü tarih şeridini yukarıda verilen resimden inceleyin.
Flag tarih şerit eklenti kurulumu :
/* Başlık Tarih değişimi Guney59 Start-----*/
h2.date-header
{
position: relative;
width: 30%;
font-size: 1.2em;
font-weight: bold;
padding: 7px 20px 7px 25px;
margin: 0 10px 25px -30px;
color: #555;
background-color: #960505;
text-shadow: 0px 1px 2px #bbb;
-webkit-box-shadow: 0px 2px 4px #888;
-moz-box-shadow: 0px 2px 4px #888;
box-shadow: 0px 2px 4px #888;
}
h2:before, h2:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
}
/* wrap */
h2.date-header:after {
left: 0px;
top: 100%;
border-width: 5px 5px;
border-style: solid;
border-color: #666 #666 transparent transparent;
}
/* flag */
h2.date-header:before {
left: auto;
right: -2px;
top: 0px;
border-width: 20px 10px;
border-style: solid;
border-color: transparent #fff transparent transparent;
}
/* Başlık Tarih değişimi Guney59 End-----*/
CSS kodların Şablona eklenmesi :
Blog’unuzun önce yedeğini alın. Blogger şablon kodları içinde klavye tuşları ile (Ctrl+F) aşağıdaki etiketi aratarak bulun.
]]></b:skin>
Yukarıda verilen etiketi bulduğunuzda kod penceresinde verilen CSS kodlarını eksiksiz üst kısmına yapıştırın ve blog’u kaydedin.
Flag görünümlü tarih şerit eklentisinin özelleştirilmesi :
1. Yazı sayfa genişlik ayarı :
→ h2.date-header, ilk CSS kodlarında bulunan width: 20%, değeri genişlik ayarlarını yapmanızı sağlamaktadır. 20 rakamını, 100 değer yaptığınızda kodlar sayfa genişliğini otomatik olarak algılayarak kendisi tasarlayacaktır. Görülmesini istediğiniz genişliği temanıza göre tasarlayın.
2. Yazı tarihinin font ebat ayarı :
→ font-size: 1.2em, 1.2 değerlerini küçültüp büyüterek yazı font değerini hoşunuza giden bir ebatta düzenleyin. 1 değerini çok fazla yükseltirseniz çok büyük bir font elde edersiniz. Bu nedenle 1 değerini sabit tutarak sağ taraftaki 1’in alt değerleri ile oynayabilirsiniz. Ayrıca şu şekilde de kullanabilirsiniz. ( 0.9em )
3. Yazı üst tarih arka plan rengi değişimi :
→ background-color: #eee, ( #eee ) onaltılık bir renk etiketi olup, siz hangi rengi kullanmak istiyorsanız seçiminizi belirleyin. Renk etiketleri bulmakta zorluk çekiyorsanız buradan renkleri inceleyin.
4. Yazı rengi blog temanızda kullandığınız renklerdir. Blogunuzun, Şablon → Özelleştir → Gelişmiş → Tarih üst bilgi → Metin rengi, alanından değiştirebilirsiniz.
5. CSS kodlarımıza eklenen yeni kodlar ile bayrak görünümlü eklentinizi arttık kullanabilirsiniz.
