Cara Membuat Popular Post Dengan Animasi Image Berputar

siang siang kemarin saya berjalan jalan di blog http://teknik-blog-tutorial.blogspot.com/ dan nemuin articel Cara Membuat Popular Post Dengan Animasi Image Berputar , tutorial ini tidak memerlukan bahan / pemikiran yang cukup rumit, karena anda tinggal ikuti petunjuk postingan saya ini bagaimana cara membuat dan diterapkan pada blog. Jika anda sudah tidak sabar lagi dengan tutorial ini, coba anda lihat demonya di blog http://teknik-blog-tutorial.blogspot.com/ dan sorot cursor pada gambar di popular post nya ,, aapa yang terjadi ?

Cara membuat popular post dengan efek gambar berputar pada blog :
1. Log in ke Blogger
2. Rancangan
3. Tambah Gadget => Pilih Popular Posts
4. Beri Judul Popular Posts

Langkah selanjutnya cara memasang popular post dengan efek gambar berputar :
1. Rancangan => Edit HTML
2. Tidak perlu Centang Expand Template Widget (cari pakai scroll mouse anda kebawah)
3. Cari kode ]]></b:skin> kemudian letakkan kode berikut di atasnya

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

4. Selanjutnya anda cari kode (tanpa dicentang lho?) <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

5. Silahkan anda hapus kode diatas dan ganti dengan kode di bawah 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'> <li> <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'> <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>
 
Keterangan :

Jika pada template anda tidak ada PopularPost1 (warna biru), pasti ada Popular Post2, nah anda tinggal ganti dengan kode yang saya berikan (warna pink) menjadi PopularPost2 (intinya harus sama-lah)

6. Selesai, simpan template anda.




Semoga Artikel Cara Membuat Popular Post Dengan Animasi Image Berputar Bermanfaat Bagi Anda.Jangan Lupa Click Iklan Dibawah Sebagai Tanda Terimakasih

sumber: http://myhafiezers.blogspot.com

Cara Membuat Efek Petir di Blog

Langkah Membuat Efek Petir di Blog
1. Log in ke Blogger
2. Klik Rancangan
3. Tambah Gadget
4. Pilih HTML/Javascript
5. Masukkan kode berikut ke dalam HTML/Javascript

<style
type="text/css">body { background-image:
url(http://i958.photobucket.com/albums/ae69/putrablidz/storm.gif);
background-color:transparent; }</style>

6. Selesai dan simpan, silahkan lihat hasilnya




Semoga Artikel Cara Membuat Efek Petir di Blog Bermanfaat Bagi Anda.Jangan Lupa Click Iklan Dibawah Sebagai Tanda Terimakasih

sumber: http://myhafiezers.blogspot.com