Kustomisasi Sidebar Title

Apakah title sidebar Anda biasa-biasa aja? Dan ingin merubahnya agar terlihat menarik.Tepat sekali Anda perlu mekustomisasi title sidebar Anda.
Kustomisasi ini sebenarnya dapat membuat keseragaman dalam sidebar title. Disini kita dapat memberikan garis batas serupa kotak, atau dengan background warna, dan background gambar.
Baiklah kita mulai:

1. Masuk ke 'Tata Letak'
2. Klik 'Edit HTML'
3. Jangan lupa back up dulu templatenya
4. Cari kode ini:

.sidebar h2 {
margin:0;
padding:0 0.2em;
line-height:2em;
}

5. Kalau belum tersedia, silahkan copas kode diatas dan tempatkan persih dibawah kode berikut:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

Tepatnya akan seperti ini:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar h2 {
margin:0;
padding:0 0.2em;
line-height:2em;
}

6. Nah, sekarang kita pelajari dulu dengan model border. Caranya tambahkan kode berikut
border:1px solid #kode warna; tepat dibawah .sidebar h2 {
Sebelumnya pilih kode warna yang ingin Anda masukan. Contohnya seperti ini:

.sidebar h2 {
border:1px solid #190101;
margin:0;
padding:0 0.2em;
line-height:2em;
}

7. Untuk model background warna. Tambahkan kode berikut background:#kode warna; tepat dibawah .sidebar h2 {
Sebelumnya pilih kode warna yang ingin Anda masukan. Contohnya seperti ini:

.sidebar h2 {
background:#f3172c;
margin:0;
padding:0 0.2em;
line-height:2em;
}

8. Penggabungan Antara model border dengan background warna.

.sidebar h2 {
border:1px solid #190101;
background:#f3172c;
margin:0;
padding:0 0.2em;
line-height:2em;
}

9. Dan untuk model gambar. Tambahkan kode berikut background:url(URL OF THE PICTURE)no-repeat; tepat dibawah .sidebar h2 {
Tepatnya seperti ini:

.sidebar h2 {
background:url(URL OF THE PICTURE)no-repeat;
margin:0;
padding:0 0.2em;
line-height:2em;
}

10. Jangan lupa Save Template

Ok sekian dulu dan selamat mencoba....

Readmore »»

Kustomisasi Sidebar Title

Cara Membuat Box Pemisah Pada Sidebar

Kalau tadi kita membahas tentang membuat box pemisah pada postingan, sekarang mari belajar membuat box pada sidebar. Lansung saja, simak baik-baik:

1. Masuk ke 'Tata Letak'
2. Klik 'Edit HTML'
3. Jangan lupa setiap melakukan perubahan pada edit HTML, selalu back up template.
4. Cari kode berikut:

#sidebar-wrapper {
background:#d8d7d6;
border: 1px solid #d8d7d6;
width: 220px;
float: $endSide;
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 */
}

5. Kemudian hilangkan kode yang berwarna merah. Dan hasilnya akan seperti ini:

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

6. Sesudah itu, cari kode berikut

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

7. Gantikan kode diatas dengan kode dibawah ini

.sidebar .widget {
background:#d8d7d6;
border: 1px solid #d8d7d6;
margin:0 -5px 1.5em -5px;
padding:5px 7px 5px 7px;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

8. Selesai, dan Save Template

Selamat Mencoba

Readmore »»

Cara Membuat Box Pemisah Pada Sidebar

Membuat Box Pemisah Pada Postingan

Kalau Anda melihat Blog saya maka Anda akan melihat bagaimana adanya Box pemisah pada postingan, seperti gambar dibawah ini.

Cara untuk membuat box pemisah pada postingan, sebagai berikut:

1. Masuk ke 'Tata Letak'
2. Klik 'Edit HTML'
3. cari kode berikut:

#main-wrapper {

4. Taruh kode berikut persih dibawah kode #main-wrapper {

/*background:#a8a7a8;
border: 1px solid #d8d7d6;
padding-right:7px;
padding-left:7px;*/

{Seperti biasa ganti kode warna dengan pilihan Anda}

5. Lalu cari kode

h2.date-header {
margin:1.5em 0 .5em;

{Ubah kode warna hijau menjadi margin:0 0 .5em;}
Tak hanya itu, tetapi juga tambahkan kode yang sama seperti pada main-wrapper. Tetapi Hilangkan /* */. Maksudnya seperti ini:

background:#a8a7a8;
border: 1px solid #d8d7d6;
padding-right:7px;
padding-left:7px;

Dan hasilnya akan seperti ini:

h2.date-header {
margin:0 0 .5em;
background:#a8a7a8;
border: 1px solid #d8d7d6;
padding-right:7px;
padding-left:7px;
}

6. Terakhir cari kode

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;

7. Lalu taruh kode yang sama seperti pada h2.date-header {

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.5em;
h2.date-header {
margin:0 0 .5em;
background:#a8a7a8;
border: 1px solid #d8d7d6;
padding-right:7px;
padding-left:7px;
}

8. Selesai, kemudian Save Template

Selamat Mencoba

Readmore »»

Membuat Box Pemisah Pada Postingan