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.


Öncelikle 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'/>

Ş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>

CSS3 yardımı ile Popüler Yayınlar Gadget'ı yapımı CSS3 yardımı ile Popüler Yayınlar Gadget'ı yapımı Reviewed by Oğuzhan Cabbaroğlu on 1/17/2012 Rating: 5

5 yorum

  1. Beyler deneme yorumudur laf etmeyin s*kerim :D

    YanıtlaSil
  2. Güzel paylaşım Yararlı eline sağlk

    YanıtlaSil
  3. Amk ana sayfanda olmayan başka yere yorum yapsana :D

    YanıtlaSil
  4. Paylaşım Çok Güzel Teşekkürler :)

    YanıtlaSil
  5. rica ederim yararlı geldiyse ne mutlu bana.. :)

    YanıtlaSil

Image Link [https://lh3.googleusercontent.com/kXvOVaV2dIWC4gKWhzQhTK7KXwgYFcM_xkISmmlJH5MIYQ-nQogwFc1zAaKEpnqhaPEMJ1Vpn4SKbg=w1366-h768-rw-no] Author Name [Oğuzhan Cabbaroğlu] Author Description [Ozicab İnternet ve Tasarım Hizmetleri - Kurucu / Nam-ı Diğer Ozicab ] Facebook Username [ozicab] Twitter Username [ocabbaroglu] GPlus Username [107441494120937470968] Pinterest Username [ozicab] Instagram Username [ozicab]