Tutorial : Border Berbentuk Berserta Background Untuk Sidebar Title

Assalamualaikum. Selamat pagi. Salam satu Malaysia! Pagi ni aku nak buat post tutorial border berbentuk berserta background untuk sidebar korang.

MACAM INI

Firtsly open DASHBOARD > TEMPLATE > EDIT HTML > PROCEED > EXPAND WIDGET

Then tekan Ctrl+F serentak untuk memudah kan pencarian. Copy dan cari kod di bawah ni.

/* Headings

----------------------------------------------- */   atau  h2 {

Lepas tu copy kod dibawah ini dan paste DI BAWAH kod h2 {

text-align:center;

background-image:url(URL BACKGROUND);

border: 1.5px solid #000000; 

-moz-border-radius: 35px;

border-radius: 35px;

padding: 3px;

MERAH : Boleh klik SINI untuk dapatkan url background. Cara-cara mendapatkan url bacground adalah seperti dibawah ini.

TAIPKAN KEYWORD YANG DIINGINI, KEMUDIAN SEARCH.

Lepas dah jumpa background yang diingini, copy link url background tersebut.

COPY LINK YANG BERTANDA DIRECT LINK

Kemudian paste di ruangan yang diarahkan seperti di atas. Nanti di ruangan URL BACKGROUND tersebut akan jadi macam ni:

background-image:url(http://i44.photobucket.com/albums/f40/messyjessett/greenpolka.jpg)

OREN : Saiz border. Makin besar nombor, makin besar ketebalan border.

BIRU : Jenis border. Boleh ditukarkan dengan kod lain seperti di bawah ini.

PURPLE : Kod warna border. Boleh pilih di SINI.

PINK : Bentuk border. Boleh copy kod macam mana bentuk border yang korang nak dan gantikan dengan kod pink di atas. 

HIJAU : Saiz keluasan border. Makin besar nombor, makin besar keluasan border.

JENIS-JENIS BENTUK BORDER

-moz-border-radius-bottomright: 50px;

border-bottom-right-radius: 50px;

-moz-border-radius-bottomright: 50px 25px;

border-bottom-right-radius: 50px 25px;

-moz-border-radius-bottomright: 25px 50px;

border-bottom-right-radius: 25px 50px;

-moz-border-radius: 1em 4em 1em 4em;

border-radius: 1em 4em 1em 4em;

-moz-border-radius: 25px 10px / 10px 25px;

border-radius: 25px 10px / 10px 25px;

Lepas dah settle dengan kod, click preview. Kalau dah puas hati just save.


*Selamat meng-edit! ^^