Popular Post yang terdapat pada blog bisa dibuat dengan berbagai cara seperti popular post thumbnail (bergambar), popular post warna-warni atau popular post teks sederhana. Jika anda ingin blognya terlihat menarik dan sedikit berbeda dengan blog lainnya, ada baiknya anda membuat populat post gambar berputar. Gambar yang terdapat pada popular post akan berputar jika tersentuh kursor, wiiihh....keren kan!!!. Baiklah, bagi anda yang tertarik untuk membuatnya berikut cara membuat popular post gambar berputar. Yuk, ikuti Kang AP menyimak langkah-langkahnya.
1. Setelah login ke blogger pilih Tata Letak » Tambah Gadget
2. Pilih Entri Populer » Setting seperti gambar dibawah ini » Simpan
■ Note.
Jika anda ingin ada cuplikannya, maka ceklis juga cuplikan
3. Berikutnya Pilih Template » Edit HTML
4. Pasang kode berikut diatas kode ]]></b:skin>
.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. Selanjutnya cari kode seperti berikut <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
6.Ganti kode tersebut dengan kode dibawah 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 == "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>
Baca juga :
» Cara Mudah Membuat Menu Navigasi Dibawah Blog
» Cara Membuat Spoiler Keren Terbaru Pada Blog
» Cara Memasang Profile Keren Pada Blog
7. Simpan dan lihat hasilnya
Demikian cara membuat popular post gambar berputar, semoga dapat membantu dan bermanfaat. Terima kasih atas kunjungannya and happy blogging.
0 Response to "Cara Membuat Popular Post Gambar Berputar"
Post a Comment