Blogger için alternatif Popüler Yayınlar gadget’ı düzenleme

Çok aradım çok, ama başka servisler kullanmadan yapanları görmedim ve işe ben el attım. Şimdi size kodları lak diye verebilirim ama benim isteğim siz de öğrenesiniz ki isteğinize göre biçimlendirebilesiniz. Şimdi yapacağımız şey çok basit diye başlarız hep -ki zaten çok basit-. Uygun bir yere Popüler Yayınlar Gadget’i ekliyoruz. Daha sonra kaydediyoruz ve HTML’yi Düzenle kısmına geçiyoruz. Hemen buradan, hani az önce gadget eklemiştik ya o gadget’ın adını aratıyoruz, bende Popüler Yayınlar. Tamam şimdi düzenleme yapacağımız yer burası.

Değişiklik yapacağımız kodda şu 3 tane kod mevcut.

<!-- (1) No snippet/thumbnail -->
<!-- (2) Show only snippets -->
<!-- (3) Show only thumbnails -->

Hani gadget’i eklerken size seçenek sunuyor ya, orada hangi seçeneği işaretlediğinize bağlı olarak yukarıdaki kodlardan sonraki kodu devreye sokuyor. Bizim işimiz 3.sü ile.

Burada şöyle bir kod var bu kodun altında link eklenmişresim kodu var.

<div class='item-thumbnail'>

<a expr:href='data:post.href' target='_blank'><img border='0' expr:src='data:post.thumbnail' height='32' style='margin-top: -8px;' width='32' /></a>

Buradaki data:post.href Yazımızın URL‘si. Bakın ben burda yazının önizleme resmi (thumbnail)ini 32*32 yaptım daha hoş duruyor böyle siz isteğinize göre değiştirebilirsiniz. Bir de margin değeri verdim, bu da yukarı çıkması için yukarı çıkması alttan ittirmek lazım normalde ama o zaman hep kayıyor bir değişik oluyor o yüzden üstten 8px aldım. Tabi bu değerleri resmin boyutunu değiştirseniz değiştirmeniz lazım -ki bende bu kadar uzun uzadıya o yüzden anlatıyorum-.Şimdi burası da önemli, sizin orjinal kodunuzda 32*32 ayarlanmadığı için blogger kendi yükseklik ve genişlik değerlerini kullanıyor o da şurada.

expr:height='data:thumbnailSize'
expr:width='data:thumbnailSize'

Eğer bu kodları silmeden yükseklik ve genişlik eklerseniz bir değişiklik olmaz. O yüzden bu kodları siliyoruz. Tamamdır, benim anlatacaklarım bu kadar, umarım birşey öğretebilmişimdir. Eğer kısayoldan, benim öğrenmeme gerek yok sadece kodu ver yeter derseniz, aşağıda hazır kod var. Bu kodu şöyle ekleyeceğiz, normal bir şekilde Blogger’ın popüler yayınlar gadget’ini ekliyoruz ve gadget’ın adını veriyoruz. Gadget’a verdiğiniz adı HTML’yi Düzenle bölümünde buluyoruz ve orada <b:widget ile başlayan yerden seçip </b:widget> ile biten yere kadar seçiyoruz ve aşağıdaki kodu kopyalayıp onun yerine yapıştırıyoruz. Hadi hayrını görün, sağlıcakla kalın.

<b:widget id='PopularPosts1' locked='false' title='Popüler Yayınlar' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><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 == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (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/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'><img border='0' expr:src='data:post.thumbnail' height='32' style='margin-top: -8px;' width='32'/></a></div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Paylaş

Furkan Özden

Blog dünyası ile 2009 yılında tanıştım. Bloğumda haftada en az bir yazı yayımlıyorum. Yazdığım yazıları beğendiyseniz beni Twitter'dan (@frknzdn) takip edebilirsiniz. Daha fazlası için hakkımda sayfasını ziyaret edin.

10 Cevaplar

  1. Anonymous dedi ki:

    verdiğin kod koydum oldu fakat küçük resim falan göstermiyor sorun nedir acaba direk verdiğiniz kodu koydum gadget falan ekledim ama küçük resim göstermiyor…

  2. Furkan ÖZDEN dedi ki:

    Seçeneklerden Sadece küçük resim işaretli olması gerekir. Bu ayarı yaptığınızda sorun çözülecektir.

  3. SeyretSende dedi ki:

    Dediğimiz gibi yaptım olmadı bir hata var galba kodda incelermisin acaba teşekkürler…

  4. Furkan ÖZDEN dedi ki:

    Öncelikle Popüler Yayınlar Gagdeti’nın ayarlarından küçük resimi işaretlemelisiniz.

  5. KıranşaL XP dedi ki:

    tam aradığım şeydi çok saol.bide şu yorumlar yerini nasıl özelleştirebiliriz o konuda çalışma yaparsan çok güzel olur

  6. Popüler yazılar kısmında yazıların başlığını kalın yapmak istiyorum bunu nasıl yapabilirim ? 🙂

  7. barış dedi ki:

    ben kodu yapıştırıyorum fakat böyle bir hata veriyor XML, satır 2489, sütun 5 ayrıştırılırken hata oluştu: The element type “b:section-contents” must be terminated by the matching end-tag ““. ne yapmam gerekiyor acaba? lütfen yardımcı olunuz..

  8. barış dedi ki:

    paylaşım için çok teşekkürler. bir de şu popüler yayınlardaki küçük resimlere nasıl alt etiket koyabiliyoruz. bayağı aradım ama bir çözüm bulamadım. yardımcı olursanız sevinirim seo analizinde hep resimlerin alt etiketi sorun çıkarıyor çünkü. teşekkürler.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bunlar da hoşunuza gidebilir...