Yang aku maksut dari tipsku kali ini adalah merubah Tampilan Post Populer dengan effect Animasi Berputar. tentu sobat blogger sudah pada tahu bagaimana tampilan Animasi Post Populer kalau belum tahu sobat bisa lihat gambar dibawah ini.
sebenarnya tutorial Cara membuat tampilan post populer animasi Rotate ini sudah lama sekali beredar namun tak ada salahnya kalau aku bahas pada kesempatan kali ini. buat sobat sudah merubah post populer yang dulu sudah saya share cukup menghapus kode CSS yang berada di atas kode ]]</b:skin>. nah silahkan langsung pada pokok permasalahannya.
1. silahkan login ke blog kalian.
2. silahkan langsung ke Edit Tamplate.
3. tidak usah kalian centang Expant Widget Tamplate.
4. silahkan cari kode ]]</b:skin>. kalau sudah ketemu silahkan letakkan kode CSS dibawah ini tepat diatasnya.
.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}5. kalau sudah kalian taruh kodenya silahkan cara lagi kode
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>6. kalau sudah ketemu silahkan kalian gati kodenya dengan kode dibawah ini.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='Top Views'>
<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'> <li> <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'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <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 class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable>
</b:widget>
7. kalau sudah kalian ganti dan juga sudah kalian taruh kodenya silahkan langsung saja di simpan dan silahkan lihat hasil. namun tunggu dulu... lihat kode yang berwarna merah kalau kalian tidak menemukan kode diatas biasanya kodenya Popular Posts2. atau juga seterusnya intinya silahan sesuaikan saja nomor pada widget post populer.
nah kalau sudah berhasil silahkan berkomertar dibawah....semoga saja artikelku Cara Membuat Tampilan Post Populer Animasi Rotate ini bermanfaat buat kalian. happy blogging semoga blog kalian semakin maju dan semakin sukses dari blog saya ini.
0 komentar:
Posting Komentar