Kategoriler: Blogger

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 🙂

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.

Paylaş
Yazar
Furkan Özden
Etiketler: Blogger İpuçları

Son Gönderiler

Ücretsiz Microsoft Office Lisansı Almanın 6 Yolu

Ücretsiz Microsoft Office lisansı almak zor olsa da bazı yöntemler hala kullanılabilirliğini koruyor. Microsoft Office'i ücretsiz…

7 gün önce

Kaliteli Erkek Kol Saati

Uzaktan baktığınızda kalitesini anlayabileceğiniz ürünler vardır. Erkek kol saati markalarından bazılarının ürünleri de aynen böyledir.…

3 hafta önce

Patronunuza Hatasını Nasıl Söylemelisiniz?

Çoğu insan patronlarının kariyerlerinin başlarında hata yapmasını beklemez. Toplumumuzda çocukluğumuzdan itibaren yaşlılarımıza itaat etmemiz ve…

4 hafta önce

Dar Salonlar İçin TV Ünitesi Önerileri

Evde bulunduğumuz sürenin büyük bir kısmını geçirdiğimiz salonların yerleşimi her zaman çok önemlidir. Ailecek bir…

1 ay önce

Pırlanta Bileklik Modelleri

Eski çağlarda kadınlar kendilerini güzel hissetmek için bazı malzemeler ile takılar üretir ve kullanırdı. Hayvan…

1 ay önce

Yağlı Boya Kullanımı

Yağlı boya çok fazla yüzeye uygulanabilen özellikte boyalardır. Son derece kolay ve pratik bir şekilde…

2 ay önce