sempat bingung cara bikin popular post warna warni dan akhirnya setelah bertanya - tanya dapat juga jabawannya. penampakannya seperti diblog ini
Pertama sih saya kira membuat entri warna warni itu sulit, ternyata tidak sulit kok, dan tidak perlu menambahkan script apapun. Karena kita cukup pasang widget popular post yang sudah disediakan oleh blogger dan setting sedikit kemudian tambahkan kode HTML pada template kita.
untuk jelasnya sobat bisa lihat langkah-langkahnya berikut ini :
Cara Pasang Popular Post Warna Warni Di Blogger
Pastikan sobat sudah login ke blogger, jika sudah login maka langkah selanjutnya adalah:
- Klik menu Tata Letak / Layout
- Klik Tambahkan Gadget / Add Gadget
- Pilih HTML/Java Scrips
- Pastekan Kode Dibawah ini
<style scoped="scoped">
#ptb-repost {
font:normal normal 11px/normal Arial;
color:#333;
margin:0 auto;
padding:0;
min-height:100px;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn1tpTxVYPQdTs71cQlc1g9dQJtztyNCPF9l2Q_y5VSe0S0se2LJb3614wQyR188rDYrPyhIZjev56fvhsf2TXG7YYCFhIs8duzKdcO8A8-vPRBhH0hnzlBNMJ1IEdYCdhk172EKEcoSQ/s1600/loading.gif') no-repeat 50% 50%;
}
#ptb-repost li {
list-style:none;
margin:0;
padding:8px;
background-color:white;
border-bottom:1px solid #ddd;
}
#ptb-repost li a img:hover {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);opacity: 0.5;
}
#ptb-repost li a img {
float:left;
margin:0 10px 0 0;
padding:0;
border:none;
background:none;
outline:none;
}
#ptb-repost li a.title {
font:normal normal 12px/normal Oswald;
display:block;
text-decoration:none;
color:#fdfdfd;
}
#ptb-repost li a.title:hover {
text-decoration:none;
color:#ffffff;
}
#ptb-repost li:nth-child(1) {background-color:#E11E28;margin-right:1%}
#ptb-repost li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
#ptb-repost li:nth-child(3) {background-color:#FECB09;margin-right:3%}
#ptb-repost li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
#ptb-repost li:nth-child(5) {background-color:#149A48;margin-right:5%}
#ptb-repost li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
#ptb-repost ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
#ptb-repost ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
#ptb-repost li:nth-child(9) {background-color:#863E62;margin-right:9%}
#ptb-repost li:nth-child(10) {background-color:#815540;margin-right:10%}
</style>
<ul id="ptb-repost"></ul>
<script>
//<![CDATA[
var rp_homePage = "http://komunitaspensil.org",
rp_numPosts = 5,
rp_thumbWidth = 50,
rp_numChars = 80,
rp_sortByLabel = false,
rp_noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDg5F_IH8oGbeAIaL1aO-Kl_v9tgy2v0dfVhw062lb0B5ybAN7twJkXBaQIoMWoNuz7dd2U4W7DXJs2VbpF0LnUBvktMLX0enadci09eCFRLcoiS-Otc8H0cBQ9eYOm4L2AppOQCjrV70/s1600/minismallest-img.png",
rp_newTabLink = false,
rp_loadTimer = "onload";
//]]>
</script>
<script src='https://dl.dropboxusercontent.com/s/m6emd2j1kc5517k/ptb-repost.js' type='text/JavaScript'></script>
jangan lupa untuk di save. alamat web yang berwarna biru
http://komunitaspensil.org silahkan diganti dengan alamat blog sobat. sedangkan yang berwarna merah silahkan ganti dengan jumlah postingan yang ingin ditampilkan
Nah gampang kan buat bikin popular post warna warni
No comments:
Post a Comment