Cara Modifikasi Numbered List Agar terlihat Keren


Cara Modifikasi Numbered List Agar terlihat Keren

Cara Modifikasi Numbered List

Dengan Css berikut kita akan membuat tampilan List pada Nomor yang biasanya kita pakai pada Artikel blog tampil beda dengan yang lainnya dan tentunya menambah penampilan blog semakin keren.
Bagi sobat Blogger yang ingin mencoba tampilan List Numbered pada blog masing-masing, silahkan ikuti langkah-langkahnya berikut ini, tapi sebelumnya, silahkan lihat dulu Contoh hasil penerapannya'


Contoh :
16 Gaya Rambut yang mencerminkan Kepribadian
  1. Aksesoris unik di rambut menjadi tontonan
    "Dia berjiwa seni dan lucu. Dia tampaknya sangat kreatif!," kata John, 23
  2. Gaya rambut pixie runcing terlihat Anda kehilangan setengah pasangan
    "Mungkin jika Anda berkencan dengan Ryan Cabrera Anda akan cocok, tapi kalau dengan yang lain.. tidak"--Kyle (26).
  3. Jika menggunakan gaya seleb bisa mengganggu wanita
    "Hey, snooki"--Pablo (28).
  4. Rambut updo (sanggul kecil) bisa terlihat seksi "Profesional dan bersemangat"--Joshua (21)
  5. Rambut bob yang rapi menunjukkan berkuasa "Terlihat modis. Tampak akrab... sedang latihan jadi pemimpin redaksi?--Bobby (29).
  6. Jika Anda ingin terlihat girly, rambut dikepang saja "Dia tampak sangat polos dan manis"--Alex (25).
  7. Rambut super pendek menunjukkan malas merawatnya "Saya senang dengan ide ia hanya turun dari ranjang dan pergi begitu saja. Artinya, dia bisa menghabiskan banyak waktu denganku di pagi hari"--Bobby
  8. Rambut kering tergerai membuat pria berpikir tentang mandi dan menginap "Ini menunjukkan 'saya tidak peduli' kalau di sini terlalu panas"-- Kyle (26).
  9. Rambut top knot (simpul di atas) yang berantakan terlihat belum rampung "Bukankah ini yang perempuan lakukan ketika mereka mencuci rambut mereka"--Teddy (24).
  10. Membiarkan rambut tebal secara alami terlihat "hot" "Aku menyukai gadis yang alami"--Michael (23)
  11. Rambut sebahu menunjukkan Anda tempramen "Ini bekerja untukku. Ada sesuatu yang sangat tepat tentang memiliki rambut sebahu"--Lorenzo (39). Rambut superpanjang bisa menakutkan "Terlalu panjang. Rambutnya bisa di mana-mana. Potonglah beberapa inci dan akan terlihat bagus"--Tommy (27).
  12. Rambut panjang bergelombang terlihat seksi dan ramah "Itu dia, calon istri saya. Rambutnya sangat seksi. Saya ingin membelainya dengan jari saya"--Justin (30).
  13. Rambut bobby-pinned (jepitan kecil) tidak selalu manis seperti yang kita pikirkan "Modis itu keren, tapi ini juga terlihat tua"--Scott (24).
  14. Aksesoris kecil di antara rambut "Dia berjiwa seni dan kreatif. Dia memperhatikan tren bahkan jika dia tidak mau mengakuinya"--Michael (30).
  15. Aksesoris rambut dari rajutan menunjukkan sisi kenyamanan Anda dan ini hal yang baik "Saya senang melihatnya mengenakan ketika ski"--Rick (34)
  16. Rambut Mullet (Rambut pendek di bagian depan kepala dan membiarkan rambut panjang menjuntai dibelakang) tidak untuk setiap hari

Cara Pasang di Blog
SIlahkan menuju Dasbord + Template + Edit HTM + Lanjutkan

Silahkan Cari kode ]]></b:skin>
Letakkan Code berikut diatas ]]></b:skin>
Berikut Kodenya :
/* list number */
ol {
counter-reset:li;
margin-left:0; /* margin standar kiri */
padding-left:0; /* padding standar kiri */
}
ol > li {
position:relative;
margin:0 0 10px 5em; /* margin kiri untuk memberikan ruang bagi nomor */
padding:6px 10px; /* jarak konten dengan no*/
list-style:none;
border-top:2px solid #666; /* Warna Border*/
background:#f6f6f6;
}
ol > li:before {
content:counter(li);
counter-increment:li;
/* Posisi dan gaya nomor */
position:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:2em;
margin-right:8px;
padding:4px;
border-top:2px solid #666;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}
Terakhir silahkan Simpan

Selamat mencoba dan Semoga Bermanfaat
Cara Modifikasi Numbered List Agar terlihat Keren 10out of 10 ratings.
Powered by Blogger.