Blogger Popüler Yayınlar Gadgeti Hareketli

Merhaba Arkadaşlar ,bugün sizlere bloguzda uygalayabileceğiniz Popüler Yayınlar Eklentisinde bahsedeceğim.Üzerine geldiğimizde dönen ve widget olarak sadece resmin bulunduğu eklentiyi hemen anlatmaya başlayayım.

İlk olarak aşağıdaki kodu bulalım:

Kodu bulduktan sonra hemen üstüne aşağıdaki kodu 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);}

Ve sonra Yerleşim kategorisinden yeni bir popüler yayınlar eklentisi oluşturuyoruz.

Sonra Şablon > Html Düzenle diyoruz ve aşağıdaki kodu aratıyoruz.

Bu kodlarla 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 == "false"'> <b:if cond='data:showSnippets == "false"'>  <a expr:href='data:post.href'><data:post.title/></a> <b:else/>  <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 == "false"'>  <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/>  <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>

Yardım için yoruma yazabilirsiniz...

Paylaş

Yazar : KODBLOGCUM

Benzer Yayınlar

Hazır Sosyal Paylaşım Eklentisi - 11 Merhaba Arkadaşlar, bu yayınımda sizlere yeni bir sosyal paylaşım eklentisinden bahsedeceğim.Sade ve şık bir ekle
Blogger İletişim Formu Oluşturma(Google Form ile) Merhaba arkadaşlar, bu yayınımda sizlere blogger kullanırken çok güzel ve pratik bi eklenti diyebileceğimiz Googl
Blogunuz İçin Hazır Sosyal Paylaşım Eklentisi - 5 Blogunuza ekleyebileceğiniz hareketli sosyal paylaşım eklentisi. Üzerine geldiğinizde sağ tarafa doğru açılan sos
Blogunuz İçin Hazır Sosyal Paylaşım Eklentisi - 3 Blogger için hareketli sosyal medya eklentisi. Üzerine geldiğinizde büyüyen iconları bloggerınızı görselini artır