Bloggera Resimleri Daha Büyük Geniş Nasıl Yükleriz? "HQ"

Bloggerda resimleri yüklediğimizde üç boyut var büyük,küçük ve orta boyutlarda olmak üzere. Resmi büyük yüklediğimizde bile blogger otomatik olarak resmi küçültüp önizleme boyutuna getiriyor. Bu boyutlar da maalesef temalarımızda küçük kalıyor.
İşte bunu mümkün kılan bir ipucu açıklayacağım.
Yüklediğimiz resimlerin daha öne çıkmasını ve temanıza daha uyumlu olmasını kendi belirlediğiniz genişliklerde yazılarınızın içinde gözükmesini istiyorsanız bu yöntem tam size göre.
Resmimizin yazı içerisinde normaldeki büyük görünümü:


Bu hileyi yaptıktan sonra resmimizin görünümü:



Önce htmlyi düzenle kısmına giriyoruz ve yazı alanımızın genişliğine bakıyoruz. Eğer klasik şablon kullanıyorsunuz main-wrapper veya main bölümünde bulabilirsiniz yazı alanı genişliğinizi. Bulmakta zorluk çektiyseniz hileyi uyguladıktan sonra temanıza göre genişliğiyle oynayıp düzeltebilirsiniz.
Koldarımızın içerisinden aşağıdaki kodu buluyoruz.

]]></b:skin>

Kodu bulduysak hemen üstüne aşağıdaki kodlarımızı ekliyoruz:

img {
max-width: 600px;
width: expression(this.width > 600 ? 600: true);
}

***Lacivert ile gösterilen sayılar resminizin büyük boyutta göstermek istediğiniz genişliğini vermektedir. İlk adımda bulduğunuz genişlik şu anda işe yaramaktadır. Örneğin yazı alannızın genişliğini 610 bulduysanız resim boyutunu 600 yaparak temanızda daha güzel durmasını sağlayabilirsiniz.
Adımları tamamladıktan sonra şablonumuzu kaydedebiliriz. Şimdi yüklediğimiz resmi büyük boyutta göstermeye geldi.

Resimlerimizi normal yüklediğimiz gibi yükleyelim. Resmimizi yükledikten sonra yazı içerisinde HTML'yi Düzenle kısmına gelip aşağıdaki kodlara benze kodları göreceksiniz. Bu kodlar yüklediğimiz resmin kodlarıdır.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcpRH6sIvMBKKat5jx8Wa4oTApDbPUxkM1yaVRvmqhm07D38ZcnBq8A3ihTXKNHpD9GxS4CdvhxDOyyen0QmhetQszlmymX7v1i4A3fsQv4bbnxzYUt50CxZOqH5S8x_7uUTdcqsgjBWgl/s800/Image3.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 291px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcpRH6sIvMBKKat5jx8Wa4oTApDbPUxkM1yaVRvmqhm07D38ZcnBq8A3ihTXKNHpD9GxS4CdvhxDOyyen0QmhetQszlmymX7v1i4A3fsQv4bbnxzYUt50CxZOqH5S8x_7uUTdcqsgjBWgl/s400/Image3.png" alt="" id="BLOGGER_PHOTO_ID_5356425568508049202" border="0" /></a>

Resmi daha büyük boyutta yazı içerisinde göstermek için artık tek yapmanız gereken yukarıdaki kodlarda mor kodları silmek ve mavi s400 yerine s800 yazmak.

Aşağıdaki örneği inceleyebilirsiniz:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcpRH6sIvMBKKat5jx8Wa4oTApDbPUxkM1yaVRvmqhm07D38ZcnBq8A3ihTXKNHpD9GxS4CdvhxDOyyen0QmhetQszlmymX7v1i4A3fsQv4bbnxzYUt50CxZOqH5S8x_7uUTdcqsgjBWgl/s1600-h/Image3.png"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcpRH6sIvMBKKat5jx8Wa4oTApDbPUxkM1yaVRvmqhm07D38ZcnBq8A3ihTXKNHpD9GxS4CdvhxDOyyen0QmhetQszlmymX7v1i4A3fsQv4bbnxzYUt50CxZOqH5S8x_7uUTdcqsgjBWgl/s800/Image3.png" alt="" id="BLOGGER_PHOTO_ID_5356425568508049202" border="0" /></a>

Evet artık yazı içerisinde büyük ve ferah resimler sergileyebileceksiniz. Anlayamadığınız bir yer olursa yardımcı olurum yorumlara sorununuzu yazmanız yeterli.
Kaynak: bloggertricks.com

Resimleriniz Mouse Dokunuşunuzla Canlansın (Resimlere Donukluk Etkisi)

Resimli Anlatım eklenmiştir...

Blogunuza eklediğiniz resimlere biraz hareket getirmek ister miziniz: Artık resimlerinize donukluk efekti verebiliceksiniz. Bu efekt sayesinde mousela resmin üzerine geldiğimizde resimler canlanacak. Aşağıdaki örneğimizi test edebilirsiniz. -http://tambirblog.blogspot.com/



Önce Html'ye aşağıdaki kodları ]]></b:skin>'den önce ekliyoruz...


a.linkopacity img {filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;} a.linkopacity:hover img {filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;}


Yazımızın içinde efekti uygulayacağımız resimlere ise aşağıdaki kodu uygulayacağız:

<a class="linkopacity" href="Resmin gideceği adres" title="Resmin açıklama"><img alt="" style="border: 1px solid black;" src="Resim Urlsi" /></a>


Resim Url'si yerine de yüklemiş olduğumuz resmin adresini giriyoruz. Bu kadar
Artık resimleriniz mouse hareketimizle hayat buluyor...

Photoshop hiç bu kadar kolay olmamıştı...

Link Düzeltilmiştir...
Mükemmel efektleri sayesinde photoshop progaramlarıyla uğraşmamıza gerek kalmayan bir site buldum. Site yüz tanıma teknoloji sayesinde fotoğraflarınıza çok güzel efektler veriyor.
Bu sitede zaman geçirirken çok eğleneceksiniz.
Muhteşem sanat eserleri çıkardım ortaya bu siteyle:D Hemen sizlerle paylaşmak istiyorum...
İşte en beğendiğim 10 tanesi ve karşınızda Tam Bir Blog resim galerisi:






Söyleyecek söz yok, mükemmel bir site. Sizde uygulamak istiyorsanız buradan...

http://tambirblog.blogspot.com/