Sayfa Gezinme

Son makaleler:

latest

YAYIN AKIŞI:

Tümünü Görüntüle

Blogger Dekoratif İçerik Başlıklı Tarih Şerit Eklentisi

Blogger, blog temanızın yazı üstünde görülen yazı yayın tarih bilgi görünümünü yazı sayfası genişliğinde uzatabileceğiniz veya istediğiniz...

...
Blogger, blog temanızın yazı üstünde görülen yazı yayın tarih bilgi görünümünü yazı sayfası genişliğinde uzatabileceğiniz veya istediğiniz ebatlara göre değiştirebileceğiniz dekoratif tarih şerit eklentisi. Tarih şeridi eklentisi tamamen CSS kodlarından oluşturulmuş olup sade bir görünüme sahip. Tarih şeridi arka plan rengini blog temanıza göre tasarlayabilir, temanızın yazı sayfa genişliğine göre uzatıp kısaltabilir ve yazı fontunu büyük küçük olarak zevkinize göre tanzim edebilirsiniz. Aşağıdaki örnekte gri renk tonlarındaki tarih şeridini inceleyin.
Aynı tarih şeridinin yazı sayfa genişliğinde uzatılmış görünümü.
Tarih şeridi arka plan renginin değişmiş görünümü.
Yukarıda örnekleri verilen tarih şeridinin yazı fontunu özelleştirerek istediğiniz ebatlara ayarlayabilirsiniz. Yazı başlık şeridini özelleştirme ile ilgili açıklamaları aşağıda okuyarak blog temanızın özelliklerine göre değiştirin.
CSS Kodlarımız :

/* Başlık Tarih değişimi Guney59 Start-----*/
h2.date-header
{
 position: relative;
 width: 20%;
 font-size: 1.2em;
 font-weight: bold;
 padding: 7px 20px 7px 25px;
 margin: 0 10px 25px -30px;
 color: #555;
 background-color: #eee;
 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;
 }
/* 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 kod’u bulun.

]]></b:skin>

Yukarıda verilen etiketi bulduğunuzda verilen CSS kodlarını eksiksiz üst kısmına yapıştırın ve blog'u kaydedin.

Yazı üstündeki Tarih şeridi görselinin Ö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 yaptığınızda kodlar sayfa genişliğini otamatik olarak algılayarak kendisi tasarlar. Görülmesini istediğiniz genişliği temanıza göre tasarlayın.

2. Yazı üst tarih yazı 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 ayarlayın. 1 değeri ç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.

→ Yazı tarih üst bilgi renk değişimi görseli ;

Hiç yorum yok

Fikirlerinizi bizimle yorumlarda paylaşabilirsiniz.