Blogger Resimlerinize Ovallik Kazandırın

03:19 | 0 yorum



Blogger konu resimlerine css ile ovallik kazandırmak ister misiniz ? Blogunuza ekleyeceğiniz bu kod ile resimlerinizi daha şık bir hale getireceksiniz. Tasarıma düşkün ve ideal görüntüden daha bir görünüm sağlamak isteyen blogger için güzel bir kod diyebilirim.

Malum her resim çok şahane bir görüntüye sahip değil. Bazen sırf resmi oval hale getirmek için photoshop dahi kullanırız. Ama bundan sonra bunun kullanmanıza gerek kalmayacak. 

Şimdi kodu nasıl uygulayacağız ona geçelim.
  • Kumanda Paneli
  • Şablon
  • HTML'yi Düzenle
  • Widget'i Genişlet yolunu izledikten sonra şablonda aşağıdaki kodu bluluyoruz.
]]></b:skin>
Bulduğunuz kodun hemen üzerine gelecek şekilde aşağıdaki kodu yapıştırın
.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);  
}
Yukarıdaki işlemi yaptıktan sonra şablonu kaydedebilirsiniz. Tasarım bitti bunu konu içinde uygulamaya geldik şimdi de. Bu kodu resimlerde aktif hale getirebilmeniz için her defasına aşağıdaki gibi kullanmanız gerekecek.
<div class="circle" style="background-image: url('RESİM URL');"></div>
Resim URLsi kısmına yüklediğiniz resmin adresini yazarak resimlerinize ovallik kazandırmış olacaksınız. 

İşlem bitmiştir. Yapamadığınız bir yer olursa "Yorum" bölümünden iletebilirsiniz. Herkese kolay gelsin, iyi bloglamalar.

Kategori: , , , ,

0 yorum