Cara Membuat Div Styles dan Macam-Macamnya

Contoh div

pada artikel kali ini saya akan membagikan tips blogging tentang div. sebenernya apa sih div? div itu seperti kotak diatas itu lo

udah langsung aja dilihat dibawah

• Kode :

  <div style="border: 2px solid blue;"> <div style="border: 3px solid red;"> <div align="center"> Teks</div> </div> </div>
  Hasilnya :
  Teks
• Kode :

  <div style="border: 4px solid yellow;"> <div align="center"> <span style="color: coral;">Teks </span></div> </div>
  Hasilnya
  Teks
• Kode :

  <div style="border: 3px double #ff0000; padding: 5px;"><div align="center">Teks </div></div>
  Hasilnya :
  Teks
• Kode :

  <div style="border: 3px double #0000ff; padding: 5px;"><div style="border: 2px solid #0077ff; padding: 5px;"><div align="center">Teks </div></div></div>
  Hasilnya :
  Teks
• Kode :

  <div style="border-color: lime; border-style: dotted; border-width: 2px; margin: 1px; padding: 1px;"><center>Teks </center></div>
  Hasilnya :
  Teks
• Kode :

  <div style="border-style:inset;border-width:5pt;border-color:black" align="center">Teks </div>
  Hasilnya :
  Teks
• Kode :

  <div style="background: #bbddff; border: 5px outset#c0c0c0; margin: 0px; padding: 5px;"><div align="center">Teks </div></div>
  Hasilnya :
  Teks
• Kode :

  <div style="border: 2px solid#220000;"><div style="border: 2px solid#dddddd;"><div style="border: 4px solid#220000;"><div style="border: 2px solid#dddddd;"><div style="border: 2px solid#220000;"><div align="center"><span style="color: red;">Teks </span></div></div></div></div></div></div>
  Hasilnya :
  Teks
• Kode :

  <div style="border: 1px solid#2222ff;"><div style="border: 1px solid#3333ff;"><div style="border: 1px solid#4444ff;"><div style="border: 1px solid#5555ff;"><div style="border: 1px solid#2222ff;"><div style="border: 1px solid#3333ff;"><div style="border: 1px solid#4444ff;"><div style="border: 1px solid#5555ff;"><div style="background-color: #44ccff;"><div align="center"><span style="color: red;">Teks </span></div></div></div></div></div></div></div></div></div></div>
  Hasilnya :
  Teks
• Kode :

  <div style="border: 3px solid#2222ff;"><div style="background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/linerbn.gif'); border: 0px; margin: 2px; padding: 2px;"><div style="background-color: #cccccc;"><div align="center"><span style="color: red;">Teks </span></div></div></div></div>
  Hasilnya :
  Teks
• Kode :

  <div style="border: 1px solid#001100;"><div style="border: 1px solid#002200;"><div style="border: 1px solid#003300;"><div style="border: 1px solid#004400;"><div style="border: 1px solid#005500;"><div style="border: 1px solid#006600;"><div style="border: 1px solid#007700;"><div style="border: 1px solid#008800;"><div style="border: 1px solid#009900;"><div style="border: 1px solid#00aa00;"><div style="border: 1px solid#009900;"><div style="border: 1px solid#008800;"><div style="border: 1px solid#007700;"><div style="border: 1px solid#006600;"><div style="border: 1px solid#005500;"><div style="border: 1px solid#004400;"><div style="border: 1px solid#003300;"><div style="border: 1px solid#002200;"><div style="border: 1px solid#001100;">
  <div align="center"><span style="color: red;">Teks </span></div>
  </div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
  Hasilnya :
  Teks

kyknya segitu dulu gan. silakan dicoba yak

ARTIKEL TERKAIT:

membuat div

dasar html

• Cara Membuat Teks Berjalan atau Marquee Teks
• Memberi Komentar di HTML
• Dasar-Dasar bahasa HTML

tips blog

• Cara Membuat Efek Glow pada Teks atau Link Blogger
• Cara Membuat Tombol di Blogspot dan Wordpress
• CARA MEMBUAT HIDDEN CHAT BOX
• Memberi Komentar di HTML
• Cara Edit HTML dan Expand Widget Templates Terbaru 2014
• Cara Membuat Artikel Terkait (Related Post) Di Bawah Setiap Postingan/Artikel
• CARA MENGATASI LINK BLOG YANG DICEKAL OLEH ROBOTS.TXT PADA GOOGLE
• CARA MENAMBAHKAN VIDEO YOUTUBE PADA BLOG
• CARA MEMBUAT BURUNG TWITTER BETERBANGAN DI BLOG
• Cara Membuat Gambar Batman Berjalan di Sudut Halaman Blog
• Cara Mengganti Background Blog dengan Sambaran Petir
• Cara Membuat Efek Lipatan Kertas pada Pojokan Blog
• Cara Membuat Tombol Go To Top atau kembali ke atas di Blogger
• 10 Situs Download Gambar Untuk Blog & Desain
• Cara Mengganti Kursor atau Mouse pada Blog
• Cara Memproteksi Postingan Agar Tidak Bisa di Copy-Paste
• Cara dasar membuat Link secara manual
• Cara membuat Dropdown menu
• Cara Menambah Ikon Status Off/Online Yahoo Messenger
• Senilai Berapakah Harga Blog Kamu?
• Cara Membuat Menu Secara Horizontal
• Cara Mengganti Navigasi "Older Post" atau "Newer Post" Menjadi Berbentuk Angka
• Cara Membuat Shoutbox atau Chat Box pada Blogspot
• cara memasang translator:google translate pada blogspot