11 Eylül 2014 Perşembe

2 yöntem ile resimlere ovallik verme


Blogger kullananlar için çok güzel bir eklenti. CSS kodları yardımıyla konu içerisinde yer alan resimlerinizi oval hale getirmek ister misiniz?


Bu şekilde blogunuzun tasarımı değişmiş ve güzel bir görüntü almış olacak. Ayrıca bazen resimlerin oval olacağı yerler de oluyor ve bunun içinde çeşitli programlar ile uğraşılıyor ve bir sürü zaman kaybı oluyor. İşte bunu önlemek için bu eklentiyi mutlaka kullanmanızı öneriyorum.

İlk olarak aşağıda kodumuzu buluyoruz. Arama işlemi için CTRL + F tuş kombinasyonunu kullabilirsiniz. ( Kumanda Paneli > Şablon > HTML'yi Düzenle)

Kod:
]></b:skin>
Daha sonra ise aşağıda yer alan kodları yukarıda yer alan kodun hemen üstüne yapıştıralım.
Kod:
.oval {
  display: block;
  width: 150px;
  height: 150px;
  margin: 1em auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-border-radius: 99em;
  -moz-border-radius: 99em;
  border-radius: 99em;
  border: 5px solid #eee;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);  
}
Bu işlemleri yaptıktan sonra şablonunuzu kaydedebilirsiniz. Tasarım bitti artık bunu konu içinde uygulamaya geldi. Bu kodu resimlerde aktif hale getirebilmeniz için her defasına aşağıdaki gibi kullanmanız gerekecek. Bunun için aşağıda yer alan kod blogunu kullanmanız gerekiyor.
Kod:
<div class="oval" style="background-image: url('RESİM URL');">
</div>
Eğer siz bunları yapmak istemiyorsanız aşşagıdaki uygulamaları yaparsanız iyi olur.

İlk olarak aşağıda kodumuzu buluyoruz. Arama işlemi için CTRL + F tuş kombinasyonunu kullabilirsiniz. ( Kumanda Paneli > Şablon > HTML'yi Düzenle)

Kod:
]></b:skin>
Daha sonra ise aşağıda yer alan kodları yukarıda yer alan kodun hemen üstüne yapıştıralım.
Kod:
.post img, .post a img, #front-list img {
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 2px rgb(181, 181, 181);
    padding: 2px;
    border-radius: 8px 8px 8px 8px;
}
İşlem bu kadardır. Gerisine karışmanıza gerek yoktur kendisi otomatik oval oluyor. 2 yöntem ile yapabilirsiniz.İyi günler.
Share:

0 yorum:

Yorum Gönder


Yorum Kuralları

1) Lütfen aynı yorumu 2-3 kez göndermeyin.

2) Küfür veya argo, spam içeren ve konuyla alakası olmayan yorum yapmayın.

3) Yorumlarınızı düzgün bir türkçeyle yazınız

4) Youtube ve hizliresim.com haricinde yorum içi link veren yorumlar barındırılamaz, silinir.

5) Gmail hesabınız yoksa Anonimi seçerek yorum yazabilirsiniz

6) Yazdığınız yoruma cevap yazıldığında haberdar olmak için yorum formunun sağ alt köşesinde bulunan E-posta yoluyla abone ol linkine tıklayabilirsiniz.

7/24 Burdayım çekinmeyin yorum yazın.