Tutoria: Blog | Jenis-jenis border untuk sidebar, post dan blockquote

Feb

Saturday,

9,

Salam to all readers

Untuk entry kali ni, dil nak share pasal border yang korang boleh gunakan

untuk mencantikkan blog korang..

Border ni korang boleh guna untuk sidebar, post ataupun blockquote..

Contohnya korang boleh tengok border yang dil guna untuk tajuk sidebar dil..

*

*

Kat bawah ni adalah diantara jenis-jenis border yang korang boleh pilih..

Pilih border yang korang suka

Step 1 :

Dashboard > design > edit html > tick expand widget template

Tekan Ctrl + F

Untuk kotak sidebar/ tajuk sidebar

*setiap template adalah berbeza

cari : h2 { 

ataupun .sidebar .widget{

ataupun .sidebar h2 {

Untuk tajuk post

h3.post-title {

Untuk blockquote

.post blockquote {

Step 2 :

Copy dan paste kan coding kat bawah ni, letak selepas coding yang korang search tadi

(A)

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

border-bottom-right-radius: 50px; 

(B)

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

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

(C)

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

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

(D)

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

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

(E)

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

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

(F)

-moz-border-radius: 35px;

border-radius: 35px;

Selepas tu, tekan preview..
Kalau ok tekan SAVE

Ini adalah contoh border yg dil gunakan untuk tajuk sidebar dil..

.sidebar h2 {

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

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

text-align: center;

background:#FAAFBE;

margin:0;

padding:0 0.2em;

line-height:1.5em;

}

Untuk rujukan..


Cara nak buat border melengkung untuk sidebar

Cara nak buat border untuk sidebar

Background untuk Sidebar Title


nota kaki:

credit to Yqnq ellyana
for the border..^^