Kumpulan Tag Ol Custom di blogger

Hello sobat IcloudZer kali ini admin bakalan memberikan informasi mengenai kumpulan Tag OL Custom di blogger

Tag OL

Apa itu tag ol, atau ordered list, adalah salah satu elemen HTML yang digunakan untuk menyusun informasi dalam bentuk daftar terurut. Di dalam tag ol, setiap item yang di daftarkan akan secara otomatis diberi nomor urut, mulai dari angka 1, 2, 3, dan seterusnya. Ini membuat tag ol sangat berguna untuk menggambarkan langkah-langkah dalam suatu proses, daftar item yang memiliki urutan tertentu, atau bahkan untuk menyajikan poin-poin yang perlu diperhatikan.

Penggunaan tag ol tidak hanya membantu dalam aspek organisasi informasi, tetapi juga meningkatkan keterbacaan konten. Pembaca dapat dengan cepat memahami struktur dan hierarki informasi yang disajikan. Anda juga dapat menyesuaikan tampilan daftar terurut ini dengan menggunakan CSS, seperti mengubah gaya nomor, menambahkan margin, atau memberikan warna latar belakang untuk menarik perhatian lebih.

Dalam dunia blogging dan pengembangan web, tag ol merupakan alat yang efektif untuk menyajikan informasi secara jernih dan terencana. Dengan memanfaatkan tag ini, Anda dapat menciptakan konten yang tidak hanya informatif, tetapi juga enak dipandang dan mudah diikuti oleh audiens Anda.

Kumpulan Tag Ol custom

Admin sudah menyediakan kumpulan tag ol custom lengkap dengan contoh tampilan, cara pembuatan secara detail, silahkan baca dan pelajari artikel ini hingga selesai okay

Tag Ol Border Segi empat

Tag ol custom yang pertama adalah tag ol border, nama tersebut berasal dari tampilan tag ol yang menggunakan tampilan Border Segi empat, untuk lebih lengkapnya silahkan periksa contoh tampilan nya

Contoh Tampilan

Berikut ini admin memberikan contoh tampilan atau contoh demonnya untuk anda, dan tag <ol> border custom tersebut seperti berikut ini

1. Assalamualaikum warahmatullahi wabarakatuh
2. Assalamualaikum warahmatullahi wabarakatuh
3. Assalamualaikum warahmatullahi wabarakatuh
4. Assalamualaikum warahmatullahi wabarakatuh
5. Assalamualaikum warahmatullahi wabarakatuh

Info: Bagaimana sobat dengan contoh tampilan dari tag<ol> custom nya menarik sekali ya kan

Cara pembuatan

Baiklah simak dan pelajari artikel ini hingga selesai agar tidak salah paham dan perhatikan setiap langkah langkah pembuatan yang bakalan admin jabarkan okay

Kode CSS

Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini, kemudian kamu bisa menempelkannya diatas kode ]]></b:skin>

ol.stylerah {counter-reset:numbers;list-style:none;padding:0}
ol.stylerah > li{counter-increment:numbers;margin-bottom:5px;position:relative;margin-left:40px}
ol.stylerah > li img{margin:16px 0;width:100%;display:block}
ol.stylerah > li::before{content:counter(numbers);line-height:24px;font-size:14px;font-weight:bold;left:-45px;width:32px;height:32px;text-align:center;position:absolute;color:#f80000;border:5px solid rgba(248, 0, 0, 1.0);top:-2px}

Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kodennya

Penjelasan kode

Admin akan menyimpulkan mengenai kode tag <ol> custom di blogger ini, dan pada kode CSS di atas tersebut adalah kode yang digunakan untuk membuat tampilan custom dari tag <ol> di blogger, kode ol merupakan tag kode dari CSS, sedangkan kode stylerah merupakan nama class dari penggunaan tag <ol> custom tersebut

Cara penggunaan

Dan untuk cara penggunaan nya agar tag <ol> nya ditampilkan secara sempurna, kamu bisa menggunakan Tag <ol> di barengi dengan kode class stylerah didepannya, nah kode lengkapnya apabila kamu terapkan akan seperti contoh kode di bawah ini

<!-- Tag pembuka <ol> -->
<ol class='stylerah'>
<!-- awali dengan penggunaan tag <li> -->
<li>Assalamualaikum warahmatullahi wabarakatuh</li>
<li>Assalamualaikum warahmatullahi wabarakatuh</li>
<li>Assalamualaikum warahmatullahi wabarakatuh</li>
<li>Assalamualaikum warahmatullahi wabarakatuh</li>
<li>Assalamualaikum warahmatullahi wabarakatuh</li>
<!-- Tag penutup <li> -->
</ol>
<!-- Penutup tag <ol> -->

Sebagai informasi: Kamu bisa menggunakan tag <ol> ini di dalam postingan artikel atau pada halaman utama blog melalui Edit HTML

Tag Ol Related

Tag Ol Related adalah nama dari tampilan Tag ol custom selanjutnya, fungsi dan kegunaan nya masih sama hanya saja contoh tampilanya saja yang berbeda

Contoh Tampilan

Agar kamu tidak penasaran dengan contoh tampilan dari tag ol related nya, silahkan periksa menggunakan tombol di bawah ini ok

1. Assalamualaikum warahmatullahi wabarakatuh
2. Assalamualaikum warahmatullahi wabarakatuh
3. Assalamualaikum warahmatullahi wabarakatuh
4. Assalamualaikum warahmatullahi wabarakatuh
5. Assalamualaikum warahmatullahi wabarakatuh

Info: Bagaimana sobat dengan contoh tampilan nya kren sekali yak

Cara pembuatan

Baiklah sekarang saatnya admin akan menjelaskan bagaimana kah caranya membuat tag ol custom di blogger dengan tanpilan ui, silahkan baca dan ikuti setiap arahan yang admin jabarkan di bawah ini

1. Login ke blogger menggunakan akun google milikmu
2. Selanjutnya pergi ke menu theme di blogger dan pilih lagi menu edit HTML
3. Selanjutnya salin seluruh source kode javascript di bawah ini kemudian letakkan di atas kode </head>

<script>/*<![CDATA[*/ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('T C=["\\j\\9\\J\\a\\8","\\l\\c\\8\\g\\9\\8\\U\\a\\8\\t\\8\\e\\9","\\9\\J\\k\\8","\\9\\8\\s\\9\\x\\l\\j\\j","\\9\\8\\s\\9\\M\\b\\e\\9\\8\\e\\9","\\b\\a\\m\\c\\g\\o\\a\\q\\y\\l\\b\\u\\e\\9\\8\\c\\r\\c\\8\\j\\8\\9\\d\\e\\u\\t\\h\\a\\f\\e\\8\\r\\o\\8\\f\\v\\o\\9\\d\\F\\m\\V\\h\\a\\f\\j\\9\\r\\j\\9\\J\\a\\8\\d\\e\\b\\e\\8\\h\\t\\g\\c\\v\\f\\e\\d\\z\\h\\k\\g\\n\\n\\f\\e\\v\\d\\z\\h\\A\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\y\\k\\b\\j\\f\\9\\f\\b\\e\\d\\c\\8\\a\\g\\9\\f\\O\\8\\h\\l\\b\\u\\e\\9\\8\\c\\r\\f\\e\\l\\c\\8\\t\\8\\e\\9\\d\\e\\u\\t\\h\\k\\g\\n\\n\\f\\e\\v\\r\\f\\e\\a\\f\\e\\8\\r\\j\\9\\g\\c\\9\\d\\W\\D\\k\\s\\h\\A\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\d\\e\\b\\9\\G\\d\\a\\g\\j\\9\\r\\l\\o\\f\\a\\n\\H\\y\\k\\g\\n\\n\\f\\e\\v\\r\\w\\b\\9\\9\\b\\t\\d\\F\\D\\k\\s\\h\\A\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\d\\d\\w\\8\\p\\b\\c\\8\\y\\l\\b\\e\\9\\8\\e\\9\\d\\l\\b\\u\\e\\9\\8\\c\\G\\e\\u\\t\\H\\i\\I\\m\\I\\h\\n\\f\\j\\k\\a\\g\\J\\d\\p\\a\\8\\s\\h\\g\\a\\f\\v\\e\\r\\f\\9\\8\\t\\j\\d\\l\\8\\e\\9\\8\\c\\h\\X\\u\\j\\9\\f\\p\\J\\r\\l\\b\\e\\9\\8\\e\\9\\d\\l\\8\\e\\9\\8\\c\\h\\k\\b\\j\\f\\9\\f\\b\\e\\d\\g\\w\\j\\b\\a\\u\\9\\8\\h\\9\\b\\k\\d\\z\\h\\Y\\f\\n\\9\\o\\d\\B\\z\\k\\s\\h\\o\\8\\f\\v\\o\\9\\d\\B\\z\\k\\s\\h\\w\\b\\c\\n\\8\\c\\d\\F\\k\\s\\i\\j\\b\\a\\f\\n\\i\\K\\n\\8\\B\\D\\B\\D\\h\\w\\b\\c\\n\\8\\c\\r\\c\\g\\n\\f\\u\\j\\d\\D\\z\\Z\\h\\l\\b\\a\\b\\c\\d\\l\\u\\c\\c\\8\\e\\9\\M\\b\\a\\b\\c\\h\\p\\b\\e\\9\\d\\j\\t\\g\\a\\a\\i\\I\\10\\f\\c\\g\\i\\q\\g\\e\\j\\I\\P\\i\\j\\g\\e\\j\\r\\j\\8\\c\\f\\p\\h\\9\\c\\g\\e\\j\\f\\9\\f\\b\\e\\d\\w\\g\\l\\Q\\v\\c\\b\\u\\e\\n\\i\\m\\F\\j\\i\\8\\g\\j\\8\\P\\l\\b\\a\\b\\c\\i\\m\\F\\j\\i\\8\\g\\j\\8\\h\\A\\x\\E\\m\\k\\q\\d\\e\\b\\9\\G\\m\\c\\H\\i\\E\\x\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\d\\d\\w\\8\\p\\b\\c\\8\\y\\a\\8\\p\\9\\d\\z\\h\\A\\x\\E\\m\\k\\q\\m\\c\\i\\E\\x\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\d\\d\\w\\8\\p\\b\\c\\8\\y\\c\\f\\v\\o\\9\\d\\z\\h\\A\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\d\\o\\b\\O\\8\\c\\d\\d\\w\\8\\p\\b\\c\\8\\y\\w\\g\\l\\Q\\v\\c\\b\\u\\e\\n\\r\\l\\b\\a\\b\\c\\d\\K\\n\\8\\B\\D\\B\\D\\h\\l\\b\\a\\b\\c\\d\\K\\p\\p\\p\\n\\p\\l\\h\\A\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\d\\d\\g\\p\\9\\8\\c\\y\\l\\b\\e\\9\\8\\e\\9\\d\\I\\I\\h\\k\\b\\j\\f\\9\\f\\b\\e\\d\\g\\w\\j\\b\\a\\u\\9\\8\\h\\9\\b\\k\\d\\l\\g\\a\\l\\G\\B\\z\\k\\s\\i\\11\\i\\R\\k\\s\\H\\h\\w\\b\\9\\9\\b\\t\\d\\R\\k\\s\\h\\w\\b\\c\\n\\8\\c\\r\\f\\e\\a\\f\\e\\8\\r\\j\\9\\g\\c\\9\\d\\F\\k\\s\\i\\j\\b\\a\\f\\n\\i\\K\\n\\8\\B\\D\\B\\D\\h\\A\\x\\E\\m\\k\\q\\d\\e\\b\\9\\G\\m\\c\\H\\i\\E\\x\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\d\\d\\g\\p\\9\\8\\c\\y\\a\\8\\p\\9\\d\\l\\g\\a\\l\\G\\B\\z\\k\\s\\i\\x\\i\\N\\H\\h\\A\\x\\E\\m\\k\\q\\m\\c\\i\\E\\x\\b\\a\\m\\c\\g\\o\\a\\q\\i\\a\\f\\d\\d\\g\\p\\9\\8\\c\\y\\c\\f\\v\\o\\9\\d\\l\\g\\a\\l\\G\\B\\z\\k\\s\\i\\x\\i\\N\\H\\h\\A\\b\\a\\m\\c\\g\\o\\a\\q\\i\\f\\t\\v\\y\\t\\g\\c\\v\\f\\e\\r\\9\\b\\k\\d\\F\\m\\N\\8\\t\\h\\A","\\g\\k\\k\\8\\e\\n\\M\\o\\f\\a\\n","\\o\\8\\g\\n"];12 L=S[C[1]](C[0]);L[C[2]]=C[3];L[C[4]]=C[5];S[C[7]][C[6]](L)',62,65,'||||||||x65|x74|x6C|x6F|x72|x3A|x6E|x69|x61|x3B|x20|x73|x70|x63|x2E|x64|x68|x66|x53|x2D|x78|x6D|x75|x67|x62|x2F|x7B|x30|x7D|x33|_0x5b12|x35|x2A|x31|x28|x29|x27|x79|x23|rahOlJs|x43|x32|x76|x2C|x6B|x38|document|var|x45|x36|x34|x6A|x77|x25|x46|x2B|const'.split('|'),0,{}))/*]]>*/</script>

Info: Jika sudah klik simpan template, dan kamu sudah berhasil memasang tag ol custom di blogger dengan tampilan UI

4. Dan terakhir cara penggunaan silahkan salin kode HTML di bawah ini, kemudian ubah <!-- Type your text here --> dengan text yang kamu inginkan

<ol class='rahlS'>
<li><!-- Type your text here --></li>
<li><!-- Type your text here --></li>
<li><!-- Type your text here --></li>
<li><!-- Type your text here --></li>
<li><!-- Type your text here --></li>
</ol>

Info: Kode pembuat urutan daftar tersebut di gunakan saat kamu kngin menulis ataupun mempublish artikel di blogger, dan harus digunakan dalam mode HTML bukan mode Compose (alias mode penulisan) oke, semoga bermanfaat

5. Ulangi cara yang sama (tepatnya cara nomor 4) jika kamu ingin menampilkan tag ol tersebut

Tag Ol Daun

Tag ol daun merupakan contoh tag ol custom menggunakan tampilan border seperri Daun, untuk selengkapnya silahkan periksa contoh tampilan tampilan nya

Contoh Tampilan

Agar kamu tidak penasaran dengan contoh tampilan dari tag ol daun tersebut, silahkan periksa menggunakan tombol di bawah ini ok

1. Assalamualaikum warahmatullahi wabarakatuh
2. Assalamualaikum warahmatullahi wabarakatuh
3. Assalamualaikum warahmatullahi wabarakatuh
4. Assalamualaikum warahmatullahi wabarakatuh
5. Assalamualaikum warahmatullahi wabarakatuh

Info: Bagaimana sobat dengan contoh tampilan nya kren sekali yak

Cara pembuatan

Baiklah sekarang saatnya admin akan menjelaskan bagaimana kah caranya membuat tag ol custom tampilan seperti daun di blogger, silahkan baca dan ikuti setiap arahan yang admin jabarkan di bawah ini

1. Login ke blogger menggunakan akun google milikmu
2. Selanjutnya pergi ke menu theme di blogger dan pilih lagi menu edit HTML
3. Selanjutnya salin seluruh source kode javascript di bawah ini kemudian letakkan di atas kode </head>

<script>/*<![CDATA[*/ eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('V y=["\\o\\c\\H\\9\\8","\\u\\b\\8\\h\\c\\8\\W\\9\\8\\q\\8\\g\\c","\\c\\H\\i\\8","\\c\\8\\r\\c\\X\\u\\o\\o","\\c\\8\\r\\c\\P\\a\\g\\c\\8\\g\\c","\\a\\9\\v\\b\\h\\m\\9\\z\\j\\p\\C\\u\\a\\x\\g\\c\\8\\b\\s\\b\\8\\o\\8\\c\\d\\g\\x\\q\\n\\8\\b\\o\\k\\9\\e\\o\\c\\s\\o\\c\\H\\9\\8\\d\\g\\a\\g\\8\\k\\q\\h\\b\\t\\e\\g\\d\\w\\k\\i\\h\\l\\l\\e\\g\\t\\d\\w\\D\\a\\9\\v\\b\\h\\m\\9\\z\\j\\p\\f\\E\\f\\9\\e\\C\\u\\a\\x\\g\\c\\8\\b\\s\\e\\g\\u\\b\\8\\q\\8\\g\\c\\d\\g\\x\\q\\n\\8\\b\\o\\k\\q\\h\\b\\t\\e\\g\\s\\n\\a\\c\\c\\a\\q\\d\\G\\w\\i\\r\\k\\i\\a\\o\\e\\c\\e\\a\\g\\d\\b\\8\\9\\h\\c\\e\\Y\\8\\k\\q\\h\\b\\t\\e\\g\\s\\9\\8\\A\\c\\d\\I\\w\\i\\r\\D\\a\\9\\v\\b\\h\\m\\9\\z\\j\\p\\f\\E\\f\\9\\e\\f\\e\\q\\t\\C\\q\\h\\b\\t\\e\\g\\d\\B\\j\\i\\r\\f\\w\\k\\L\\e\\l\\c\\m\\d\\B\\w\\w\\J\\k\\l\\e\\o\\i\\9\\h\\H\\d\\n\\9\\a\\u\\M\\D\\a\\9\\v\\b\\h\\m\\9\\z\\j\\p\\f\\E\\f\\9\\e\\d\\d\\n\\8\\A\\a\\b\\8\\C\\u\\a\\g\\c\\8\\g\\c\\d\\u\\a\\x\\g\\c\\8\\b\\N\\g\\x\\q\\n\\8\\b\\o\\O\\k\\9\\e\\g\\8\\s\\m\\8\\e\\t\\m\\c\\d\\G\\p\\i\\r\\k\\A\\a\\g\\c\\s\\o\\e\\Z\\8\\d\\B\\I\\i\\r\\k\\A\\a\\g\\c\\s\\L\\8\\e\\t\\m\\c\\d\\n\\a\\9\\l\\k\\9\\8\\A\\c\\d\\s\\I\\j\\i\\r\\k\\L\\e\\l\\c\\m\\d\\p\\G\\i\\r\\k\\m\\8\\e\\t\\m\\c\\d\\p\\G\\i\\r\\k\\c\\8\\r\\c\\s\\h\\9\\e\\t\\g\\d\\u\\8\\g\\c\\8\\b\\k\\i\\a\\o\\e\\c\\e\\a\\g\\d\\h\\n\\o\\a\\9\\x\\c\\8\\k\\u\\a\\9\\a\\b\\d\\Q\\l\\8\\p\\j\\p\\j\\k\\n\\a\\b\\l\\8\\b\\d\\j\\i\\r\\f\\o\\a\\9\\e\\l\\f\\Q\\l\\8\\p\\j\\p\\j\\k\\n\\a\\b\\l\\8\\b\\s\\b\\h\\l\\e\\x\\o\\d\\j\\w\\J\\f\\w\\f\\j\\w\\J\\f\\j\\w\\J\\k\\c\\a\\i\\d\\G\\i\\r\\D\\a\\9\\v\\b\\h\\m\\9\\z\\j\\p\\f\\9\\e\\f\\x\\9\\f\\9\\e\\C\\q\\h\\b\\t\\e\\g\\s\\n\\a\\c\\c\\a\\q\\d\\B\\j\\i\\r\\D\\a\\9\\v\\b\\h\\m\\9\\z\\j\\p\\f\\9\\e\\f\\x\\9\\C\\q\\h\\b\\t\\e\\g\\s\\c\\a\\i\\d\\B\\j\\i\\r\\D\\v\\l\\b\\10\\f\\a\\9\\v\\b\\h\\m\\9\\z\\j\\p\\f\\E\\f\\9\\e\\d\\d\\n\\8\\A\\a\\b\\8\\R\\v\\l\\h\\b\\M\\11\\a\\l\\8\\f\\a\\9\\v\\b\\h\\m\\9\\z\\j\\p\\f\\E\\f\\9\\e\\d\\d\\n\\8\\A\\a\\b\\8\\R\\v\\l\\h\\b\\M\\s\\q\\a\\l\\8\\f\\a\\9\\v\\b\\h\\m\\9\\z\\j\\p\\f\\E\\f\\9\\e\\d\\d\\n\\8\\A\\a\\b\\8\\C\\n\\a\\b\\l\\8\\b\\s\\u\\a\\9\\a\\b\\d\\b\\t\\n\\N\\F\\S\\f\\F\\T\\f\\F\\F\\O\\k\\u\\a\\9\\a\\b\\d\\b\\t\\n\\N\\B\\F\\S\\f\\B\\F\\T\\f\\B\\12\\I\\O\\D","\\h\\i\\i\\8\\g\\l\\P\\m\\e\\9\\l","\\m\\8\\h\\l"];13 K=U[y[1]](y[0]);K[y[2]]=y[3];K[y[4]]=y[5];U[y[7]][y[6]](K)',62,66,'||||||||x65|x6C|x6F|x72|x74|x3A|x69|x20|x6E|x61|x70|x35|x3B|x64|x68|x62|x73|x33|x6D|x78|x2D|x67|x63|x2E|x30|x75|_0xf5e3|x53|x66|x31|x7B|x7D|x3E|x37|x32|x79|x34|x25|rahOlJs|x77|x6B|x28|x29|x43|x23|x2C|x36|x39|document|var|x45|x2F|x76|x7A|x4B|x4D|x38|const'.split('|'),0,{})) /*]]>*/</script>

Info: Jika sudah klik simpan template, dan kamu sudah berhasil memasang tag ol custom di blogger dengan tampilan seperti daun dan sangat menarik tentunya

4. Dan terakhir cara penggunaan silahkan salin kode HTML di bawah ini, kemudian ubah <!-- Type your text here --> dengan text yang kamu inginkan

<ol class='rahlS53'>
<li><!-- Type your text here --></li>
<li><!-- Type your text here --></li>
<li><!-- Type your text here --></li>
<li><!-- Type your text here --></li>
<li><!-- Type your text here --></li>
</ol>

Info: Kode pembuat urutan daftar tersebut di gunakan saat kamu ingin menulis ataupun mem publish artikel di blogger, dan harus digunakan dalam mode HTML bukan mode Compose (alias mode penulisan) oke

5. Silahkan ulangi cara yang sama (lebih tepatnya tahap nomor 4) jika kamu ingin menampilkan tag ol kembali ok, semoga bermanfaat