Blogger’da CSS ile Renkli Kutu Yapalım

Herkese Merhaba. Bazen Metinin tam ortasında dikkati çekmek istediğimiz yeri renklendirmemiz gerekir fakat daha Orjinal birşeye gerek duyarız. Örneğin renkli bir Kutucuk. Işte bunu bugün sizlere göstereceğim. Aslında çok basit birşey. CSS yi yazıyorsunuz ve Blogger da kullanmak için de belli bir Satır kullanıyorsunuz. Bu kadar basit aslında. Herneyse, bu kutucuğun Arkaplanını ben sarı yaptım, siz kendinize göre değiştirebilirsiniz tabi. Nasıl değiştirileceğini bilmiyorsanız üzülmeyin, ben anlattım herşeyi aşağıda.

Ilk önce Bloğumuza giriş yapıyoruz. Sonra Kumanda Paneli ne giriyoruz. Ardından Yerleşim’e, sonra HTML’yi Düzenle ye. Şimdi CTRL+F kombinasyonumuzu kullanarak Arama pencerimizi açıp ]]> kodunu buluyoruz ve aşağıdaki kodları ]]> kodunun üzerine yapıştırıyoruz.

.kutucuk {
background: #FFFF99;
width: 500px;
height: 40px;
text-align:justify;
overflow: hidden;
position:relative;
}

Kodlarımızı ekledikten sonra Şablonumuzu kaydediyoruz. Bu kadar. Konunuzda kullanmak için aşağıdaki Satırı kullanın:

Blog Doğuhanca


KISA AÇIKLAMA – Ne yaptık?
  • Yukarıdaki Satırda kullandığımız id bize CSS mizi yazarken kullandığımız #kutucuk bölümünü gösterir.
  • Yukarıdaki Blog Doğuhanca kısmı yerine istediğiniz Metni yazın.
  • Yukarıdaki kutucuk yazan yeri CSS nizde değiştirdikten sonra bu Satırdada değiştirebilirsiniz.

KOD AÇIKLAMASI – Ne nedir?
background –> Arkaplanımız (Renk Kodumuz burada)
width –> Kutunun genişliği
height –> Kutunun yüksekliği
text-align –> Kutunun içindeki Yazının geleceği yer (left,right,center,justify)
overflow –> Kutuda taşan yerleri taşmamış gibi göstertir.
position –> Kutunun olduğu yerde kalıp kıpırdamamısını sağlar.

Örnek Kutucuk.

Reklamlar

About Lacivert

HuniliBlog.Com'un tek yazarıyım. Bana hep deli derler ama ben kimseye deli demedim. Sitemi ziyaret ederseniz hakkımda daha çok şey öğrenebilirsiniz
Bu yazı Blogger Widget Tema İpucu içinde yayınlandı. Kalıcı bağlantıyı yer imlerinize ekleyin.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s