MEMBUAT EFEK SPINNING HOVER PADA POST WIDGET

Langkah -langkahnya sebagai berikut :

1. Dashboard > Template
2. Expand Widget Templates check box.
3. Kemudian cari kode berikut

]]></b:skin>



Tambahkan kode berikut sebelum kode tersebut.

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

Kemudian cari kode berikut ini

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

 Kemudian ganti dengan kode yang dibawah ini :

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwipLmAXEZ4vU6o8zTe0je_yM_pRBDCPUauMt7MTUEz7o9-91WpgpNKVZFGQlG1BRG2nhew6CEiP8kfYeserag4wttOsb84qU9tTQ8cDKTKGuqfkQHClKbVqEnXy1JTK_Lg96cd2V9WGI/s1600/helperblogger-default-image.jpg' 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>

 Lalu klik save dan lihat hasilnya  DEMO