Cara membuat popular post dengan efek gambar berputar pada blog

Diposting oleh Muhammad Iqbal on Minggu, 12 Agustus 2012

Cara membuat popular post dengan efek gambar berputar pada blog| Secara default tampilan gambar pada popular post terlihat biasa-biasa saja tp kita dapat berkreasi yang mana dengan kreasi ini gambar pada popular post dapat berputar, untuk demonya silahkan arahkan kursor anda pada popular post di blog ini

 http://1.bp.blogspot.com/-SKebYveKCkQ/T0h6yfZyzKI/AAAAAAAABTE/q-VUIVSK3p4/s1600/121.JPG
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 Gambar Berputar Ini Bermanfaat Bagi Anda.

Ditulis Oleh : Muhammad Iqbal ~ Turitorial Blog

Anda sedang membaca sebuah artikel yang berjudul Cara membuat popular post dengan efek gambar berputar pada blog. Terimakasih atas kunjungannya dan semoga artikel ini dapat bermanfa'at.

:: Thank you for visiting ! ::

Comments
1 Comments

1 komentar:

  1. makasih informasinya.. saya akan coba praktekan

    BalasHapus

Bagaimana Pendapat Sobat Semua Tentang Artikel Di Atas???

Untuk menambahkan yahoo emotion pada komentar sobat adalah dengan cara menyertakan kode yahoo emotion diatas pada komentar yang sedang ditulis contohnya kode seperti ini :) yang terdapat di atas kotak komentar ini

Panduan Memberi Komentar
1.Masukan komentar anda
2.Lalu pada kata 'beri komentar sebagai' , pilih account yang anda punya, bagi yang belum mempunyai account pilih Name/url, isi nama anda dan Kosongkan URL atau isi dengan alamat facebook anda(untuk mengetahui alamat facebook anda silahkan login ke facebook dan pilih profile anda, anda dapat melihat alamat Facebook anda di atas, contoh alamat Facebook punya saya http://www.facebook.com/profile.php?id=1823916177
3.dan kemudian Publikasikan
4.Selesai dan anda tinggal menunggu komentar anda muncul
Semoga bermanfa'at.

 
^ Back to Top