Custom List Numbering pada Postingan Blog
Custom List Numbering pada Postingan Blog - List Number adalah sebuah fitur yang bisa kita gunakan untuk membuat list angka atau tulisan yang digunakan untuk membuat sebuah tulisan menjadi lebih terstruktur dan rapi. List ini biasa digunakan oleh seorang blogger yang membagikan tutorial atau memberi tips. Pada saat ini banyak sekali hal yang bisa kita lakukan untuk memperindah list number yang disediakan oleh google, berikut ini contoh list number yang disediakan oleh blog.
Contoh list numbering bawaan blog :
- Tampilan ini merupakan contoh dari list numbering.
- This view is an example of a numbering list.
- Diese Ansicht ist ein Beispiel für eine Nummerierungsliste.
Nah diatas merupakan contoh bawaan blogger, jika sobat sudah bosan atau ingin memakai variasi yang lain sobat bisa mengikuti tutorial dibawah ini. Terdapat 4 variasi yang bisa sobat gunakan untuk memperindah tampilan blog sobat. Berikut jenis custom list numbering pada postingan blog yang bisa sobat gunakan.
Tipe 1
- This is an example of this article.
- This article contains a tutorial on blogger tips.
- I hope you can understand the contents of this tutorial.
- keep up the spirit and don't forget to take a break!
Untuk membuat list number seperti diatas yang harus sobat lakukan ialah :
- Buka Blogger >> Tema >> Edit HTML.
- Silahkan cari kode ]]></b:skin> untuk mempermudah silahkan cari dengan cara CTRL + F.
- Silahkan paste kode CSS dibawah ini tepat diatasnya.
ol.style1 {
counter-reset:numbers;
list-style:none;
padding:0;
}
ol.style1 > li {
counter-increment:numbers;
margin-bottom:25px;
position:relative;
margin-left:55px;
}
ol.style1 > li img {
margin:15px 0;
width:100%;
display:block;
}
ol.style1 > li #box-download img {
margin:0;}
ol.style1 > li::before {
content:counter(numbers);
line-height:23px;
font-family:'Google Sans';
font-size:14px;
font-weight:bold;
left:-45px;
width:32px;
height:32px;
text-align:center;
position:absolute;
color:#222;
border:3px solid rgba(57, 60, 155, 0.3);
border-radius:4px;top:-2px;
}
ol.standard li, ol.style2 li, ol.style0 li, ol.style1 li ul li {
margin-bottom:15px;
}
ol.style1 li ul {
margin-top:15px;
}
.dark-mode ol.style1 > li::before {
color:rgb(80, 103, 197);
border-color:rgba(57, 60, 155, 0.3);
}
Untuk penerapannya silahkan gunakan kode dibawah ini pada mode HTML
<ol class="style1">
<li>Lorem ipsum dolor sit amet.</li>
<li>Tempore nostrum laborum sequi obcaecati.</li>
<li>Illo iusto dolores magnam ratione!</li>
<li>Amet odio rerum alias impedit!</li>
</ol>
Tipe 2
- questo è un esempio di questo articolo.
- Questo articolo contiene un tutorial sui suggerimenti dei blogger.
- Spero che tu possa capire il contenuto di questo tutorial.
Untuk membuat list number seperti diatas yang harus sobat lakukan ialah :
- Buka Blogger >> Tema >> Edit HTML.
- Silahkan cari kode ]]></b:skin> untuk mempermudah silahkan cari dengan cara CTRL + F.
- Silahkan paste kode CSS dibawah ini tepat diatasnya.
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 penerapannya silahkan gunakan kode dibawah ini pada mode HTML
<ol class="steps2">
<li>Details & Summary behave a lot like the accordion design pattern, only just the basics. Could you layer on functionality, like a group of details elements in which only one can be open at once?</li>
<li>Can you progressively enhance Details & Summary to add custom styling and animation?</li>
<li>These elements don't work in Edge. You could have a look at the polyfills out there and perhaps build your own if you'd like to have a go at it.</li>
</ol>
Tipe 3
- Dies ist ein Beispiel für diesen Artikel.
- Dieser Artikel enthält ein Tutorial zu Blogger-Tipps.
- Ich hoffe, Sie können den Inhalt dieses Tutorials verstehen.
- Halten Sie den Geist aufrecht und vergessen Sie nicht, eine Pause einzulegen!
Untuk membuat list number seperti diatas yang harus sobat lakukan ialah :
- Buka Blogger >> Tema >> Edit HTML.
- Silahkan cari kode ]]></b:skin> untuk mempermudah silahkan cari dengan cara CTRL + F.
- Silahkan paste kode CSS dibawah ini tepat diatasnya.
ol.steps3 {
list-style: none;
counter-reset: my-awesome-counter;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
ol.steps3 li {
counter-increment: my-awesome-counter;
display: flex;
width: 50%;
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
ol.steps3 li::before {
content: "0" counter(my-awesome-counter);
font-weight: bold;
font-size: 3rem;
margin-right: 0.5rem;
font-family: 'Abril Fatface', serif;
line-height: 1;
}
Untuk penerapannya silahkan gunakan kode dibawah ini pada mode HTML
<ol class="steps3">
<li>Lorem ipsum dolor sit amet.</li>
<li>Tempore nostrum laborum sequi obcaecati.</li>
<li>Illo iusto dolores magnam ratione!</li>
<li>Amet odio rerum alias impedit!</li>
</ol>
Tipe 4
- este es un ejemplo de este artÃculo.
- Este artÃculo contiene un tutorial sobre consejos de blogger.
- Espero que pueda comprender el contenido de este tutorial.
Untuk membuat list number seperti diatas yang harus sobat lakukan ialah :
- Buka Blogger >> Tema >> Edit HTML.
- Silahkan cari kode ]]></b:skin> untuk mempermudah silahkan cari dengan cara CTRL + F.
- Silahkan paste kode CSS dibawah ini tepat diatasnya.
ol.steps {
clear: both;
list-style: none;
padding-left: 2%;
}
ol.steps li {
margin: 2em 0;
padding-top: 1em;
display: block;
position: relative;
counter-increment: inst;
}
ol.steps li::before {
content: counter(inst);
background: rgba(255, 150, 0, 0.35);
color: #fff;
font-size: 1em;
font-weight: 700;
font-style: italic;
text-shadow: 1px 1px rgba(255, 150, 0, 0.5);
border-radius: 0 0.675em 0.675em 0;
font-size: 1.5em;
text-align: center;
padding-top: 0;
padding-left: 2.25%;
left: -5%;
top: -0.65em;
height: 1.35em;
width: 1.35em;
position: absolute;
transition: all 0.2s ease-in-out;
z-index: -1;
}
@media (min-width: 33em) {
ol.steps li:before {
border-radius: 50%;
font-size: 1.5em;
height: 1.35em;
margin-left: 2.5%;
padding-left: 0;
padding-top: 0;
top: -0.15em;
width: 1.35em;
z-index: -1;
}
}
Untuk penerapannya silahkan gunakan kode dibawah ini pada mode HTML
<ol class="steps">
<li>Yes! Now we can customized Ordered list style in blogger.</li>
<li>Yes! Now we can customized Ordered list style in blogger.</li>
<li>Yes! Now we can customized Ordered list style in blogger.</li>
</ol>
Mudah bukan untuk membuat list numbering pada postingan blog agar menjadi lebih keren, silahkan ikuti dengan seksama setiap langkah yang sudah saya bagikan. Jika dirasa ada yang perlu ditanyakan silahkan bertanya di kolom komentar. Jangan lupa untuk share jika dirasa tutorial ini bermanfaat, terima kasih dan sampai jumpa ditutorial selanjutnya.
Sumber : Klik Disini
