Border pada widget, , post entri & date,

Tweet

Kak Jie macam mana nak buat template yang ada kotak²?

Angriani adalah junior blogger yang gigih, semua ceruk template dia ingin belajar. Dalam banyak² murid saya ( cesss.........perasan tu..kehkehkeh ) dia yang paling aktif. Tak cukup di YM, di blog pun dia akan tetap bertanya. Saya sangat senang atas sikapnya yang ingin belajar.

Dia menggunakan template seperti saya dan diubahsuai warna mengikut kegemarannya .

Untuk membuat border pada sidebar atau pos entri. Mula² check dulu code² CSS untuk setiap widget,profile,blog archive , labels berdasarkan widget² yang terdapat di sidebar kita, contoh di bawah ini:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='LinkList4' locked='false' title='Kandungan Blog' type='LinkList'/>
<b:widget id='Profile1' locked='false' title='Tentang Aku' type='Profile'/>
<b:widget id='HTML5' locked='false' title='Apa Kata Mereka' type='HTML'/>
<b:widget id='Feed1' locked='false' title='Entry Terkini' type='Feed'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='LinkList1' locked='false' title='Rujukan' type='LinkList'/>
<b:widget id='HTML8' locked='false' title='Advertlets' type='HTML'/>
</b:section>

Tengok id masing2 kita akan dapati widget HTML1,HTML2...etc, label,Linklist, dan seterusnya adalah kunci untuk menambahkannya di kod CSS. Setiap kali kita menambah new page element, kita perlu tambah mengikut bilangan widget yang kita ada.

Cari code css seperti dibawah ini dan tambahkan kod berwarna merah dibawahnya.

#sidebar-wrapper {
width: 200px;
float: right;
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 */
}

#Profile1 {
padding: 5px 10px 0 10px;
background: #E1F4E1;
border: solid #b0b0b0 2px;

}
#Label1 {
padding: 5px 10px 0 10px;
background: #E1F4E1;
border: solid #b0b0b0 2px;
}

#Feed1 {
padding: 5px 10px 0 10px;
background: #E1F4E1;
border: solid #b0b0b0 2px;
}
#HTML1,#HTML2,#HTML3,#HTML4,#HTML5,#HTML6,#HTML7,#HTML8, {
padding: 0 5px 0 10px;
border: solid #b0b0b0 2px;
background: #E1F4E1;

}

#Text1 {
padding: 0 5px 0 10px;
border: solid #b0b0b0 2px;
background: #E1F4E1;

}

#BlogArchive1 {
padding: 0 5px 0 10px;
border: solid #b0b0b0 2px;
background: #E1F4E1;

}

#LinkList1, #LinkList2, #LinkList3 , #LinkList4{
padding: 0 5px 0 10px;
border: solid #b0b0b0 2px;
background: #E1F4E1;

}

Colour border dan background boleh ditukar mengikut kesesuaian blog - dapatkan code untuk colour di SINI.

Save Templates

Kalau nak tambah border dibahagian Post dan juga Date. Cari Headings dan Post dan tambahkan code border dan backgroundnya seperti di bawah.

* Headings
----------------------------------------------- */


h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
padding: 0 5px 0 10px;
border: solid #b0b0b0 2px;
background: #E1F4E1;
}


/* Posts
-----------------------------------------------
*/


.post {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
padding: 0 5px 0 10px;
border: solid #b0b0b0 2px;
background: #E1F4E1;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
border: solid #b0b0b0 2px;
background: #E1F4E1;
}


Code berwarna merah itu adalah code yang kita tambah, code warna untuk background boleh ditukar mengikut kesesuaian warna tema blog masing². - dapatkan code untuk colour di SINI.

border: solid #b0b0b0 2px;
background: #E1F4E1;

#b0b0b0 - code warna border yang perlu ditukar.
2px - saiz tebalnya border tersebut, ditukar mengikut kesesuaian masing²
#E1F4E1 - code warna background yang boleh ditukar



Klik SINI untuk tutorial yang lain.