For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Cara membuat tag ol custom diblogger tampilan keren

Hello sobat IcloudZer kali ini admin bakalan memberikan lagi nih informasi seputar blogging, yakni dalam membahas bagaimana caranya membuat tag <ol> custom di blogger

Info: Baikah sekarang kita langsung saja mulaikan pembahasannya oke

Tag OL

Apa itu sebenarnya tag <ol>? tag <ol> merupakan kode HTML yang sering di gunakan untuk membuat sebuah daftar urutan text yang menggunakan nomor di awal penulisan text, sedangan untuk membuat tampilan tag <ol> nya di perlukan kode CSS di dalam pembuatan nya, sedangkan fungsi kode tag <ol> secara opsional nya kamu bisa menggunakan tag <<ol>> untuk membuat daftar urutan text berdasarkan nomor ataupun angka di awal text tersebut

Dibuat menggunakan CSS

Seperti yang sudah admin jelaskan sebelumnya bahwa tag <ol> tersebut di buat menggunakan kode CSS saja, tanpa ada unsur kode javascript di dalamnya untuk membuat tampilan dari tag <ol> custom tersebut, dengan penggunaan kode CSS dalam membuat suatu tampilan terkhusus nya di blogger membuat suatu tampilan tersebut menjadi responsive dan tidak menggangu performa dari blog tersebut

Border keren

Tidak seperti biasanya tag <ol> tersebut apabila kamu pakai nantinya akan di tampilkan dalam sebuah border agak tebal dengan warna yang bisa kamu ubah sesuai keinginan kamu nantinya

Info: Dan Border tersebut akan melingkari urutan nomor yang membuat tag <ol> nampak semakin menarik tentunya

Contoh Tampilan

Dan sebagai pelengkapnya admin bakalan memberikan contoh tampilan atau contoh demonnya untuk anda, dan tag <ol> custom tersebut seperti berikut ini

  1. Text anda letakkan disini
  2. Text anda letakkan disini
  3. Text anda letakkan disini
  4. Text anda letakkan disini
  5. Text anda letakkan disini

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>Text anda letakkan disini</li>
<li>Text anda letakkan disini</li>
<li>Text anda letakkan disini</li>
<li>Text anda letakkan disini</li>
<li>Text anda letakkan disini</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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.