Cara Membuat Popular Post Dengan Gambar Berputar
Contoh Popular Post |
♦ Dalam menu Popular Post kalian ceklist image thumbnail, untuk snippet tidak perlu
♦ Jumlah popular Post yang ingin ditampilkan, kalian isi dengan yang diinginkan
♦ Save
â—˜ Tahap 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.
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);
}
♦ Dan ganti semua kode tersebut dengan kode kode dibawah ini :
<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>
Demikian Tutorial bagaimana Cara Membuat Popular Post Dengan Gambar Berputar.Semoga bermanfaat bagi kita semua.
Salam Blogger
Article : Cara Membuat Popular Post Dengan Gambar Berputar
article Title : Cara Membuat Popular Post Dengan Gambar Berputar
Waahhh Makasih Info Nya Gan
BalasHapusPatut Di COba
#Comment Back http://sharing4rt.blogspot.com
wahh, mantep nih tips...!
BalasHapusmakasih ya kak ^_^
wah nice info gan ,,,salam kenal
BalasHapusterimakasih Gan, matap artikelnya,
BalasHapusboleh neh di coba
BalasHapusMakasi gan tipsnya, izin nyoba gan..=)
BalasHapuselectro-bee.blogspot.com
Sangat inovatif, sob..
BalasHapusKok cuplikan di Home blog saya jadi nggak ada ya?
BalasHapusSalam kenal!
mau nayak dikit....
BalasHapusgimana ya... kalau cara buat like box pada blog itu, kan udah dibuat tapi yang keluar cuma box dan namanya aja; nggak ada tombol likenya....
tolong dipostkan ya.. tutorialnya...
sama... satu lagi.,.,.berkunjung juga ya keblog ku
"delcivzatrickit123.blogspot.com"