Belajar Styling List Dengan CSS


Belajar Styling List Dengan CSS - Sebelumnya kita pernah mempelajari Tutorial Cara Membuat Daftar (List) dalam HTML, Nahh untuk sekarang kita akan belajar Bagaimana Cara Styling atau memanipulasi List / daftar menggunakan CSS, oke langsung saja simak tutorialnya berikut ini.

Pada umumnya Pada HTML sebuah daftar/list ini ada 2 jenis, yaitu :
  1. Ordered List <ol> ( untuk membuat daftar / list menggunakan angka atau huruf  )
  2. Unordered List <ul> ( untuk membuat daftar / list menggunakan simbol  )
Untuk lebih jelasnya silahkan baca saja pada tutorial :
Sedangkan untuk cara memanipulasinya itu kita bisa menggunakan sebuah property list-style-type dan list-style-image.

1. Property List Style Type

 Property List Style Type memiliki 4 nilai (value), yaitu :
  • circle
  • square
  • upper-roman
  • lower-alpha
Berikut ini adalah contoh penggunaanya dalam HTML.
<!DOCTYPE html>
<html>
   <head>
        <title>Belajar Styling List Dengan CSS</title>
<style>
ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}
</style>
</head>
<body>

<p>Nilai circle dan square untuk unordered lists:</p>
<ul class="a">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
</ul>

<ul class="b">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
</ul>

<p>Nilai upper-roman dan lower-alpha untuk ordered lists:</p>
<ol class="c">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
</ol>

<ol class="d">
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
</ol>

</body>
</html>

2. Property List Style Image

Nilai (Value) untuk Property List Style Image itu menggunakan sebuah gambar, sesuai dengan nama propertynya, yaitu image. 

Supaya bisa lebih mengerti, sekarang sobat buatlah sebuah folder baru, lalu sekarang kita buat halaman HTML dan CSS dengan kode berikut ini dan letakan di folder baru tersebut. Jangan lupa untuk menyimpan sebuah gambar pada folder tersebut.
<!DOCTYPE html>
<html>
   <head>
        <title>Belajar Styling List Dengan CSS</title>
<style>
ul {
    list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>PHP</li>
</ul>

</body>
</html>
Penggunaan Property List Style Image


Nahh cukup sekian Tutorial Belajar Styling List Dengan CSS semoga tutorial ini bisa membantu dan bermanfaat untuk semuanya. Terimakasih




Diposkan oleh Tanggal 1 comment:

Cara Ampuh Menghilangkan Link Aktif Di Komentar Blogger

Cara Ampuh Menghilangkan Link Aktif Di Komentar Blogger

Kali ini Blog Pintasku akan memberikan Tutorial Menghilangkan Link Aktif Di Komentar Blogger, terkadang kita sebagai owner blog, suka terganggu oleh sebuah komentar spam. Maksud komentar spam disini adalah komentar sering terdapat sebuah link aktif, dan biasanya juga komentar yang di cantumkan juga adalah komentar yang tidak bermutu.

Sebagai owner blog pastinya kita tidak ingin blog kita itu di anggap sebagai blog spam, karena di dalam blog kita itu terdapat banyak komentar link aktif (Spammer). Oleh karena itu kita harus mengambil cara supaya blog kita terhindar dari komentar link aktif (Spammer).

Untuk menghilangkan link aktif pada komentar blogger, itu ada  beberapa cara dan semua cara tersebut menggunakan Javascript, berikut ini Blog Pintasku akan membagikan 3 cara untuk menghilangkan link aktif di komentar blog, 2 dari cara tersebut kita memerlukan bantuan jQuery, Berikut ini tutorialnya

Menghilangkan Link Aktif Di Komentar Blogger Dengan jQuery

Pastikan sobat sudah Memasang jQuery Di Blog, jika belum silahkan copy script berikut ini dan letakan tepat di atas tag </head> pada blog sobat.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'>
Jika sudah terpasang jQuery pada blog sobat, nahh sekarang kita hanya perlu menambahkan sebuah fungsi, berikut ini ada 2 fungsi yang akan saya share untuk Menghilangkan Link Aktif Di Komentar Blogger.
  1. Script Pertama.
    2. </script>
<script type='text/javascript'>
$(function() {
$('#comments p').find('a').remove(); });
</script>
  2. Script Kedua
    3. <script type='text/javascript'> jQuery(document).ready(function(){ jQuery("#comments p").find("a").replaceWith("<span> Dilarang menggunakan Link Aktif.</span>"); }); </script>
    Silahkan ganti tulisan berwarna merah sesuai dengan kehendak sobat.

Menghilangkan Link Aktif Di Komentar Blogger Dengan Javascript

Nahh di atas kita menggunakan bantuan jQuery, sedangkan untuk cara ini kita menggunakan javascript saja tanpa menggunakan bantuan jQuery, berikut ini tutorialnya.
  • Copy script berikut ini dan letakan pada tag </body> atau pada tag </head>
    • <script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
    var parent = document.getElementById(parentID),
        content = parent.getElementsByTagName(children);
    for (var i = 0; i < content.length; i++) {
        if (content[i].innerHTML.indexOf('</a>') !== -1) {
            content[i].innerHTML = "<mark>No live link!!!</mark> Dilarang nyepam di sini!";
            content[i].className = "spammer-detected";
        }
    }
} 
blockLinks('comment-holder', 'p');
//]]>
</script>
    Silahkan ganti tulisan berwarna merah sesuai dengan kehendak sobat.
Sekian Tutorial Cara Ampuh Menghilangkan Link Aktif Di Komentar Blogger semoga tutorial ini bisa bermanfaat dan bisa membantu untuk semuanya. Terimakasih telah membaca
Diposkan oleh Tanggal 4 comments:

Tag Colgroup Dan Tag Col Dalam Tabel HTML

Tag Colgroup Dan Tag Col Dalam Tabel HTML

Mengenal Tag Colgroup Dalam Tabel HTML - Nahh satu lagi tag yang akan kita pelajari di dalam Membuat Tabel Dalam HTML, yaitu tag colgroup dan tag col. Dimana fungsi dari tag colgroup dan tag col ini adalah untuk menghubungkan atau mengaitkan keseluruhan kolom dalam tabel.

Misalnya jika kita ingin memanipulasi tabel dalam HTML, tetapi pada seluruh kolom pertama dan ketiga dari tabel. kita bisa menggunakan tag colgroup dan tag col. Jika di dalam CSS kita bisa memanipulasinya dengan menambahkan atribut class di dalam bagian tr, maka seluruh baris tersebut akan berubah.

Supaya bisa lebih mengerti silahkan perhatikan contoh penggunaan tag colgroup dan tag col dalam tabel HTML, berikut ini.
<!DOCTYPE html>
<html>
   <head>
        <title>Penggunaan tag colgroup dan col dalam Tabel</title>
   </head>
<body>
<h3>Belajar Tag colgroup dan col dalam Tabel</h3>
<table border="1">
    <colgroup>
        <col style="background-color:yellow" />
        <col style="background-color:green" />
        <col />
    </colgroup>
    <tr>
        <th>Judul 1</th>
        <th>Judul 2</th>
        <th>Judul 3</th>
    </tr>
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr style="color:blue">
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
    </tr>
</table>
</body>
</html>




Diposkan oleh Tanggal No comments:

Mengenal Tag thead, tfoot dan tbody dalam Tabel HTML

Mengenal Tag thead, tfoot dan tbody dalam Tabel HTML


Sebelumnya kita pernah belajar Cara Membuat Tabel Dalam HTML, untuk membuat tabel itu pada dasarnya hanya  diperlukan 3 tag saja, yaitu : tag table, tag tr, dan tag td. Nahh sedangkan untuk membuat sebuah tabel yang lebih spesifik atau lebih detail di dalam HTML itu menyediakan tag lain yaitu tag thead, tfoot dan tbody, dimana fungsi tag tersebut adalah untuk membuat bagian bagian tabel, atau lebih tepatnya layout tabel, misalnya kita bisa memisahkan antara kolom tabel header dengan kolom tabel isi dan kolom tabel footer.

Apa manfaat menggunakan tag thead, tfoot dan tbody itu ? Untuk mempermudah kita di dalam pengeditan tabel apalagi kalo kita membuat tabel dengan jumlah kolom banyak dan kita menggunakan 3 tag dasar saja itu sangat memusingkan kita jika kita ingin mengedit tabel tersebut, nahh dengan menggunakan tag thead, tfoot dan tbody kita bisa lebih mudah mengedit antara bagian heading, isi, dan footer.

Supaya bisa lebih mengerti dalam penggunan tag thead, tfoot dan tbody, perhatikan contoh kode berikut ini.
<!DOCTYPE html>
<html>
   <head>
      <title>Penggunaan Tag thead, tfoot dan tbody dalam Tabel</title>
   </head>
<body>
<h3>Belajar Tag thead, tfoot dan tbody dalam Tabel</h3>
<table border="1">
    <thead>
        <tr>
          <th>Judul 1</th>
          <th>Judul 2</th>
          <th>Judul 3</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
          <td>Footer 1</td>
          <td>Footer 2</td>
          <td>Footer 3</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
          <td>Baris 1, Kolom 1</td>
          <td>Baris 1, Kolom 2</td>
          <td>Baris 1, Kolom 3</td>
        </tr>
        <tr>
           <td>Baris 2, Kolom 1</td>
           <td>Baris 2, Kolom 2</td>
           <td>Baris 2, Kolom 3</td>
        </tr>
    </tbody>
</table>
</body>
</html>

Nahh pada contoh di atas, kita bisa melihat dengan jelas antara bagian table heading, table body dan table footer. Memang jika kita ingin membuat sebuah tabel, tag ini tidak terlalu diperlukan tetapi jika kita membuat tabel dengan jumlah kolom yang banyak kita sebaiknya menggunakan tag thead, tfoot dan tbody.

Sekian Tutorial Mengenal Tag thead, tfoot dan tbody dalam Tabel HTML semoga tutorial ini bisa bermanfaat dan bisa membantu sobat dalam belajar HTML. Terimakasih
Diposkan oleh Tanggal No comments:
Subscribe to: Posts (Atom)