Jumat, 12 Juli 2013

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

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDzVs3xVa9Err7RbvLYMfnbnxTyOKSpjdwWpoPYWSR6tdNMfyfr2M83GIri5G_rFcZI8NJ5WaZcHWtLCXUyc49cgFSu-cqljy429xP4oxyjir1HJ4D9Vqw5UsMi8539-huzWWXR49wWoVy/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
Posted by dan ipul climber On 21.28 No comments

0 komentar:

Posting Komentar

Daftar Isi Per-Label

Free Music Online
Free Music Online

free music at divine-music.info
  • RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Youtube

Blog Archive

Free INDONESIA Cursors at www.totallyfreecursors.com

    Blogger news

    ANAK DUNIA

    Blogger templates

    Blogroll

    Flag Counter