Cara Membuat Custom List Number pada Blogger yang Keren

Hari ini karena terlalu senggang alias nganggur banget maka dari itu saya sempatkan untuk belajar mengasah kemampuan pada pemahaman HTML

Daftar isi

1 Contoh list number pada blogger secara umum
2 Contoh list number Custom pada blogger
3 Custum List Number Model 1
4 Custom List Number Model 2
5 Custom List Number Model 3
6 Custom List Number Model 4
7 Custom List Number Model 5

Sudah lama tertarik untuk mengcustom list number pada postingan blogger yang monoton itu-itu aja.

Karena tertunda terus maka sampai saat ini baru terlaksana bisa mencoba dan saya praktekkan di blog ini. Untuk hasilnya silahkan di lihat halaman-halaman saya yang mengandung list number.

Menurut saya postingan yang hanya berupa tulisan saja tanpa ada media lain seperti list number atau bullet ataupun berupa gambar atau media lain tulisan akan terasa melelahkan jika dibaca.

Apalagi dalam satu paragraf banyak baris yang membuat mata cepat lelah dan membosankan.

Saya banyak belajar dari video mas vatih yang ada di youtube. Terima kasih mas vatih saya mulai belajar membangun blog dari anda.

Oke Lanjut...

Saya beri contohnya begini contoh number list secara umum tanpa di custum

Contoh list number pada blogger secara umum

Ini contoh list pertama
Ini contoh list kedua
Ini contoh list ketika

Silahkan bandingkan dengan list number yang di custome dibawah ini.

Contoh list number Custom pada blogger

Ini contoh list custom pertama
Ini contoh list custom kedua
Ini contoh list custom ketika

Dari kedua list number diatasmana yang lebih nyaman di lihat dan dibaca. Tentu yang kedua yang enak di lihat juga tampilan postingan kita juga tidak terlalu monoton saja.

Untuk membuat custum list seperti diatas ikuti tutorial dibawah ini. Kami sajikan beberapa contoh list number yang bisa anda gunakan.

Penting untuk diperhatikan bahwa sebelum melakukan praktek penerapan kode list number dibawah ini sebaiknya anda backup dulu template anda. Untuk berjaga-jaga apabila ada kegagalan penerapan kode pada template.

Custum List Number Model 1

Untuk membuat order list seperti diatas gunakan kode dibawah ini letakkan diatas kode ]]></b:skin> lalu Simpan

.list-numbered {
  list-style: none;
  margin-left: 1em;
  counter-reset: line;
}

.list-numbered > li {
  position: relative;
  margin-bottom: 1.5em;
}

.list-numbered > li:before {
	position: absolute;
	left: -2.25em;
	display: inline-block;
  width: 22px;
	height: 22px;
	margin-right: 0.5em;
  background-color: #B53C2C;
	border-radius: 50%;
	color: #fff;
	text-align:center;
  line-height: 1.25em;
	counter-increment: line;
	content: counter(line);
}

Untuk penggunaannya dalam artikel silahkan gunakan class pemanggil seperti contoh dibawah ini.

<ol class="list-numbered">
  <li>Line Item #1</li>
  <li>Line Item #2</li>
  <li>Line Item #3</li>
  <li>Line Item #4</li>
  <li>Line Item #5</li>
</ol>

Custom List Number Model 2

Caranya masih sama kode dibawah ini diletakkan di atas kode ]]></b:skin> lalu Simpan

ol.steps2 {
  max-width: 350px;
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 40px;
}
ol.steps2 li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
}
ol.steps2 li::before {
  content: counter(my-awesome-counter);
  color: #fcd000;
  font-size: 1.5rem;
  font-weight: bold;
  position: absolute;
  --size: 32px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  transform: rotate(-10deg);
  background: black;
  border-radius: 50%;
  text-align: center;
  box-shadow: 1px 1px 0 #999;
}

Untuk kode pemanggilanya masih sama menggunakan class dari list number yang kita buat sebelumnya

<ol class="steps2">
  <li>Line Item #1</li>
  <li>Line Item #2</li>
  <li>Line Item #3</li>
  <li>Line Item #4</li>
  <li>Line Item #5</li>
</ol>

Custom List Number Model 3

Untuk custom list number yang ketiga ini merubah bentuk aslinya, beda dengan model yang 1 dan 2 diatas, untuk menggunakannya harus ada id pemanggilnya.

Tampilan list number yang model 3

Jika tertarik dengan tampilan list nomor 3 silahkan tempat kode ini diatas kode ]]></b:skin> lalu Simpan

.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 13px ‘trebuchet MS’, ‘lucida sans’; /* font size of each element */
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: #111; /* text color of numbers */
background: #8ff; /* background color of numbers */
border: .2em solid #111; /* border color */
-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;
}

Untuk kode pemanggilanya tidak ada, karena secara otomatis ketika membuat nomor list akan tampil sesuai pada contoh gambar

Custom List Number Model 4

Masih menggunakan custum number list, pada model 4 ini yang dirubah adalah list number yang asli bawaan blogger.

Untuk tampilan list number yang ke 4 dapat di lihat seperti berikut

Dan penerapannya pada postingan blog anda harus memasang kode dibawah ini serta letakkan di diatas kode ]]></b:skin> lalu Simpan

.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:#f05f05; /* 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; /* size of the numbers */
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#111; /* color of the numbers */
text-align:left;
background:#f99; /* background color of the numbers */
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 #f99; /* color of the triangle behind */
}

Custom List Number Model 5

Yang terkahir modelnya list number dapat anda lihat pada contoh gambar dibawah ini.

Dan kode yang anda pasang diatas kode ]]></b:skin> adalah sebagai berikut. Jika sudah silahkan Simpan template anda.

.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
padding: 0;
margin-bottom: 4em;
font: 16px ‘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: -37px;
top: 50%;
margin-top: -1em;
background: #f05; /* 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 #f05; /* background color of the right arrow*/
}

Kadang dalam penerapan dalam template blog akan menghasilkan tampilan yang tidak sesuai dengan contoh. Karena memang setiap template memiliki perbedaan dalam pengkodingannya.

Silahkan sesuaikan dengan mengubah atribut yang ada di kode list number apabila ada tampilan yang kurang sesuai.

Akhir kata semoga tutorial ini bermanfaat.

Massiswo.Com