Tutorial Border Pada Template

Lain orang lain seleranya, ada yang suka template mereka berpetak-petak dan ada pula yang tidak suka. Kali ini aku ingin kongsikan bagaimana hendak menguruskan border pada template memandangkan ada yang request untuk tutorial ini. Seperti tutorial yang lepas mengenai Tutorial Border yang beraneka jenis ianya boleh diguna pakai untuk template dan juga boleh dibuang bagi mereka yang tidak suka.

Setiap element yang ada pada template boleh diletakkan border seperti header, sidebar, main-wrapper (posting), footer, post footer, dan lain-lain. Kita boleh melihat kebanyakan blog kadang² menggunakan border hanya pada header, dan ada juga template yang menggunakan border hanya pada sidebar. Berikut adalah cara² mengubah, menambah atau membuang border tersebut. Sebelum memulakan tutorial ini sila kenal pasti jenis-jenis border tersebut pada Tutorial Border di sini.

1. Login Ke ID Blogger atau terus ke Dashboard
2. Pilih Layout kemudian ke Edit HTML

Gantikan ketebalan border tersebut serta jenisnya.
Contoh : border: 5 px dashed $bordercolor;
($bordercolor juga boleh diganti dengan code warna)

Padam tulisan tebal di bawah jika ingin membuang border tersebut atau gantikan kepada
border: 0px solid $bordercolor;


Border Pada Header
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}


Border Pada Main-Wrapper (Posting)
#main-wrapper {
width: 410px;
float: $startSide;
border: 1px solid $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Border Pada Sidebar
#sidebar-wrapper {
width: 220px;
float: $endSide;
padding: 5px;
border:1px solid $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#left-sidebar-wrapper {
width: 220px;
float: $endSide;
padding: 5px;
border:1px solid $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


Border Pada Footer
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
border:1px solid $bordercolor;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Setelah selesai mengubah, menambah atau membuang kesemua border pada Edit HTML. Save Template dah lihat Hasilnya.

Selamat mencuba!!!