- Home>
- Blogger Dersleri , CSS >
- BLOGGER RESİMLERİNİZE OVALLİK KATIN
Posted by : Unknown
9 Mart 2013 Cumartesi
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 > Widget Şablonlarını genişlet)
]]></b:skin>
Daha sonra ise aşağıda yer alan kodları yukarıda yer alan kodun hemen üstüne yapıştıralım.
.circle {
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.
<div class="circle" style="background-image: url('RESİM URL');"></div>
Aklınıza takılan sorular için yorum formunu kullabilirsiniz.