Cara Mengganti Numbered List Pada Blog Menjadi Lebih Menarik

SHARE:

Berikut ini cara mengganti numbered list pada blog menjadi lebih menarik sehingga tampilan blog kalian lebih rapi dan terlihat mempesona.


Setelah sebelumnya saya sudah memberikan tips cara mengganti bullet list pada blog, kali ini saya akan kembali memberikan tips cara mengganti numbered list pada blog agar lebih menarik. Caranya juga tidak terlalu sulit, karena tinggal menyalin kode yang saya berikan lalu letakkan pada template blog kalian.

Disini saya akan memberikan beberapa kode dengan style yang berbeda-beda, silahkan kalian pilih sesuai dengan selera masing-masing.

Cara Mengganti Numbered List Pada Blog

Langsung saja kalian ikuti langkah-langkah berikut ini :
  1. Buka akun blog kalian pilih pengaturan TEMA/TEMPLATE
  2. Kemudian pilih EDIT HTML
  3. Cari kode ]]></b:skin>
  4. Kemudian COPY kode di bawah ini dan letakkan tepat di atas kode ]]></b:skin>
KODE STYLE 1


Cara Mengganti Numbered List Pada Blog Lebih Menarik

[ol {counter-reset:li;list-style: none;font:15px 'Montserrat', Sans-Serif;padding:0;margin-bottom:2em;text-shadow: 0 1px 0 rgba(255,255,255,.5);}
ol ol {margin: 0 0 0 2em;}
.post ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#fafafa;color:#666;text-decoration:none;
transition:all .3s ease-out;}
.post ol li:hover{background:#f9f9f9;}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-lem;background:#48d;color:#FEFEFE;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.post ol li:after{position:absolute; content:'';border: .5em solid transparent;
left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
.post ol li:hover:after{left:-.5em;border-left-color:#e74c3c;}
.post ol li span{position:relative;display:block;padding:5px 8px;margin-bottom:10px;background:#fafafa;color:#666;text-decoration:none;transition:all .3s ease-out;}
.post ol li span:hover{background:#f9f9f9;}]

KODE STYLE 2
Cara Mengganti Numbered List Pada Blog Lebih Menarik

[ol {counter-reset:li;list-style: none;font:15px 'Roboto Condensed', 'Oswald';padding:0;margin-bottom:4em;text-shadow: 0 1px 0 rgba(255,255,255,.5);}
ol ol {margin: 0 0 0 2em;}
.post ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#F5F5F5;color:#666;text-decoration:none;transition:all .3s ease-out;}
.post ol li:hover{background:#EEEEEE;}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;
left:-2.5em;top:50%;margin-top:-1em;background:#FA8072;color:#FEFEFE;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.post ol li:after{position:absolute; content:'';border: .5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
.post ol li:hover:after{left:-.5em;border-left-color:#FA8072;}
.post ol li span{position:relative;display:block;padding:5px 8px;margin-bottom:10px;background:#fafafa;color:#666;text-decoration:none;transition:all .3s ease-out;}
.post ol li span:hover{background:#f9f9f9;}
]

KODE STYLE 3
Cara Mengganti Numbered List Pada Blog Lebih Menarik

[.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 13px 'trebuchet MS', 'lucida sans'; /* ukuran nomor */
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
*padding: .4em;
margin: .5em 0;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:hover:before{
transform: rotate(360deg);
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
color: #fff; /* warna teks nomor */
background: #FA8022; /* warna background nomor */
border: .2em solid #fff; /* warna garis */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}]

KODE STYLE 4
Cara Mengganti Numbered List Pada Blog Lebih Menarik

[.post ol{counter-reset:li;list-style: none;*list-style: decimal;margin-left:0;padding-left:0}.post ol li{
position:relative;margin:0 0 20px 15px !important;padding:4px 5px 4px 10px !important;list-style:none;*list-style: decimal;border-bottom:1px solid #e2e3e2; /* bottom border of each element */background:#f2f2f2; /* background color of each element */text-indent:14px;}.post ol li:before{
content:counter(li);counter-increment:li;position:absolute;top:-6px;left:-10px;font-family:'Oswald', serif;font-size:14px; /* ukuran nomor */width:20px;margin:0 0 10px 0;padding:4px !important;color:#A5A5A5; /* warna nomor */text-align:left;background:#e2e2e2; /* warna background nomor */text-indent:6px;text-shadow: 1px 3px 2px #fff;}.post ol li:after{content:"";position:absolute;top:-5px;left:17px;width: 0px;height: 0px;border-style: solid;border-width: 5px 0 0 5px;border-color: transparent transparent transparent #aeaeae; /* color of the triangle behind */}]


KODE STYLE 5
Cara Mengganti Numbered List Pada Blog Lebih Menarik


[.post ol{counter-reset: li;list-style: none;*list-style: decimal;padding: 0;margin-bottom: 4em;font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */text-shadow: 0 1px 0 rgba(255,255,255,.5);}.post ol li{position: relative;display: block;padding: .4em .4em .4em .8em;*padding: .4em;margin: .5em 0 .5em 4.5em;text-decoration: none;}.post ol li:before{content: counter(li);counter-increment: li;position: absolute;
left: -30px;top: 50%;margin-top: -1em;background: #bada55; /* background color of the numbers */height: 2em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;}.post ol li:after{position: absolute;content: '';left: -5px;margin-top: -.7em;
top: 50%;width: 0;
height: 0;
border-top: 8px solid transparent;border-bottom: 8px solid transparent;
border-left:8px solid #bada55; /* background color of the right arrow*/}]

Jika sudah di letakkan kode pada template kalian, jangan lupa klik SIMPAN TEMA/SAVE TEMPLATE

Itulah tips dari saya mengenai cara mengganti numbered list pada blog menjadi lebih menarik. Silahkan kalian coba pada blog masing-masing. Jika ada pertanyaan silahkan komentar pada artikel ini atau bisa via halaman kontak.

COMMENTS

Nama

Adsense,4,Blog,10,Design Blog,5,Seo,4,
ltr
item
Belajar Ngeblog: Cara Mengganti Numbered List Pada Blog Menjadi Lebih Menarik
Cara Mengganti Numbered List Pada Blog Menjadi Lebih Menarik
Berikut ini cara mengganti numbered list pada blog menjadi lebih menarik sehingga tampilan blog kalian lebih rapi dan terlihat mempesona.
https://1.bp.blogspot.com/-p9h_thQDH7k/WjUhMyR9IAI/AAAAAAAACZ4/RUgIm-UQWf8Bmlk_r07nh6iG7gA8py-PwCLcBGAs/s400/Cara%2BMengganti%2BNumbered%2BList%2BPada%2BBlog%2BLebih%2BMenarik.png
https://1.bp.blogspot.com/-p9h_thQDH7k/WjUhMyR9IAI/AAAAAAAACZ4/RUgIm-UQWf8Bmlk_r07nh6iG7gA8py-PwCLcBGAs/s72-c/Cara%2BMengganti%2BNumbered%2BList%2BPada%2BBlog%2BLebih%2BMenarik.png
Belajar Ngeblog
https://alimbanjar.blogspot.com/2017/12/cara-mengganti-numbered-list.html
https://alimbanjar.blogspot.com/
https://alimbanjar.blogspot.com/
https://alimbanjar.blogspot.com/2017/12/cara-mengganti-numbered-list.html
true
4087688367466372745
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy