Dec21

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

Diposting oleh TriyaMobile • Di: Trick dan Tips
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

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

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

mantep sob

10:24, 16-Mei-13
Rhosad Holian

Bingung....

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

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

nulis ceker b3bek ditunggu kunbalnya

13:46, 26-Jun-13
Pompom Knight

mrgreenmrgreenmrgreenmrgreenmrgreenmrgreenmrgreenmrgreenmrgreenBingung tapi unik
kunbal ya
pompom.mywapblog.com

01:40, 06-Jul-13
fizal

pusing bossssss

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

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

04:44, 18-Sep-13
sv60v3

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

07:11, 18-Nov-13
Agus Saputra

follow succes Sob ...

Di tunggu kunbaL & follbackNya...

wink

07:12, 18-Nov-13
Agus Saputra

Bermanfaat gan,

follow succes ...

Di tunggu kunbaL & follbackNya...

wink

06:34, 13-Apr-14
Mardi

Jadi bingung'??:-q

10:22, 13-Apr-14
Donnie Rappz

Thank's sob di tunggu kunbalnya..

13:46, 14-Apr-14
delly

lumayan bingung gann...

00:04, 12-Mei-14
Orang Kece

kunbal ya sob
kurang vaham ane biggrin

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

08:17, 22-Mei-14
Tomy rafael

infonya sngt membantu gan

14:23, 05-Jun-14
acmad sidiqi

ya bermanfaat dan pussing sob biggrin
hehehe

09:06, 14-Jun-14
Willyantoisman

pusing liatnya

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

tulisannya kurang enak dibaca gan, jadi bingung saya bacanya biggrin

06:12, 17-Agu-14
AnDRY

pussing kepala bacanya gan

11:11, 09-Sep-14
cukacuka

ijin nyimak gan smile

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

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

Langganan komentar: [RSS] [Atom]

Komentar Baru

[Masuk]
Nama:

Komentar:
(Beberapa Tag BBCode diperbolehkan)

Kode Keamanan:
Aktifkan Gambar