WELCOME, READERS!

I'm Lala. 8 years in blogging based in Malaysia. English writer. Bachelor's degree in Communication at Universiti Putra Malaysia. Former Radio Presenter at PutraFM and Former Journalist Trainee at BERNAMA. I currently work as Assistant Producer at Bernama News Channel (astro ch 502).

View my complete profile


For advertising, collaboration, sponsorship, event coverage, product review etc, kindly reach me at lalarahim@hotmail.com


WELCOME, READERS!

I'm Lala. 8 years in blogging based in Malaysia. English writer. Bachelor's degree in Communication at Universiti Putra Malaysia. Former Radio Presenter at PutraFM and Former Journalist Trainee at BERNAMA. I currently work as Assistant Producer at Bernama News Channel (astro ch 502).

View my complete profile

For advertising, collaboration, sponsorship, event coverage, product review etc, kindly reach me at lalarahim@hotmail.com

Belajar cara buat border dalam blog

by - June 30, 2015
Displaying capture-20150619-141017.png

Thank you for the email. (Malay version tutorial)

Mula-mula sekali anda perlu tahu html code tentang border.


Example:
border: 1px solid #000000

Untuk buat border melintang (horizontal) nama kod border ialah:
border-bottom // border-top
Untuk buat border menegak (vertical) nama kod border ialah:
border-left // border-right

Jadi contohnya, ||  border-bottom: 1px solid #000000  ||

Faham?

Lagi satu border jenis apa yang kita mahukan:
solid // dashed // dotted // double // groove // ridge // inset // outset

Jadi tukarkan sahaja jenis-jenis border tu, contoh macam ni, || border: 1px dotted #000000 ||

Lepas itu, berapa tebal border yang kita nak, adjust the number, 1 - 10 px

Okay dah jelas tentang kod html border.


Dalam blog saya, saya banyak menggunakan border sebab nak buat simple. Tapi maaf, title pada sidebar widget saya tu agak complex kalau nak ajar, saya cuba yang terbaik ye.

Cara nak buat border pada header ada 2:

Pertama, cari anda punya header code dalam html template. Ini contoh saya punya header code. Cuma masukkan sahaja html code border yang saya dah ajar tadi. Kalau border tu tak kena tepat bawah gambar header, korang letaklah padding: -10px atau padding:10px Nombor tu boleh adjust, ada negative / positive So kalau lebih buat negative -10px, kalau border tu terkena pada gambar header buat (positive) 10px. Cuma kena pandai main html code.

 <a expr:href='data:blog.homepageUrl' style='display: block;'>
         <img src='http://1.bp.blogspot.com/-Taj3Q_xKBPA/VTpeFTm0XBI/AAAAAAAAHjI/ePPb_kqnh6A/s1600/Header%2BBlog%2B2015.png' style='display: block; border-bottom: 1px solid #000000;'/>
        </a>


Cara kedua, edit sendiri dekat photoshop kalau mahir buat header sendiri. Sebenarnya header saya tu saya buat sendiri je guna photoshop sebab malas nak pakai code, leceh.


Cara nak buat border pada sidebar widget:

Baiklah, mula sekali anda kena tahu sidebar widget anda pada sebelah kanan atau sebelah kiri. Kalau saya punya blog, kiri kanan pun ada sidebar widget. Cara complex, pergi dekat template lepastu html,
Jikalau sidebar widget anda pada sebelah kiri, search ctrl+f dan cari .column-left-inner masukkan border code dalam column tu, yang kita dah belajar di atas macam gini:
border-right: 1px solid #dddddd
Jikalau sidebar widget anda pada sebelah kanan pula search ctrl+f .column-right-inner border-left: 1px solid #dddddd

-- Boleh tukar warna apa yang anda mahu di http://html-color-codes.info/


Cara nak buat border di antara sidebar title, 

ni complex sikit code dia. Saya punya code banyak kot pakai untuk buat title semata. Sidebar title korang h2 ke? atau guna h1? Kalau saya punya guna h2 so search ctrl+f h2 Jadi ini saya punya code tapi saya tunjukkan yang penting sahaja tak perlu copy tau. Sebab dalam blog ni kekurangan dia tak boleh copy, saya tak benarkan copy paste design blog saya haha. So taip la sendiri rajinkan diri. Berikut adalah code yang perlu anda tambah.

Nampak tak ada tambahan code iaitu h2.title dan h2.title span
Untuk h2, jangan buang code yang sudah ada di dalam html template anda, cuma tambahkan sahaja codes yang ada di bawah. Ingat, jangan buang code yang telah tersedia nanti font semua hilang.
h2 {
text-align:center;
background: #eee;
height: 1px;
position: relative;
line-height:3px;
}
h2.title {
margin-top: 30px;
margin-bottom: 20px;
}
h2.title span{
background:white;
padding-top: -30px;
padding-left: 10px;
padding-right: 10px;
position: relative;
z-index: 5;
}

Okay apabila dah siap buat tambahan code untuk sidebar title, search ctrl+f <data:title>
Haa replace dengan code di bawah. Semua tau, semua widget dalam sidebar anda.


About The Author

Malaysia Blogger. Assistant Producer at Bernama News Channel. Bachelor's Degree holder in Communication, Universiti Putra Malaysia.

You May Also Like

1 comments