Old school Swatch Watches

Cara membuat css mwb dengan mudah bag 5 (Recent Post)

Assalamualaikum wr.wb

Sekarang kita lanjutkan topik cara membuat tema css mwb dengan mudah ini..

Masih dalam area .post dan sekarang kita menuju RECENT POSTS

Recent posts adalah area yang muncul dibawah artikel kita saat pengunjung akan menuliskan komentar atau pengunjung telah meng-klik link dari postingan. Dan dalam pembahasan kali ini kita akan mengatur judul atau tulisan recent posts itu sendiri. Dan kita pakai selector dalam css mwb ini .post h3

Lihat contoh:

.post h3 { background:black; border:1px solid green; margin:0px; padding:5px 2px; text-align:center; text-transform:uppercase; color:red }

Dari contoh diatas padding:5px 2px agar jarak antara border atas bawah kedalam isi atau text recent posts agak menjauh, jadi seperti dalam judul artikel .post kita. Bacanya atas bawah berjarak 5px dan kiri kanan berjarak 2px, dan ingat padding adalah jarak dari luar suatu element kedalam isi, dan juga antara kiri kanan 2px adalah alternatif jika text-nya terlalu panjang agar tidak melewati batas yang sudah kita atur sebelumnya..

Sekarang kita akan mengatur bagian bawah text recent posts

Selector yang kita gunakan adalah .post ol dan .post li Saja..

Mungkin ol baru dalam pembahasan kali ini, sedikit penjelasan dalam css ini adalah ol pembungkus li dan li pembungkus li a, mudahnya ol diluar li dan li diluar li a


Saya rasa sudah jelas,karena bukan html yang kita bahas,tapi kita membahas artikel cara membuat tema CSS MWB Dengan mudah...

Perhatikan contoh dibawah ini, kita mengatur bagian bawah recent posts

Di sini aku akan memakai li saja, jadi ol tidak perlu diatur, karena dari awal kita tidak memakai ol dalam css mwb ini, karena jika kita mengatur ol, maka penjelasanku dari awal tentang category, navigasi, dan blogroll akan jadi berantakan. . . .

Contoh:

.post li { list-style:none; background:black; border:1px solid green; margin:1px 3px 1px -17px; text-align:center}

dan

.post li { list-style-image:url(alamat gambar); list-style-position:inside; background:black; border:1px solid green; margin:1px 3px 1px -17px; text-align:left}

Dari kedua contoh diatas, pertama kita tanpa menggunakan nomor urut atau gambar didepan dan text-nya kita atur ditengah, dan yang kedua kita mengubah angka jadi gambar dan text-nya kita atur di samping kiri agar merapat. SILAHKAN kreasikan sendiri, dan untuk warna link-nya kita pakai SELECTOR .post li a..

contoh:

.post li a { color:yellow }

SELESEI..


Kita masuk tahap berikut-nya

footer

Lihat contoh dibawah ini

#footer { background:black; border:1px solid green; padding:3px; margin:0px; text-align:center }

Dalam contoh diatas, bagian footer dengan pembahasan kemarin di header SAMA. Hanya SELECTORnya saja yang berbeda,.

Untuk warna link-nya

contoh:

#footer a { color:white }

Dan untuk text secara keseluruhan

#footer p a { color:white }


SEKIAN penjelasan dari cara membuat tema css mwb dengan mudah ( full tutorial css mywapblog ) bagian ke-5 ini..

Semoga bermanfa'at

Back to posts
Comments:
[2015-09-09 14:02] Rafli wijaya:

Ditunggu Kunbal+ Follownya Di Blog Ane :right: http://rafliwijaya.mywapblog.com

[2015-09-09 14:01] Rafli:

Ditunggu kunbal+follownya di blog ane :right: http://rafliwijaya.mywapblog.com

[2015-08-07 23:37] Titin Nekori:

saya baru gan !! Tidak mengerti benar :( terimakasih

[2014-05-22 22:59] irfan catur pamungkas:

nyimak ajah sobb .. :mrgreen: :lol:

[2014-05-07 18:16] Raydinamixa:

Mantab gan postingannya

[2013-11-28 01:52] putuadimarta:

siip mantap bos trick nya,

[2013-11-24 03:00] Wearing Me Out:

Hadir silaturahmi..

[2013-10-08 21:03] febrianmaulana :

Thanks tipsnya
jangan lupa follback

[2013-09-12 05:46] didin adi hermawan:

pusing bangets tolong jelaskan di blog saya ya.

[2013-08-31 01:32] Nunut dak cipeundeuy:

Blog ente udh ane follow...
Di tggu jg folback-nya.
Semoga blog ente makin ramai.


Post a comment

Home
51385