[Tutorial pack] dasar html layout.

Tutorial pack wordpress #1

kumpulan tutorial untuk membuat postingan jadi menarik

 

1. cara membuat font/teks menjadi besar sesuai yang kamu inginkan.
2. cara merubah bentuk font sesuai keinginan (font-family: seperti, arial, courier, calibri, times new roman, dll)
3. cara membuat background pada tulisan/font saat posting.
4. cara membuat border pada tulisan.

well, hanya ingin posting random saja sebenarnya, tadinya mau buat layout, tapi kayaknya gk ada yang tertarik hehe. oke, aku mulai dari yang pertama dulu..

– cara membuat font membesar sesuai keinginan.

biasanya pada wordpress telah tersedia tool untuk memperbesar font, pada kolom paragraf. tapi font yang di perbesar terkadang tidaklah sesuai dengan apa yang kita inginkan. jadi untuk membuat font seperti judul dipostingan ini adalah:

pertama, pastikan saat kalian ingin posting, klik pada bagian ‘teks‘

well, lalu tuliskan kode seperti di bawah ini:

1. <span style=”font-size:50px;”>tuliskan katamu disini</span>

2. <p style=”font-size:50px;”>tuliskan katamu disini</p>

3.

tuliskan kalimatmu disini

keterangan: ada 3 cara di atas, kalau cara yang pertama dengan <span> itu untuk memperbesar kata, artinya hanya satu kalimat tidak bisa sampai ke tulisan yang di spasi dan seterusnya, begitu juga dengan <p> jadi jika ingin tulisan font perbesar tetap kontinu (berlangsung terus menerus) gunakan yang

pada “font-size:50px” kalian bisa rubah sesuai keinginan kalian. jika ingin merubah warna, ketebalan (bold), atau italic, kalian bisa kembali ke postingan ‘visual’ dan kembali memposting seperti semula. bisa juga dengan code sih, tapi menurutku itu cara yang mudah, hehe.

 

– tutorial kedua, membuat bentuk font sesuai keinginan.

masih sama seperti cara yang pertama, kembalikan postingan anda ke mode ‘teks‘ dan tuliskan kode seperti dibawah ini,

1. tuliskan katamu disini (contoh)

2.

tuliskan katamu disini

(contoh)

3.

tuliskan kalimatmu disini

(contoh)

keterangan: kode-kode diatas tolong baca keterangan pertama biar tahu mana yang harusnya digunakan. font-family (kumpulan bentuk tulisan) bisa kalian lihat di pc kalian masing-masing, (bisa dilihat di MWords atau photoshop dll)

 

– tutorial ketiga, memberi background pada tulisan/font;

lagi-lagi, ini sama seperti cara-cara di atas, pastikan postingan anda ke mode ‘teks’ tuliskan kode:

1. <span style=”background:pink; padding:5px;”>tuliskan katamu disini</span> contoh

keterangan: pada kode diatas, kenapa aku kasih “Padding:5px;” karena guna padding adalah untuk memberi jarak pada tulisan dan background, jika tanpa padding maka tulisan yang diberi background akanseperti ini sedangkan yang diberi padding akan seperti ini. dan terlihat lebih rapi, makin besar ukuran padding (5px, 10px, 15px) makin renggang pula jarak tulisan dan background, biasanya berakibat pada tulisan diatasnya atau dibawahnya jadi tertutup background.

lalu, bagaimana untuk memberi background agar tetap kontinu pada tulisan saat di spasi hingga ke akhir postingan?

caranya, gunakan kode

seperti di bawah ini:

 

2.

tuliskan kalimatmu disini

contoh: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend malesuada vestibulum.
Suspendisse eleifend lacinia congue. Phasellus tempus est nec tortor ultricies porta. Aenean vitae nulla elit, in viverra enim. Integer ornare scelerisque justo vel ullamcorper.

pastikan, warna font dan warna background serasi, mengubah warna font bisa dengan cara manual, blok semua tulisan dan ubah seperti biasanya kamu mengubah warna tulisan di kolom ‘visual’ dan tool A. Nah, untuk mengganti warna background, sesuai keinginan aja, kalo warna mejikuhibiniu terlalu biasa, kalian bisa menggunakan kode warna (disini) dan dengan itu maka kode akan seperti,

 

2.

background:#aaaaaa; padding:5px;”>tuliskan kalimatmu disini

 

– Tutorial keempat, Membuat border pada tulisan.

cara ini hampir seperti cara background di atas, pastikan postingan anda ke mode ‘teks’. gunakan kode:

1. <span style=”border:solid pink; padding:5px;”>tuliskan katamu disini</span> contoh

2.

double pink; padding:5px;”>tuliskan kalimatmu disini

contoh: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend malesuada vestibulum.
Suspendisse eleifend lacinia congue. Phasellus tempus est nec tortor ultricies porta. Aenean vitae nulla elit, in viverra enim. Integer ornare scelerisque justo vel ullamcorper.

sebenarnya ada bermacam mode background, kalian bisa ganti kata ‘solid‘ menjadi ‘double’ dan lain-lain (akan aku bahasdi postingan lain) nah, keterangan di atas sama persis keterangan pada cara memberi background. tolong dibaca 🙂

well sudah selesai untuk part 1, jika semua kode-kode diatas digabung menjadi satu dan berbentuk:

1. <span style=”font-size:30px; font-family:orator std; background:yellow; border:solid blue; padding:5px;”>tulis disini</span>

2.

tulis disini

maka hasil akhir akan seperti ini^^

septa note: jika ada pertanyaan jangan segan untuk tanya 🙂 dan berkomentar jika ini membantu hehe, atau ada kritik/saran/tambahan? dan tolong jangan copy postingan/cara ini tanpa izin saya^^ atau beri source(tauntan menuju blog saya) diakhir postingan kalian^^ pls repect me and i will respect you back!