03 Mart 2010

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...
Yorum
casminella dedi ki...
Paylaşım için teşekkürler, danışmak istediğim bir şey var. Blogumu kuralı birkaç ay oldu. İlk kurduğumda site adının yanına resim eklemiştim. Resmi kaldırmak istedim, bir türlü başarılı olamadım, ben de kodlarda resim ile ilgili ne varsa sildim. Şimdi başka resim yükleyemiyorum, kodları bozdum galiba, yardımcı olabilirseniz çok mutlu olurum, teşekkürler...
Sade dedi ki...
Bu sorunuza bir yazı ile cevap vermek daha mantıklı ama buradan biraz açıklamay çalışayım olmazsa ilgili bir yazı yazarım;

Şimdi önce header resmi yükleyin ve Başlık ve tanımın arkasında seçeneğini seçin.

Temanıza gelin ve Widget Şablonlarını Genişlet kutucuğuna tıklayın.

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

kodunu bulun. Ve alttaki kod ile değiştirin;

#header-inner {
background-position: left;
width:650px;
}

Genişliği width:650 yazan yer ile temanızdaki #outer-wrapper kısmının genişliğinin (width: 660px;) birbirine uyumlu olmalıdır.

Daha sonra temanızda bulunan alttaki benzer kodu bulun.
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
Yukarıdaki koda benzer kodu bulunca o kod içibdeki margin satırını değiştirin. Şöyle yapmanız yeterli; margin:0 5px 5px 300px;

Daha sonrada temanızda
#header .description {
margin:0 5px 5px;
.........
}

koduna benzer kodu bulun ve yine margin kod satırını margin:0 5px 5px 500px; şeklinde değiştirin.

Bu yöntemle resim sola yazılar sağa yerleşecek. Umarım sorunsuz şekilde temanıza uygulanabilir. GEnişlikler ve margin değerleri temanızın başlık alanının genişliğine ve resmin boyutuna göre değişiklik gösterebilir.
casminella dedi ki...
Yardımınız için çok teşekkür ederim. Deneyeceğim, inşallah başarabilirim...
Sade dedi ki...
Siz cevabımın uzun olduğuna bakmayın, Kolayca yapabilirsiniz emin olun. Bir aksilik olur da olmazsada tekrar daha detaylı daha anlaşılır anlatmaya çalışırım. Kolay gelsin...
medyafilm dedi ki...
selam bi sorum olucaktı konu ekliyorum resmin yanındaki yazıları nasıl aşşağıya alıcam mesela şu şekil resim eklicem altında yazı olucak ve devamını oku olucak yapabılırmıyım bunu yardımcı olursanız sevinirim.