CSS widget popular post Blogger

CSS widget popular post Blogger

CSS Widget

Pada kali ini Saya mencoba modifikasi popular post menjadi keren dan warna - warni dengan memanfaatkan CSS Pseudo Element dan nth-child sehingga tampilannya menjadi lebih menarik.

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...

Artikel Terkait

  • CSS untuk komentar blogger facebook
    Membuat tampilan komentar blogger seperti facebook dengan css yang di buat CSS ini dipersembahkan oleh dte, memasangnya pun tidak rumit cukup mudah. css ini telah di edit oleh kang ismet dengan menghilangkan border/garis pinggir serta padding left dan right atau jara lebar dalam kanan dan kiri. Demo Cara Membuat Komentar Blogger S…
  • Menghitung ke-spesifik-an Selector
    CSS memiliki aturan tertentu tentang ke-spesifik-an selector, yaitu ketika sebuah property dari CSS, saling menimpa satu sama lain, selector yang paling spesifik lah yang akan menang. Aturan ke-spesifik-an CSS dihitung menggunakan formula 4 digit, contohnya: 0,1,0,0. Perhitungannya sama seperti hitung-hitungan kita sehari-hari, dimana 0,1,0,0…
  • Thread komen blogger dengan commentDay
    gaya commentDay adalah gaya untuk standar Blogger Thread comment. Dengan gaya ini komentar default thread comment blogger lebih menjadi terlihat menarik. Gaya ini dirancang sesuai dengan gaya yang telah lama dicari yaitu: sederhana, jelas dan modern. Demo untuk memasang gaya thread komen ini, ikuti langkah berikut: Tambahkan kode be…
  • Membuat efek gelembung dengan pure CSS
    Efek speech bubbles adalah efek yang populer saat ini, tetapi banyak tutorial mengandalkan presentasi HTML atau JavaScript dalam pembuatannya. Tutorial ini berisi panduan membuatnya yang dibuat menggunakan dengan CSS dan ditingkatkan dengan CSS3. Tidak ada gambar, tidak ada JavaScript dan dapat diterapkan untuk HTML semantik yang ada. Efek i…
  • Edit CSS tanpa masuk ke dalam Edit HTML
    Setiap blogger memang selalu berhubungan dengan CSS terutama dalam gaya tampilan untuk template, terkadang dalam meng-edit CSS kita kerap melakukan hal yang terkadang membuang waktu dan kurang berguna yaitu membuka editor html dan menyimpan CSS secara berulang - ulang. hal ini kita lakukan bukan karena tanpa alasan, selain untuk menciptakan ta…
  • Penggunaan Selector CSS
    Anggap saja  kita telah mengenal 5 jenis selector dalam CSS, yaitu Universal Selector, Tag Selector, Class Selector , ID Selector, dan Attribute Selector. Selector tersebut tidak hanya berdiri sendiri, namun dapat digabung menjadi sebuah selector yang lebih spesifik. CSS memungkinkan kita untuk menggabungkan beberapa jenis selector menja…

3 komentar

  1. Anonim14 Desember 2014 pukul 05.30

    Bookmark dlu mas..

    BalasHapus
  2. usmelody15 Juni 2021 pukul 16.11

    Bloked link! Link tidak di ijinkan baca disini.

    Tautan 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.

    BalasHapus

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

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>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...