Cara Membuat Popular Post Dengan Gambar Berputar - Hallo friend FULL VERSION FREE DOWNLOAD GAMES , SOFTWARE , TEMPLATE , EBOK ETC, Sharing software on the game and this time entitled Cara Membuat Popular Post Dengan Gambar Berputar, I have provided a complete game with the download link and crack. hopefully the game and software content of posts I wrote this for you can understand. Okay, here's the game and the software.
♦ 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
◘ 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.
♦ Dan ganti semua kode tersebut dengan kode kode dibawah ini :
Article : Cara Membuat Popular Post Dengan Gambar Berputar
article Title : Cara Membuat Popular Post Dengan Gambar Berputar
Cara Membuat Popular Post Dengan Gambar Berputar
Cara Membuat Popular Post Dengan Gambar Berputar ~ Pada kesempatan kali ini,saya akan berbagi tutorial bagaimana Cara Membuat Popular Post Dengan Gambar Berputar.Dengan membuat popluar post,maka pengunjung pada blog kita mengetahui artikel apa yang sedang populer pada blog kita.Dengan adanya animasi gambar berputar pada widget popular post kita,maka blog sobat akan terlihat leibh hidup dan keren.
Contoh Popular Post |
Jika sobat tertarik untuk membut Popular Post Dengan Gambar Berputar,sobat bisa mengikuti tahapan pembuatannya.
◘ Tahap Pertama :
♦ Masuk akun Blogger - design/Rancangan - Add Gadget dan pilih 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.
.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'/>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: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>
<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>
♦ Save template sobat.
Demikian Tutorial bagaimana Cara Membuat Popular Post Dengan Gambar Berputar.Semoga bermanfaat bagi kita semua.
Salam Blogger
Note:Kode yang diberi warna hijau popularposts1 tiap template berbeda, terkadang pengkodeannya adalah popularposts2, jika hal itu terjadi, kalian ganti saja popularposts1 dengan popularposrts2.
Bagaimana sobat?Mudahkan...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
Thus articles Cara Membuat Popular Post Dengan Gambar Berputar
A few games and software Cara Membuat Popular Post Dengan Gambar Berputar, hopefully can provide benefits to all of you. Okay, so the post game and software this time.
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"