Blogger Resim Kenarlık Düzenleme

Blogger, blogda kullandığınız resimlerinize basit kenarlık ekler. Bu eklenen kenarlığın şekli temanızda belirtilmiştir. Blogger standart temalarında eklenen kenarlık oldukça basit görünümlüdür. İsterseniz bu kenarlığı kaldırabilirsiniz. Ya da farklı yöntemler kullanarak istediğiniz türde bir kenarlık oluşturabilirsiniz. Görsel olarak blogunuzda düzenleme yapmak istiyorsanız. Resimlerinize farklı bir hava katarak buna başlayabilirsiniz. Blogger Resim Kenarlık Düzenleme, temanıza uygun kodları ekleme ya da her resimde farklı kenarlık kullanma yöntemi ile uygulabilir.

Konuyu örneklerle anlatacağım. Farklı kenarlık kullanımı için; yüklenen resim kodları üzerinde düzenleme ve temaya CSS kodları ekleme seçeneklerini örnek resimlerin altında göreceksiniz.
1. Basit Kenarlık Düzenleme
Öncelikle klasik bir kenarlık ile başlamak yerinde olacaktır. Blogger standart temalarındaki varsayılan kenarlık benzeridir.


Yüklediğiniz resmin kodları üzerinde düzenleme yapmak için;

<img src="http://i49.tinypic.com/11m6mqf.jpg"
style="border:1px solid #cc0000;"/>

Temanıza eklemek için;

border:1px solid #cc0000;

kodunu kullanabilirsiniz. Bu CSS kodunu temanızda uygun yere ekleyebilirsiniz.

2. Padding ve Kenarlık Düzenleme
Yukarıdaki örnek resimden farklı olarak eklenen kenarlık, resmin etrafında belirlenen bir boşluk bıraktıktan sonra görüntülenecektir.


Yüklediğiniz resmin kodları üzerinde düzenleme yapmak için;

<img src="http://i45.tinypic.com/apkaib.jpg"
style="border:1px solid #cc0000; padding:6px;"/>

Temanıza eklemek için;

border:1px solid #cc0000; padding: 6px;

kodunu kullanabilirsiniz.

3. Padding, Kenarlık ve Renkli Arka Plan Düzenleme
Yukarıdaki örnekte resim ve kenarlık arasında belli bir mesafe bırakmıştık. Şimdi, resim ve kenarlık arasındaki boşluk (arka plan) renklendirilecek.


Yüklediğiniz resmin kodları üzerinde düzenleme yapmak için;

<img src="http://i49.tinypic.com/11m6mqf.jpg"
style="border:1px solid #cc0000; padding:6px;
background-color:#E5ECF9;" />

Temanıza eklemek için;

border:1px solid #cc0000; padding:6px;
background-color:#E5ECF9;

kodlarını kullanabilirsiniz.

4. Geniş Kenarlık Düzenleme
İkinci örnekte yer alan resimde görebileceğiniz gibi, kenarlık ve resim arasında belli bir boşluk var. Bu çerçeveyi daha da genişletebiliriz.


Yüklediğiniz resmin kodları üzerinde düzenleme yapmak için;

<img src="http://i45.tinypic.com/apkaib.jpg"
style="border:1px solid #E5ECF9;
padding:40px 50px 40px 50px;" />

Temanıza eklemek için;

border:1px solid #E5ECF9;
padding:40px 50px 40px 50px;

kodlarını kullanabilirsiniz.

5. Geniş Kenarlık ve Renkli Arka Plan Düzenleme
Üçüncü ve dördüncü tür kenarlıkları birbirleri ile bütünleştirdiğimizde ortaya çıkacak olan kenarlık, geniş ve arka plan rengi olan bir kenarlık olacaktır.


Yüklediğiniz resmin kodları üzerinde düzenleme yapmak için;

&<img src="http://i49.tinypic.com/11m6mqf.jpg" style="background-color: #e5ecf9; border: 1px solid #99cccc; padding: 40px 50px;" />

Temanıza eklemek için;

border:1px solid #99cccc; background-color: #e5ecf9;
padding:40px 50px 40px 50px;

kodlarını kullanabilirsiniz.

6. Geniş Kenarlık ve Resimli Arka Plan Düzenleme
Yukarıdaki örnekte arka plan rengini nasıl belirleyebileceğinize dair örnek vermiştim. Şimdi de arka plan olarak nasıl resim yerleştirebilir? sorusuna cevap verelim;



Yüklediğiniz resmin kodlarında düzenleme yapmak için;

<img src="http://i49.tinypic.com/11m6mqf.jpg" style="border:5px solid #cc0000; padding:40px 50px 40px 50px; background: url(http://i50.tinypic.com/14kzgqr.jpg);" />

Temanıza ekleme için;

border:border:5px solid #cc0000;
padding:40px 50px 40px 50px;background: url(http://i50.tinypic.com/14kzgqr.jpg);

kodlarını kullanabilirsiniz.

Altıncı örnekte arka plan resmi olarak oluşturulan görüntüyü kendiniz online olarak oluşturabilirsiniz. 'Stripe Generator' ismi verilen Çizgili Arka Plan Resim Oluşturma özelliğini sağlayan sitelerden yardım alabilirsiniz. Bazıları şöyle; Stripemania, Stripe Generator

Yukarıdaki altı örnek ile; resim kenarlık düzenleme, resim ve kenarlık arası boşluğu padding değeri ile değiştirme, geniş kenarlık oluşturarak arka planı farklı renklerle renklendirme gibi basit ama temel özellikleri pekiştirmiş olduk.

Örnek kenarlıklar için düz çizgi (solid) kullandım. Sizler farklı tür çizgi çeşitleri kullanabilirsiniz. W3Schools sitesinden kenarlık (border) çeşitlerini inceleyebilirsiniz. Noktalı (dotted), çift (double), outset... gibi farklı kenarlık çizgileri kullanılabilir. Ayrıca kenarlık renklerini ve kalınlıklarını değiştirmekte mümkün.

CSS Kodları Nereye Eklenir?
Yukarıdaki örnekler verilen örnek CSS kodlarını temanızda hangi kısımlara ekleyebilirsiniz?
* Başlık Alanı - #header ve ya .header
* Yazı Alanı - #main ve ya .post img
* Sütunlar - #sidebar ve ya .sidebar
* Sayfa Altlığı - #footer ve ya .footer

Örnek;
Sayfa altı için; #footer {...} kodundan hemen sonra;

.footer img {
border:5px solid #cc0000; padding: 6px;}

kodu eklenirse sayfa altında kullanılan resimlerin kenarlıkları tanımlanmış olur.

Umarım, başlık alanı, yazı alanı, sütunlar, sayfa altlığı gibi alanlarda kullanılacak resimler için nasıl kenarlık yapılabilir sorusuna cevap veren bi yazı olmuştur.

Ayrıca bu kenarlık oluşturma özelliklerini; sütun, alıntı (blockquote), sayfa altlığı gibi kısımlarda da kullanabilirsiniz.

Resimlere hover efekti vererek gölgelendirmeyi de anlatmayı planlamıştım ancak yazı tahminimden uzun oldu artık yeni bir yazıda...

Kolay gelsin...