Blogger'da Öne Çıkan Resimler Nasıl Yapılır?

Blogger'da Öne Çıkan Resimler Nasıl Yapılır?

Blogger gün geçtikçe daha kullanışlı hale geliyor. Bu yüzden her geçen gün kullanıcısı artan Blogger alt yapılı web siteleri, blog siteleri daha fazla görülmektedir. Google tarafından kullanıcılara ücretsiz bir hizmet olarak sunulması oldukça güzel bir durum. Blogger geliştiricileri belli aralıklarla küçükte olsa geliştirmeler yapmakta. Bu Blogger için oldukça önemli ve aynı zamanda kullanıcılar içinde önemlidir.

Blogger sitesini geliştirmek birazda kullanıcının elinde. Açık kaynak kodlu olmayan Blogger, sadece tema özelleştirme konusunda kullanıcılara  az da olsa bir özgürlük tanımıştır. Bu sayede istediğimiz tarzda ve şekilde Blogger için yapılmış temalar görebiliriz.

Blogger'da öne çıkan resimler yapmak ve istediğimiz resimleri ön plana çıkarmak için bir yöntem buldum. Biraz meşakkatli olabilir ama biraz kullandıktan sonra el alışkanlığı ile daha kolay bir kullanımı olacağını tahmin ediyorum. Ayrıca CSS ve HTML bilen kişi daha da özelleştirebilir. Kodları yalın bir şekilde vereceğim. Sadece göstermek amaçlıdır. Kullanan kişinin kendine göre değişiklikler yapması daha güzel olur.

Blogger'da Öne Çıkan Resimler Nasıl Yapılır?

Öncelikle Blogger ⟶ Ayarlar ⟶ Site feed'i kısmına geliyoruz. Burada bulunan Başlık ve ek bağlantıları kısmını etkinleştiriyoruz. 

Etkinleştirdikten sonra Yeni Yayın dediğimizde sağ taraftaki panelde Bağlantılar aktif olacaktır. Burası aktif olduktan sonra kod kısmına geçiyoruz.

Tema kodlarımızın içerisinde data:post.body  öğesini aratıyoruz. Bundan bir kaç tane olabilir. Bulduğunuz kodun üstüne aşağıdaki kodu yapıştırın.

<b:loop index='item' values='data:post.enclosures' var='enclosure'>

    <table align='center' cellpadding='0' cellspacing='0' class='tr-caption-container' style='margin-left: auto; margin-right: auto;'>

        <tbody>

            <tr>

                <td style='text-align: center;'> <img expr:data-src='data:enclosure.url' expr:src='resizeImage(data:enclosure.url, 749, "16:9")' expr:title='data:post.title' /> </td>

            </tr>

            <tr>

                <td class='tr-caption' style='text-align: center;'>

                    <data:post.title />

                </td>

            </tr>

        </tbody>

    </table> <br />

</b:loop>{codeBox}

Sonraki adım aynı alttaki kodu <b:includable id='postFeaturedImage' var='post'> aratıyoruz. İçerisinde bulunan img içerisinde bulunan class='buranın içinde bulunan kod' değerlerini aşağıdaki kodun içerisine yapıştırıyoruz. Class değerlerini yapıştırmamızın nedeni temanın ayarlarının aynı kalması. Yapıştırdıktan sonra <b:includable id='postFeaturedImage' var='post'> tümünü silip aşağıdaki kod ile değiştiriyoruz.

<b:includable id='postFeaturedImage' var='post'>

<b:loop index='item' values='data:post.enclosures' var='enclosure'> 

<img class='class_değerleri_buraya_yapıştırılacak' expr:data-src='data:enclosure.url' expr:src='resizeImage(data:enclosure.url, 150, "16:9")' expr:title='data:post.title' /> 

</b:loop>

</b:includable>{codeBox}

Bu işlemleri yaptıktan sonra yazılar kısmına gidiyoruz. Burada Bağlantılar kısmı aktif olmuştu. Bağlantılar kısmına tıklıyoruz. Tıkladıktan sonra  Ek Bağlantılar kısmına resim ekliyoruz. Ekledikten sonra işlem tamamdır. Öne çıkan resim işlemi tamamdır. Herhangi bir sorun ile karşılaşırsanız yorum kısmından belirtin.

Ek Bağlantılar Resim Ekleme

Not: Blogger'a resimlerinizi yükledikten sonra resim linkini kopyalayıp yapıştırmanız gerekmektedir. Aynı zamanda image/jpeg yazan kısım  resminizin formatını belirtir. Elediğiniz format png ise image/png eğer eklediğiniz format webp ise image/webp şeklinde olmalıdır.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic0IYuz8fY2njl9v-KcjHq4ydGPx90ZFMOh7aOj0cje3UZPBesmmpNZASusnj5P6xX6OpuFVvPmcJp62djku7axFQdHYOyl1jiy3Evs2EHw_kWReK1peF2AvfHV2h5rt6-KKeJxOOmp0mNCzmwkbj6isHYURSrbUfvxvNvvkpXvZCy4qsByGymtE2ADQ/s16000/blogger-one-cikan-resim-ayarlama.png

Üste verdiğim resim linkinin kırmızı olarak işaretlediğim kısmını almalısınız. /s1600 kısmına kadar. Eğer resmin tüm linkini yapıştırırsanız hata verecektir. s1600 resmin boyutunu gösterir ve bu oran eklediğiniz resmin boyutuna göre değişebilir. Yani farklı oranlar olabilir.