Cara membuat Popular Post dengan Efek Rounded

Cara membuat Popular Post dengan Efek Rounded

Baru baru ini saya mengunakan cara ini untuk widget Populer post saya, langsung dilihat saja tutorial Cara membuat Popular Post dengan Efek Rounded.

• Login Ke Blogger.com → Edit Templates
• Letakkan CSS dibawah, tepat diatas kode ]]></b:skin>

#PopularPosts1{max-width:300px;}
#PopularPosts1 dd{float:center;margin:0;margin-top:8px;background:none;display:block;}
#PopularPosts1 img{border-radius:30px 0 30px 0;-moz-border-radius:30px 0 30px 0;-webkit-border-radius:30px 0 30px 0;-o-border-radius:30px 0 30px 0;float:left;width:85px;height:85px;opacity:0.5;filter:alpha(opacity=70);background:none;border:2px solid #000ddd;border-bottom:2px solid #444;border-right:2px solid #333;padding:3px;margin:1px;transition:all 0.5s;
-moz-transition:all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;}
#PopularPosts1 img:hover{cursor:move;-moz-transform:scale(1.1) rotate(-0deg);-webkit-transform:scale(1.1) rotate(-0deg);-o-transform:scale(1.1) rotate(-0deg);-ms-transform:scale(1.1) rotate(-0deg);transform:scale(1.1) rotate(-0deg);filter:alpha(opacity=100);opacity:2.2;border:2px solid #ccc;border-right:2px solid #000ddd;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);border-bottom:2px solid #0274be;box-shadow:1px 1px 5px #0274be}
#PopularPosts1 ul{padding:0;overflow:none;margin:0}

• Kemudian Cari Widget Popular Post anda lalu ganti dengan Script dibawah 

<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='popular post' 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'/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizXEQ-GCtrqx7LqRrzmE0x_64J2M5cHiAayzXO4rroxyux0v_hj6iyVJato50MRIJxFlHtS1AYNzJxN1T7chGxgVhT9le__JCWORJrI4DDIOpTH4b8W8vNQWxhiUxO1AJMwos1awMELHY/s1600/no-image.png'/></a>
</b:if>
</b:if>
</b:if>
</dd>
</b:loop>
</ul>
<div class='clear'/>
</div>
</b:includable>
</b:widget>

Selesaideh tutorial  Cara membuat Popular Post dengan Efek Rounded.

Share 'Cara membuat Popular Post dengan Efek Rounded' On ...

Title: Cara membuat Popular Post dengan Efek Rounded
Posted by:Anonymous
Published :2013-04-22T11:03:00+07:00
Rating: 5
Reviewer: 100000000 Reviews
Terimakasih banyak karena sobat telah membaca artikel Cara membuat Popular Post dengan Efek Rounded. Sobat bisa bookmark halaman ini dengan URL http://cyberr-kediri.blogspot.com/2013/04/cara-membuat-popular-post-dengan-efek.html. Jika ingin memposting ulang artikel ini harap untuk mencantumkan link sumber.