Silakan masuk pada akun blogger Anda
Kemudian Tambahkan Gadget dan pilih Entri Populer, lalu atur agar popular post hanya menampilkan judul saja.
langkah di atas dilakukan untuk anda yang belum memasang widget ini di blog.
Kemudian tambahkan CSS dibawah ini pada template Anda, simpan diatas kode
]]></b:skin> atau </style> dan Simpan 1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-21.PopularPosts ul{list-style-type:none; padding:5px}
.PopularPosts {color:#fff; line-height:1.6; font-size:100%; border-radius:5px 5px 0 0; padding}
.PopularPosts {line-height:1.6; font-size:100%; border-radius:0; color:#fff}
.PopularPosts a{color:#fff}
.PopularPosts a:hover{color:#fff}
.PopularPosts ul{list-style:none; margin:0; margin-left:-18px; padding:0; counter-reset:popcount}
.PopularPosts ul li:before{list-style-type:none; margin-right:15px; margin-left:5px; padding:0.3em 0.6em; counter-increment:popcount; content:counter(popcount); font-size:16px; color:#fff; position:relative; float:left; border:1px solid #fff; border-radius:100%}
.PopularPosts li{text-transform:uppercase; background:none; margin:0; padding:10px 18px; display:block; clear:both; overflow:hidden; list-style:none; font:13.5px/140%; border-bottom:none}
.PopularPosts li:hover{background:#0FB9BB}
.PopularPosts li a{text-decoration:none}
.PopularPosts ul li{padding:3px 20px; border:none}
.PopularPosts ul li:nth-child(1){background-color:#F48067; margin-right:0}
.PopularPosts ul li:nth-child(2){background-color:#2ba6e1; margin-right:0}
.PopularPosts ul li:nth-child(3){background-color:#718397; margin-right:0}
.PopularPosts ul li:nth-child(4){background-color:#11b7b5; margin-right:0}
.PopularPosts ul li:nth-child(5){background-color:#d9ba71; margin-right:0}
.PopularPosts ul li:nth-child(6){background-color:#F48067; margin-right:0}
.PopularPosts ul li:nth-child(7){background-color:#2ba6e1; margin-right:0}
.PopularPosts ul li:nth-child(8){background-color:#718397; margin-right:0}
.PopularPosts ul li:nth-child(9){background-color:#11b7b5; margin-right:0}
.PopularPosts ul li:nth-child(10){background-color:#d9ba71; margin-right:0}
ingat, judul widget tidak akan tampil seperti di gambar. untuk seperti itu silahkan edit sendiri ya.
Semoga berguna dan bermanfaat...
3 komentar
Bookmark dlu mas..
BalasHapusok
HapusBloked link! Link tidak di ijinkan baca disini.
BalasHapusTautan Anda terpaksa Saya blokir untuk alasan kenyamanan pembaca lain. Web ini digunakan untuk kalangan umum, mungkin akan lebih baik jika Anda tidak menyertakan tautan-tautan di area komentar untuk mencegah prasangka buruk dari pembaca yang lain terhadap Anda.
Jika Anda merasa bahwa ini adalah kesalahan otomatisasi sistem, cukup tuliskan kembali komentar lama Anda dengan format yang sama seperti sebelumnya, namun tanpa adanya tautan aktif di dalamnya, misalnya berupa teks URL. Terima kasih.
Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>