Popüler Yayınlar Gadget ( Özelleştirilmiş )

Blogger eklentilerinin en güzellerinden olan Popüler yayınlar Gadget'ini  başka bir sitede gördüm ve oldukça  güzel olan bu eklentiyi kendi siteme'de kurdum  ben boyutlarını biraz küçük yaptım  sitenize  şık bir görünüm kazandıracaktır.

Bu eklenti kaliteli olmasının yanında  siteyi  hiç bir şekilde yavaşlatmıyor ve  Javascript kodlarından ibaret olan bir eklenti  değil.

Demo olarak bakmak isterseniz www.ibrahimfirat.net sitesinin sağ bölümünden ulaşabilirsiniz.

Kurulum için:

Blogger kumanda paneli + Şablon + HMTL'yi düzenle ve bu kısımdan ctrl + f  yardımı ile  aşağıdaki kodu bulunuz.


]]></b:skin>

Yukarıdaki kodu bulduktan sonra aşağıdaki kodu bulduğunuz kodun bir satır üstüne ekleyiniz.


#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);}

Ancak     sorunsuz  kodları ekledikten sonra  çalışabilmesi için popüler yayınlar gadgetini eklemeniz gerekmektedir.

Sonrasında aşağıdaki kodu bulunuz.

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

Yukarıdaki bulduğunuz kod ile aşağıdaki kodu tamamen değiştirin.

<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"'> <!-- (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 == "false"'> <!-- (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>

CSS Popüler Yayınlar Eklentisi Video