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

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

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.

tarih-seridi-renk-1

Aynı tarih şeridinin yazı sayfa genişliğinde uzatılmış görünümü.

tarih-seridi-genis-gorunum

Tarih şeridi arka plan renginin değişmiş görünümü.

kirmizi-tonlarinda-tarih-seridi

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 ;yazi-tarih-renk-degisimi

Bu Yazıya Tepkiniz Ne Oldu?
  • 0
    be_end_m
    BEĞENDİM
  • 0
    alki_
    ALKIŞ
  • 0
    _a_kin
    ŞAŞKIN
  • 0
    k_t_
    KÖTÜ
  • 0
    berbat
    BERBAT

1959 yılında Samsunda doğdu. 1989-2005 Yılları arasında Temsa, Mitsubishi, Sabancı Holding grubunda Otomotiv, Bilgi işlem ve Yazılım bölümlerinde Müdür olarak çalıştı. Adnan Güney, şu anda, Network Dizayn Yazılım ve Tasarım koordinatörü olarak çalışmalarına devam etmekte. Ayrıca Blogger, Wordpress, Tumblr, Google sites gibi alanlara ilgili olup, uzun yıllardır SEO ve Alexa üzerinde çalışmakta.

Yazarın Profili
İlginizi Çekebilir

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir