Popular Post yang terdapat pada blog sanggup dibentuk dengan banyak sekali cara menyerupai 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 menciptakan populat post gambar berputar. Gambar yang terdapat pada popular post akan berputar bila tersentuh kursor, wiiihh....keren kan!!!. Baiklah, bagi anda yang tertarik untuk membuatnya berikut cara menciptakan 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 menyerupai gambar dibawah ini » Simpan
■ Note.
Jika anda ingin ada cuplikannya, maka ceklis juga cuplikan
3. Berikutnya Pilih Template » Edit HTML
4. Pasang isyarat berikut diatas isyarat ]]></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 isyarat menyerupai berikut <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
6.Ganti isyarat tersebut dengan isyarat 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 Praktis 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 menciptakan popular post gambar berputar, agar sanggup membantu dan bermanfaat. Terima kasih atas kunjungannya and happy blogging.
Sumber http://ap-thea.blogspot.com
EmoticonEmoticon