Blog Popüler Yayınlar Resimlerini Yeniden Boyutlandırma

Blogger sitelerinin bilinmeyen bir çok ipuçları vardır. Özellikle blog sitesi için hemen hemen tüm bloglarda da mutlaka olması gereken popüler widgetlerinin de bir çok bilinmeyen ipuçları var.

Blog kullanmaya yeni başlayan yada blogundaki popüler yayınları düzenlemek için sınırsız kod kullanmak zorunda kalabiliyorsunuz. Bu neden bu yazımızda blogger popüler yayınlar widget'inin sadece bir kaç yeri değiştirerek resimlerin boyutlarını istediğiniz boyutta yapabilirsiniz.

Blog Popüler Yayınlar Resimleri Nasıl Boyutlandırılır?

1- Öncelikle aşağıdaki popüler yayınlar widget'inin normal kodlamasını incelediğimizde, renkli olarak belirlediğimiz 72 sayısı blogunuzda bulunan popüler yayınların boyutudur. Hatta blogunuzda kontrol ettiğinizde Natural değerlerinin {72 × 72 pixels (Natural: 72 × 72 pixels)} 72 olduğunu görürsünüz. İşte bu oranı değiştirmek için blog sitelerinde kod kullanılır. Şimbu bu değerleri istediğimiz boyuta getirmek için, hatta hiç bir kod kullanmadan yapabilirsiniz.

<b:widget id='PopularPosts1' locked='false' title='Popüler Yayınlar' type='PopularPosts' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='external'>
<img border='0' alt='' expr:src='resizeImage(data:post.thumbnail, 72, &quot;1:1&quot;)'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
<div style='clear: both;'/>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

2- Aşağıdaki widget kodunda yukarıda belirttiğimiz kodu değitirdik, yani 72 değer yerine 100 yazdık ve oran değerlerini de 5:3 yaptık bu şu demek; height='60px' width='100px' yükseklik 60px genişlik 100px anlamına gelir. Eğer 72 değerini 300 yapmış olsaydık ve oran değeri yine 5:3 olduğunu düşünürsek bu değerler ile elde edeceğimiz boyutlar yükseklik 180px genişlik 300px olacak şekilde ayarlanmış olacaktır.

<b:widget id='PopularPosts1' locked='false' title='Popüler Yayınlar' type='PopularPosts' version='1' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='!data:showThumbnails'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='external'>
<img border='0' alt='' expr:src='resizeImage(data:post.thumbnail, 100, &quot;5:3&quot;)'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
<div style='clear: both;'/>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

NOT: Bazı blog temalarında bu koda benzer bir kod bulunmamaktadır. Bu neden yukarıda paylaştığımız kodlar ile blogunuzdaki kodları değiştirmeniz yeterli olacaktır.

ÖRNEK SAYFA

Örnek sayfada popüler yayınlar resimlerini sağ tıklayıp incelediğinizde resim boyutlarının değiştiğini görebilirsiniz.