CSS3 yardımı ile Popüler Yayınlar Gadget’ı yapımı

İşte popüler yayınlar gadget’ı için güzel bir stil daha. Bu stili uygulamak için ne javascript ne de başka bir eklentiye gerek var. Sadece CSS3’ün güzel nimetlerinden faydalanarak bu gadget’ı oluşturuyoruz.

Öncelikler Tasarım kısmına gidip

]]></b:skin>

kodunu bulup öncesine aşağıdaki kodları ekliyoruz.

#PopularPosts1{max-width:300px}
#PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0}
#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

Tasarımınızda bir Popüler Yayınlar gadget’ı yoksa ekleyin, varsa aşağıdaki gibi olmasına dikkat edin.

Son olarak, Tasarımda Widget Şablonlarını Genişlet kutusunu işaretlemeden aşağıdaki kodu buluyoruz.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

Ve şununla değiştiriyoruz.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' 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'>
<dd>
<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 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>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='60px'/></a>
</b:if>
</b:if>
</b:if>
</dd>
</b:loop>
</ul>
<div class='clear'/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Tamamdır. İşlemimiz bu kadar. Kolay gelsin, kalın sağlıcakla 🙂

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.

11 Cevaplar

  1. Ömrüm Dely dedi ki:

    XML hata iletisi: The element type “b:section” must be terminated by the matching end-tag “” hatası aliyorum

  2. Furkan ÖZDEN dedi ki:

    <b:section> kodunu </b:section> şeklinde kapatman gerekiyor. Kod kapalı olmadığı için bu hatayı almışsın.

  3. Noct dedi ki:

    Do not copy my post without leave a credit link !

  4. Furkan ÖZDEN dedi ki:

    Dude, you just inspired me. In addition, the article has nothing to do with your type. Writing a completely original.

  5. Editör dedi ki:

    Çok teşekkürler bu eklenti çok hoşuma gitti (:

  6. Murat Türkön dedi ki:

    teşekkürler güzel paylaşım

  7. Gercek İlimler dedi ki:

    Zor oldu ama oldu çok şükür o kodu kapatmak hiçte kolay olmuyormuş.

  8. Moyunlar dedi ki:

    Evet sonunda yapmayı başardım.Kodu kapattım.

  9. Yalçın Güler dedi ki:

    çok teşekkür ederim

  10. Mesut AKTUN dedi ki:

    XML hata iletisi: The element type “b:section” must be terminated by the matching end-tag “” hatası aliyorum bende.
    dediğinizi yaptım ama değişen bişey olmadı

  11. Mesut AKTUN dedi ki:

    Tamam şimdi yaptım widget şablonları açık unutmusum

Bir cevap yazın

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

Bunlar da hoşunuza gidebilir...