Quantcast
Channel: Kursus Website Terbaik
Viewing all articles
Browse latest Browse all 2170

Cara Membuat Theme dengan W3.CSS

$
0
0

Kejujuran sesungguhnya bukan terletak di mulut tetapi di hatimu. Cukup rasakan dan ikuti, maka kebahagiaan disana akan menanti. Halo semuanya, lama tak bersua. Apa kabar? Terbaik dan nomor satu nya ya pasti. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Theme dengan W3.CSS.

Theme yang dimaksud adalah memasukkan warna dasar untuk badan website kita. Di W3.CSS banyak pilihan warna yang bisa teman-teman pilih.
Penampakan nya seperti ini teman-teman:

Cara Membuat Theme dengan W3.CSS

Oke langsung saja, berikut Cara Membuat Theme dengan W3.CSS.

Pertama-tama, silahkan siapkan file index.html nya.

Kemudian, isi di bagian <head> untuk menghubungkan file HTML kita dengan link library W3.CSS.

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

Dan hubungkan juga HTML kita dengan library warna dari W3.CSS di bagian <head>.

<link rel="stylesheet" href="/lib/w3-theme-orange.css">

Setelah itu, isi di bagian <body> tag-tag seperti gambar di bawah.

<div class="w3-card-4">
<div class="w3-container w3-theme w3-card-2">
  <h1>Orange</h1>
</div>

<div class="w3-container w3-text-theme"><h2>w3-text-theme</h2></div>

<ul class="w3-ul w3-border-top">
  <li class="w3-theme-l5" style="position:relative">
  <a class="w3-btn-floating-large w3-theme-action w3-right" style="position:absolute;top:-28px;right:16px;">+</a>
  <p>w3-theme-l5 (w3-theme-light)</p>
  </li>
  <li class="w3-theme-l4">
    <p>w3-theme-l4</p>
  </li>
  <li class="w3-theme-l3">
    <p>w3-theme-l3</p>
  </li>
  <li class="w3-theme-l2">
    <p>w3-theme-l2</p>
  </li>
  <li class="w3-theme-l1">
    <p>w3-theme-l1</p>
  </li>
  <li class="w3-theme">
    <p>w3-theme</p>
  </li>
  <li class="w3-theme-d1">
    <p>w3-theme-d1</p>
  </li>
  <li class="w3-theme-d2">
    <p>w3-theme-d2</p>
  </li>
  <li class="w3-theme-d3">
    <p>w3-theme-d3</p>
  </li>
  <li class="w3-theme-d4">
    <p>w3-theme-d4</p>
  </li>
  <li class="w3-theme-d5">
    <p>w3-theme-d5 (w3-theme-dark)</p>
  </li>
</ul>
</div>

Bagaimana teman-teman? cukup mudah bukan?

Sekian untuk tutorial kali ini tentang bagaimana Cara Membuat Theme dengan W3.CSS.

Semoga bermanfaat, terima kasih

The post Cara Membuat Theme dengan W3.CSS appeared first on Kursus Website Terbaik.


Viewing all articles
Browse latest Browse all 2170

Trending Articles