Posted by : Stiker Jalingkut

ASSALAMU'ALAIKUM APA KABAR SOBAT
pada kesempatan kali ini kami mau berbagi sedikit Tutorial Cara Merubah Populer Post Menjadi Nomer Urutan emangsi sudah banyak para Mater2 Css yang merubah Populer Post dengan bermacam aktribut dan bermacam model kata para selebritis hehehehhe. Nah tapi kali ini kami mau ikut2tan kaya para Master Css mencoba ingin merubah Populer Post tapi kali ini ingin kami rubah menjadi Nomer berurutan Silakan lihat Demonya mas



ASSALAMU'ALAIKUM APA KABAR SOBAT

<style type='text/css'>/*--- Orginal Popular Posts Editing www.bloggertutoria.com --- */
.popular-posts ul {background: rgb(30, 50, 230);
background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);

padding-left: 0px;
counter-reset: popcount;webkit-animation: pulsate 1.2s linear infinite;animation: pulsate 1.2s linear infinite;}@-webkit-keyframes pulsate{0%{color: #00ff00; text-shadow: 0 -1px 0 #000; }50%  { color: #0000ff; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #fff; }100% { color: #0000ff; text-shadow: 0 -1px 0 #000; }}@keyframes pulsate{0%{color: #00ff00;text-shadow: 0 -1px 0 #000; }50%  { color: #00ff00; text-shadow: 0 -1px 0 #444, 0 0 5px #ffd, 0 0 8px #0000ff; }100% { color: #00ff00;text-shadow:0 -1px 0 #000; }; color:#00ff00;
}
.popular-posts ul li:before {
list-style-type: none;
/*--- Posisi Nomer Urutan Editing www.bloggertutoria.com --- */
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: rgba(0,0,0,.15);
color: #00ff00;
position: relative;
font-weight: bold;
font-family: georgia;
float: right;
border: 2px solid #ff0000;
box-shadow: 1px 2px 9px #00ff00; }
.popular-posts ul li {background:dodgerblue;
    background:-webkit-linear-gradient(deepskyblue,dodgerblue);
    background:   -moz-linear-gradient(deepskyblue,dodgerblue);
    background:    -ms-linear-gradient(deepskyblue,dodgerblue);
    background:     -o-linear-gradient(deepskyblue,dodgerblue);
    background:        linear-gradient(deepskyblue,dodgerblue);
 border-bottom: 1px dashed #0000ff;
}
.popular-posts ul li:hover {background: #09c;
    background: rgba(0,0,0,.15);
    background: -webkit-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:    -moz-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:     -ms-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:      -o-linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
    background:         linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.1));
border-bottom: 1px dashed rgb(105, 105, 105);
}
.popular-posts ul li a:hover {
text-decoration:none;
}
.plugins ul {
counter-reset: plugincount;
padding: 0px;
}
.plugins ul li {
border-bottom: 1px dashed #ddd;
line-height: 40px;
}
.plugins ul li:before {
content: counter(plugincount);
counter-increment: plugincount;
margin-right: 15px;
padding: 0.3em 0.6em;
background: #292D30;
border-radius: 25px;
border: 2px solid #fff000;
box-shadow: 1px 2px 9px #666;
color: #000000;
font: bold 16px georgia;
}
.plugins ul li:hover {
border-bottom: 1px dashed rgb(105, 105, 105);
}
.plugins ul li a:hover {
text-decoration:none;color:#00ff00;
}
.plugins ul li a, .popular-posts ul li a {
text-decoration:none; color:#00ff00;
}
</style> 
  

Sekian dulu dari kami tentang Artikel Cara Merubah Populer Post Menjadi Nomer Urutan semoga berguna buat sobat yang mau pasang

{ 49 comentários... read them below or Comment }

  1. tambah canggih aja mas, thanks tutornya, bnyak yg baru..
    met malam n weekend

    BalasHapus
  2. Bog'nya keren banger sob.., kayak robot-robot gitu..
    hahaha..., mantap dah.. :D

    BalasHapus
  3. wah keren juga nih sob tampilannya.. okelah tak save dulu css nya. makasih sob...?

    BalasHapus
  4. Wew ... Templatenya ganti-ganti mulu nih mas ... :D jadi pangling ...

    BalasHapus
    Balasan
    1. gak ganti ko sob mas cumi di tambain dan di buangini hehe

      Hapus
  5. hebat mas, mantep..mkin mantep.

    BalasHapus
  6. kalo di pasang di p ku...cocok ndak ya mas... :)
    kopi nya mana nih... Hehe :)

    BalasHapus
    Balasan
    1. dimana aja bole ms bud di tempat pemandian umum juga bole hheheheh

      Hapus
    2. mas budi biasanya dikali hikhik...

      Hapus
  7. makin manteb ajah nih tutorial2 nya , ini blog nya jga template nya makin yahuut

    BalasHapus
    Balasan
    1. sama aja mas Yang namanya Template setau aq hehehe trmksih mas

      Hapus
    2. siapa dulu dong...
      mas adminnya :)

      Hapus
  8. widgetnya lebih keren dari pada punyaku

    BalasHapus
  9. ok mas broe..

    mkin keren aja tmpilan dan aksesoris blog nya

    BalasHapus
    Balasan
    1. iya mas mau jualan aksesoris heheheh

      Hapus
    2. apalagi mas adminnya
      dulunya kan bekas vokalisnya zamrut...hehe :)

      Hapus
  10. keren gan blognya..makasih tutorialnya ..salam sukses

    BalasHapus
  11. mampir disini mas, mantep turorialnya, saya bungkus mas

    BalasHapus
    Balasan
    1. bungkusnya yg pke katet dua..ya mas hehe :D

      Hapus
    2. kecepatan ngetik...gara2 kebanyakan ngupi...
      jd salah...
      KARET dua mas...maksudnya...hehe :)

      Hapus
  12. wow.. keren kreatif amat, :) .

    BalasHapus
    Balasan
    1. trmksih dah berkunjung ya lumayan jail tanganku heheheh

      Hapus
  13. Lebih keren & teratur ya mas populer post nya klo tampilannya seperti ini..
    Terima kasih mas tutorialnya..

    BalasHapus
  14. bang kok edit templete yang sekrng agak susah ya? banyak yang gak ada,,gmn ya,

    BalasHapus
    Balasan
    1. tapi kayanya enakan yang sekarang D: sob Edit Html nya dari pada yang dulu

      Hapus
    2. aku cari kata height untuk ngubah kolom komentar yag kata abang itu gak ada loh, bingung sama yang sekrng

      Hapus
  15. mantap mas tutorial nya... saya ijin bookmark dulu,,
    btw, kunjungan siang mas di awal pekan...

    BalasHapus
  16. Jadi kelihatan nomor urutan posting yang paling banyak dikunjungi.. bagus nie sob biar pengunjung pada tertarik milih artikel itu,,

    BalasHapus
  17. keren mas bos!kapan2 bsa d coba nh

    BalasHapus
  18. wah jadi lebih keren ya mas

    BalasHapus
  19. hehe,aku ngerti yang dimaksud abang, mksh ya bang masukan nya recent comen nya jd keliatan agak rapih dann gak kelebihan, sebener nya dah lama aku perhatiin tapi blm dpt jawaban, mksh sekali lgi,

    BalasHapus
  20. wah perlu di save nih mas pembalap... jangan lupa mampir ya mas.. maklum baru selesai ujian sekolah

    BalasHapus

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email "Atu FACEBOOK Selladrt"
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Bebas menyebarluaskan artikel tanpa persetujuan dari saya.
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "

- Copyright © TUTORIAL™ - Blogger Templates - Powered by Blogger - Designed by Sella -