Membuat Desain Numbering Keren di Blogger

Rumahit.ID - Membuat Desain Numbering Keren di Blogger , Numbering atau penomoran pada blog sudah disediakan oleh blogger ketika kita sedang membuat sebuah postingan. Numbering terletak pada toolbox sama seperti pada Microsoft Word. Selain dengan menggunakan toolbox Numbering juga bisa kita buat menggunakan kode HTML. Format dasar numbering pada html adalah sebagai berikut :

<ol>
<li>The content of the 1st. element</li>
<li>The content of the 2nd. element</li>
<li>The content of the 3rd. element</li>
<li>The content of the 4th. element</li>
    etc...
  </ol>

Secara default penomoran akan terbentuk otomatis ketika pindah baris. Sedangkan format penomoran biasanya menyesuaikan format teks pada postingan blogger. Untuk mempercantik tampilan numbering pada postingan blog , kita bisa menambahkan beberapa kode CSS ke dalam template blog. Berikut adalah beberapa CSS numbering yang pastinya sangat keren.

Untuk memasang kode tersebut silahkan buka template blogger anda kemudian pilih Edit HTML. Selanjutnya cari kode </b:skin> letakkan kode CSS nya diatas kode </b:skin>

Style 1

.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: #fff; /* text color of numbers */
background: #FA8022; /* background color of numbers */
border: .2em solid #fff; /* 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;
}

Style 2

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

Style 3

.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*/
} 

      Silahkan pilih satu dari tiga kode CSS yang anda suka. Anda juga dapat memodifikasi elemen pada CSS diatas seperti background color, number color, font size dan font family. Jika sudah selesai diterapkan pada template blog silahkan save lalu buat postingan baru untuk menguji efek kode CSS diatas.

Sekian tutorial ngeblog tentang Membuat Desain Numbering Keren di Blogger. Silahkan baca tutorial ngeblog yang lain pada artikel dibawah ini. Salam Informatika.