Cara membuat tema css mwb dengan mudah ( full tutorial css mywapblog bag:3 )

December212012
Selamat malam teman2 MWB. . . Ketemu lagi dengan Triya Mobile™. Sebelum-nya saya meminta ma'af kepada kalian semua karena belum sempat mampir ke blog kalian, sehubungan banyak kesibukan didunia nyata. Pada kesempatan kali ini saya akan meneruskan postingan kemarin tentang Cara membuat css MWB (Full tutorial bag II) sebelumnya kita telah praktek membuat css mwb bagian body pada judul artikel Cara membuat css MWB (Full tutorial bag I) di bagian pertama dan di lanjutkan dengan header dan search_form di artikel Cara membuat css MWB (Full tutorial bag II) ... Sekarang kita turun kebawah dan praktek pada bagian >> NAVIGATION << NAVIGATION Disini kita hanya akan mengatur beberapa bagian saja agar terlihat kerapian- nya dalam tema blog kita mwb. . . 1.navigasi itu sendiri 2.judul navigasi 3.navigasi li dan 4.navigasi li a Dan masih banyak lagi selector di bagian navigasi ini. . Agar kita tidak terlalu bingung, jadi kita ambil yang simpel- nya saja... Lanjut sob .. Perhatikan contoh di bawah ini sob: #navigation { background:black; border:1px solid green; margin:0px; text- align:center } Dalam contoh diatas kita hanya mengatur background, border, jarak keluar dan posisi text-nya.. lainya kita atur pada bagian dalam,. di bagian ini sama tempat- nya seperti header dan search_form jadi untuk border, dan jarak keluar atau margin aku sarankan agar sama. . . >> sekaran untuk judul navigasi nya... contohnya: #navigation h2 { background:black; border:1px solid red; margin:0px; padding: 5px 1px; text-align:center; text- transform:uppercase } apa kalian melihat perbedaan dan penambahan property yang kita gunakan dalam contoh diatas dari contoh sebelum-nya? hanya sedikit penjelasan !! untuk property text- transform mudahnya agar semua huruf jadi besar semua dan padding:5px 1px agar jarak kedalam dari border dengan text-nya agak menjauh... dan ingat,dalam penulisan ukuran padding itu penjelasanya adalah searah jarum jam dan jika penulisannya seperti itu, antara atas dan bawah berjarak 5px dan kiri kanan berjarak 1px.. jelas kan sob, masak judul sama daftar kategorinya sama?,. Dibedakan sedikit saja ya. . >> Sekarang kita mengatur bagian #navigation li navigation li ini, Tepatnya kalau aku menyebutkan adalah pembungkus dari # navigation li a atau di bagian luar-nya #navigation li a... perhatikan contohnya: #navigation li { list- style:none; background:black; border:1px solid red; margin:1px 3px 1px -17px; text-align:center } dan #navigation li { list-style- image:url(alamat gambar kamu); list-style- position:inside; background:black; border:1px solid red; margin:1px 3px 1px -17px; text-align:left } dalam kedua contoh diatas,. yang pertama tanpa menggunakan list atau disini mudahnya adalah kita menghilangkan nomor didepan #navigation li a dan yang kedua kita akan menggunakan list berupa gambar dan posisinya. . . perbedaan contoh diatas adalah terletak pada pengaturan text-nya!! jika list-nya tanpa gambar kita atur text-nya ditengah dan jika memakai gambar kita arahkan text-nya rata dikiri agar rapi,. dan margin:1px 3px 1px -17px penjelasanya adalah. . jika margin:0px maka jarak antara suatu element menempel,. Dan kalau contoh-nya seperti diatas kita menggunakan -17px maka kita akan menarik jarak-nya sampai keluar batas dan melewati nomor didepannya. . . karena #navigation li adalah pembungkus #navigation li a jadi posisinya hanya didepan angka-nya, dan untuk mengakalinya agar border dan background li tadi sampei di belakang angka kita pakai margin:-17... dan ingat, penulisan-nya searah jarum jam berputar... >> sekarang kita mengatur # navigation li a Untuk #navigation li a ini kita tinggal mengatur warna link-nya saja. . . contohnya: #navigation li a { color:yellow } SELESEI untun penjelasan dari CSS NAVIGASI dan cukup sekian sob. Semoga bermanfa'at dan wassalam. . . . .
Bagikan ke Facebook Bagikan ke Twitter

Komentar

26 tanggapan untuk "Cara membuat tema css mwb dengan mudah ( full tutorial css mywapblog bag:3 )"

budi prasetiyo utomo pada 16:57, 18-Apr-13

mantep sob

Rhosad Holian pada 10:24, 16-Mei-13

Bingung....

http://rhosad.pun.bz/jenis-jenis-hacker.xhtml

Aqus Q Rastafara pada 08:19, 25-Jun-13

nulis ceker b3bek ditunggu kunbalnya

Pompom Knight pada 13:46, 26-Jun-13

mrgreenmrgreenmrgreenmrgreenmrgreenmrgreenmrgreenmrgreenmrgreenBingung tapi unik
kunbal ya
pompom.mywapblog.com

fizal pada 01:40, 06-Jul-13

pusing bossssss

nunut dak cipeundeuy pada 08:40, 31-Agu-13

TERBAIK...
Semoga dg artikel d ats bs bermanfaat...
Tapi ane masih bingung ?!?!.

sv60v3 pada 04:44, 18-Sep-13

sipp dah ommm dari pada blog ku yg amburadul gitu
ni kalo ngak percaya di tengok http://sv60v3ngeblog.mywapblog.com/

Agus Saputra pada 07:11, 18-Nov-13

follow succes Sob ...

Di tunggu kunbaL & follbackNya...

wink

Agus Saputra pada 07:12, 18-Nov-13

Bermanfaat gan,

follow succes ...

Di tunggu kunbaL & follbackNya...

wink

Mardi pada 06:34, 13-Apr-14

Jadi bingung'??:-q

Donnie Rappz pada 10:22, 13-Apr-14

Thank's sob di tunggu kunbalnya..

delly pada 13:46, 14-Apr-14

lumayan bingung gann...

Orang Kece pada 00:04, 12-Mei-14

kunbal ya sob
kurang vaham ane biggrin

trik dptin pulsa hanya ngeklik site di http://rakarakha.mywapblog.com

Tomy rafael pada 08:17, 22-Mei-14

infonya sngt membantu gan

acmad sidiqi pada 14:23, 05-Jun-14

ya bermanfaat dan pussing sob biggrin
hehehe

Willyantoisman pada 09:06, 14-Jun-14

pusing liatnya

Eka Cahya Gumilar CG pada 05:49, 16-Jul-14

tulisannya kurang enak dibaca gan, jadi bingung saya bacanya biggrin

AnDRY pada 06:12, 17-Agu-14

pussing kepala bacanya gan

cukacuka pada 11:11, 09-Sep-14

ijin nyimak gan smile

putra cyber arayy pada 08:59, 18-Sep-14

bingung sob smile
di tunggu kunbal + follback nya sob. smile

Sunartono pada 20:15, 09-Des-14

Bingung gan gw liat tulisannya

sobolana abidina pada 20:01, 21-Des-14

tq gan kunbalnya ya ke blog ku yg reot hehehw

MasterDred pada 22:19, 27-Jan-15

Panjaaaang. . .izin bookmark
8)

Victor Immanuel pada 18:43, 06-Mar-15

Mantep bro tpi dikit bngung.d'tnggu kunbalnya

HartonoOutsider pada 13:06, 09-Apr-15

Bingung??

Kagami Taiga pada 10:44, 12-Mei-15

mantep ,, di tunggu kunbal nya

Langganan komentar: [RSS] [Atom]

Komentar Baru

[Masuk]
Nama:

Komentar:
(Beberapa Tag BBCode diperbolehkan)

Kode Keamanan:
Aktifkan Gambar


 
Kembali ke Atas