Friday, June 1, 2012

Tutorial Style Border dan Jenis Garis

Blog Tutorial - Tutorial kali ini adalah berhubungan dengan border. Border bisa juga dikatakan sebagai bingkai. Ada berbagai macam bentuk border yaitu dapat berupa bingkai kotak penuh , bingkai berupa garis atas, bawah, kanan atau kiri dari sesuatu di dalam blog. Sesuatu yang dapat diberikan efek bingkai misalnya posting area, head, widget dan lain sebagainya. Nah, berikut ini ada beberapa contoh jenis border yang dapat anda pakai untuk mempercantik tampilan blog atau website anda.

Jenis-jenis border adalah
  • border (bingkai kotak penuh)
  • border-top (bingkai di bagian atas)
  • border-bottom (bingkai di bagian bawah)
  • border-right (bingkai di bagian kanan)
  • border-left (bingkai di bagian kiri)
Jenis garis pada border :
  • ridge >> contoh kode >>  border:15px ridge silver
  • groove  >> contoh kode >>  border:15px groove silver
  • outset  >> contoh kode >>  border:15px outset silver
  • inset  >> contoh kode >>  border:15px inset silver
  • solid  >> contoh kode >>  border:15px solid silver
  • double  >> contoh kode >>  border:15px double silver
  • dotted  >> contoh kode >>  border:15px dotted silver
  • dashed  >> contoh kode >>  border:15px dashed silver

Petunjuk kode :
Kode berwarna merah adalah tebal border 
Kode warna hijau adalah kode warna sesuai dengan yang anda inginkan

Contoh pemakaian pada jenis border : border

1. Jenis garis: ridge


contoh border ridge, kode html-nya adalah
border:15px ridge tomato



 2.  Jenis garis: groove

contoh border groove, kode html-nya adalah
border:15px groove tomato


3.  Jenis garis: outset

contoh border outset, kode html-nya adalah
border:15px outset tomato


4.  Jenis garis: inset

contoh border type inset, kode html-nya adalah
border:15px inset tomato


5.  Jenis garis: solid

contoh border solid, kode html-nya adalah
border:15px solid tomato


6.  Jenis garis: double

contoh border double, kode html-nya adalah
border:15px double tomato


7.  Jenis garis: dotted

contoh border dotted, kode html-nya adalah
border:15px dotted tomato


8.  Jenis garis: dashed


contoh border dashed, kode html-nya adalah
border:15px dashed tomato


9. Jenis garis : campuran/ mixed
Anda juga dapat membuat border dengan jenis garis campuran seperti berikut ini :
urutan style  border adalah:  atas, kanan, bawah, kiri
contoh untuk border-style: dotted solid double dashed


contoh border dashed, kode html-nya adalah
border-color: tomato; border-style: dotted solid double dashed; border-width:15px


Nah, sobat...
Mudah-mudahan jenis border di atas dapat menambah wawasan sobat semua. Anda dapat menerapkannya pada berbagai tempat, bisa untuk style pada posting blog, maupun untuk mengatur tampilan blog misalkan pada kolom posting, judul blog, dll.

Oke Selamat mencoba.

Admin-Blog Tutorial

Baca Juga » Info Kontes - Kompetisi Tingkat Nasional-International


1 komentar:

Umar Sensai said...

Sip mas hehehe :)

Follow Us

Daftar Artikel

Created by. Amru Sholihin. Powered by Blogger.

TIPS SEO HARI INI

Anda punya Blog? Atau website ingin meningkatkan Page Rank di Search Engine? Klik logo-logo di bawah ini untuk melihat caranya :
ping fast  my blog, website, or RSS feed for Free Ping your blog, website, or RSS feed for Free My Ping in TotalPing.com

PageRank Display

PageRank