Cara Membuat Popular Post Dengan Gambar Berputar

(isi iklan)

Pada kesempatan kali ini, saya akan berbagi bagaimana Cara Membuat Popular Post Dengan Gambar Berputar. Popular Post itu sendiri berfungsi untuk apabila blog kita sedang di kunjungi oleh orang lain, maka orang tersebut akan tau topik apa yang lagi hot atau populer pada blog kita. Dengan membuat gambar pada popular post kita menjadi berputar, pasti akan menambah daya tarik pengunjung untuk terus mengunjungi blog kita.

Jika kawan-kawan blogger tertarik dengan Cara Membuat Popular Post Dengan Gambar Berputar, sobat bisa mengikuti beberapa step dibawah ini :

• Step Pertama :

♦ Masuk akun Blogger - design/Rancangan - Add Gadget dan pilih Popular Post
♦ Setiap widget default blogger akan langsung memberi nama pada widget tersebut, misalnya "Popular Posts". Kalian bisa menggantinya dengan nama lain sesuai dengan keingginan.
♦ Dalam menu Popular Post kalian ceklist image thumbnail, untuk snippet tidak perlu
♦ Jumlah popular Post yang ingin ditampilkan, kalian isi dengan yang diinginkan
♦ Save

•  Step Kedua :

♦ Masuk menu Design/Rancangan - Edit HTML, dalam peng-editan ini tidak perlu men-ceklist Expand Widget Template
♦  Kemudian cari kode ]]></b:skin> dan tempatkan kode CSS dibawah ini di atasnya.

Kode CSS:

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

♦ Selanjutnya cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
♦ Dan ganti semua kode tersebut dengan kode kode dibawah ini :

Kode Popular Post

<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>

♦ Save template sobat.

Note : Kode yang diberi warna hijau popularposts1 tiap template berbeda, terkadang pengkodeannya adalah popularposts2, jika hal itu terjadi, kalian ganti saja popularposts1 dengan popularposts2.

Bagaimana ? Mudahkan...
Demikian Tutorial bagaimana Cara Membuat Popular Post Dengan Gambar Berputar. Semoga bermanfaat bagi kita semua.

Tweet

Judul	Cara Membuat Popular Post Dengan Gambar Berputar
Deskripsi	Pada kesempatan kali ini, saya akan berbagi bagaimana  Cara Membuat Popular Post Dengan Gambar Berputar . Popular Post itu sendiri berfu...
Author	Unknown
Author Rating	89,99%/ 100% Suara Dari 9999 Ulasan

Share this with short URL: Get Short URL

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di IDCEPU

Tag : Blogger, TIPS BLOGER