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:

]>

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:

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:

]>

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.