Blogger Bayrak Görünümlü Tarih Başlığı Şerit Eklentisi
  1. Anasayfa
  2. Eklentiler

Blogger Bayrak Görünümlü Tarih Başlığı Şerit Eklentisi

0

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.

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

Flag tarih şerit eklenti kurulumu :

CSS Kodları :
/* 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.

  • 0
    be_endim
    Beğendim
  • 0
    alk_l_yorum
    Alkışlıyorum
  • 0
    _a_k_n
    Şaşkın
  • 0
    sinirli
    Sinirli
  • 0
    berbat
    Berbat

Web site yazılım tasarım uygulama eklenti ve yenilikler hakkında güncel bilgi ve haber platformu. Samsun-Turkey - 1989-2005 Temsa Mitsubishi Sabancı Otomotiv grubunda çalıştı. Araştırma, Geliştirme, Web siteleri ile uğraşma ve Paylaşımı seven biriyim.

Yazarın Profili

Bültenimize Katılın

Hemen ücretsiz üye olun ve yeni güncellemelerden haberdar olan ilk kişi olun.

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir