coolmixs.blogspot.com

English French German Spain Italian Dutch
Translate Widget by Google

3.1.10

Bikin Border Blog


Oke kawan - kawan, barusan ane belajar merubah-rubah tampilan blog. Buat ane sih biar gak membosankan, karena ane cepat bosan dan cukup capek klo harus ganti template lagi.
Nah, kali ini yang ane pelajari soal border ato garis tepi.

Mungkin para senior dah banyak yang tahu, jadi disini ane sekedar sharing aja. Yukk kita mulai sama-sama :

Ternyata boder itu ada beragam jenis yang bisa kita kreasikan agar tampilan blog lebih berbeda dari biasanya. border ini bisa kita gunakan untuk text atau pun image. berikut beberapa jenis border yang ane ketahui :

Contoh pemakaian pada text :
Kita perhatikan huruf yang berwarna merah.

Kode :
<span style="border: 5px solid rgb(240, 140, 0); padding: 8px;">solid</span>
Tampilan border :


solid


Kode :
<span style="border: 5px double rgb(240, 140, 0); padding: 8px;">double</span>
Tampilan border :


double


Kode :
<span style="border: 5px groove rgb(240, 140, 0); padding: 8px;">groove</span>
Tampilan border :


groove


Kode :
<span style="border: 5px dotted rgb(240, 140, 0); padding: 8px;">dotted</span>
Tampilan border :


dotted


Kode :
<span style="border: 5px dashed rgb(240, 140, 0); padding: 8px;">dashed</span>
Tampilan border :

dashed


Kode :
<span style="border: 5px inset rgb(240, 140, 0); padding: 8px;">inset</span>
Tampilan border :

inset


Kode :
<span style="border: 5px outset rgb(240, 140, 0); padding: 8px;">outset</span>
Tampilan border :

outset


Kode :
<span style="border: 5px ridge rgb(240, 140, 0); padding: 8px;">ridge</span>
Tampilan border :

ridge


Kode :
<span style="border: 5px hidden rgb(240, 140, 0); padding: 8px;">hidden</span>
Tampilan border :

hidden

Catatan : untuk merubah warna ada pada setinggan RGB atau #kode warna
Padding adalah jarak antara obyek dengan border

Jika kita ingin menambah border pada gambar postingan, kita cari kode ini :

.post img

Kemudian kita tambahkan kode border sehingga menjadi seperti ini :

.post img {border: 5px solid #F08C00;}

Nah, setelah kita coba, seperti biasa kita klik previewnya dulu klo dah mantabs baru kita save.
Bookmark and Share


Berita Terkait :

15 komentar:

insanitis37 on 3 Januari 2010 pukul 19.56 mengatakan...

menarik sekali mas....
akan saya save ya, karena pasti butuh!!hehe
makasih

Fortuna on 3 Januari 2010 pukul 19.59 mengatakan...

makasih tipsnya yg menari ini sob..

moenas on 3 Januari 2010 pukul 20.06 mengatakan...

mantabbb brow banyak belajar banyak bisa, sedikit belajar sedikit bisa, kaga belajar kaga bisa2 sippp makin mantab ja neh

dellanovski on 3 Januari 2010 pukul 20.54 mengatakan...

@ all : ane hanya sharing kawan-kawan..

phonank on 4 Januari 2010 pukul 10.37 mengatakan...

Wah bikin Mbo'Der yah..??

caelah... lagi sharing nih, hehe..
boleh2...

Aku singkap ilmunya,, sreeeppp... hehe

phonank on 4 Januari 2010 pukul 10.38 mengatakan...

Foto pejabat di rumah phonank,, name tag nya udah diganti doonk... jadi nama Phonank,, wakakakak...
Melihat saja kekurangan dari foto ku, hehe sipp...

Thanks..

Endra on 4 Januari 2010 pukul 10.41 mengatakan...

phonank : weits.. ane ndak sengaja itu brow.. wakakakakkk..

phonank on 4 Januari 2010 pukul 11.04 mengatakan...

haha...
bukan salah dikau..
emang phonank yang kurang teliti,, name tag nya baru phonank edit lagi tadi, hehehehe

jd foto yg tadi dilihat emang salah nama,, hohohoo

Tenang saja gak bakal diputus kok aliran listriknya,,, cuma di cabut ajah dari peredaran, heehehe

Just Kidding... hohoo

Rizkyzone on 4 Januari 2010 pukul 11.56 mengatakan...

wah mantab nih sob kapan coba, soalnya css q terlalu rapet akibat tak kompres

www.blogsportainment.blogspot.com on 13 Januari 2010 pukul 11.28 mengatakan...

makasih triknya..

megi on 21 Februari 2010 pukul 14.26 mengatakan...

info yg bermanfaat,
salam kenal

audio conference on 25 Februari 2010 pukul 10.16 mengatakan...

nice infonya sob, salam kenal dari q & jgn lupa mampir juga ya

Place to modify blog on 6 Juli 2010 pukul 21.04 mengatakan...

hehehehehehe keren tutorialnya,, oy mas, salam kenal, kunjungan pertama. cuma mau share mas, di w3school ada tutorialnya, cuma pake bahasa inggris. bisa juga belajar css, html, xml, javascript, php d.l.l. bisa baca di sini http://modifblogmu.blogspot.com/2010/06/yuk-belajar-html-xml-css-php-my-sql.html .. tp, mungkin mas dah tahu ini, ane cuma share aja. mana tau belum tahu tentang ini..

temennya temenmu on 1 Oktober 2010 pukul 16.34 mengatakan...

kepala pusing bikin pening, jalan-jalan ah nyari baclink :)

junior on 23 Maret 2011 pukul 18.49 mengatakan...

menarik sob.. lumayan buat utak-atik blog ane

Posting Komentar

Ini adalah blog doFollow, mohon PENGERTIANNYA ya..
Klo ada salah, mohon diingatkan.. makasih dah berbagi

 
TOP Commentator
Comment Terbaru
TUKERAN LiNK

Lebih Cepat pake | Mozilla Firefox