Şubat 19, 2013

Blogger Resimlerinize Ovallik Kazandırın




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.

2 yorum :

Bu kodu resimlerde aktif hale getirebilmeniz için her defasına aşağıdaki gibi kullanmanız gerekecek.
class="circle" style="background-image: url('RESİM URL');">
Resim URLsi kısmına yüklediğiniz resmin adresini yazarak resimlerinize ovallik kazandırmış olacaksınız.

anlıyamadığım için üzgünüm ama lütfen bunu nerde yapacağız daha açıklayıcı yazarmısınız.tesekkürler

Yorum Gönder



Bloglama Zamanı'nda yayınlanacak yeni yazılar e-mail adresinize gelsin.


Google Arkadaşım Ol
Bloglama Zamanı
Bloglama Zamanı

Google+ paylaşımlarımı takip etmek için çevrelerinize ekleyin.