Cari Artikel Blog Ini

Total Tayangan Laman

SIDEBAR TAMPIL DALAM BENTUK KOTAK-KOTAK

Coba anda perhatikan sidebar EPG Studio, terlihat dalam bentuk kotak-kotak yang terpisah. Fungsinya hanya untuk penampilan agar telihat lebih rapih dan tentunya akan mempercantik penampilan blog.
Cara membuatnya tidak terlalu sulit, anda hanya perlu mengotak-atik kode-kode HTML pada blog anda.
Kalau anda ingin melanjutkan cara membuatnya, ikuti langkah-langkah berikut ini :
Jangan lupa sebelum anda melakukan perubahan pada kode-kode HTML, Backup Template terlebih dahulu dengan cara Download Template Lengkap dan simpan pada komputer anda. Ini kita lakukan untuk menjaga agar jika anda tidak berhasil dalam melakukan pengeditan dapat mengembalikan kepada keadaan semula.
  1. Cari kode seperti di bawah ini :

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


  2. Dari kode widget diatas menunjukan bahwa sidebar widget (halaman sidebar) dan main widget (halaman postingan) memiliki penampilan yang sama.
    Jadi agar terlihat dalam bentuk kotak kotak, anda harus memisahkan kedua kode widget tersebut menjadi seperti di bawah ini : (anda dapat mengcopy kode dibawah ini)

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


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


  3. Sekarang anda fokuskan pada kode sidebar.
    Agar penampilannya terpisah dalam bentuk kotak-kotak, anda harus memvariasikan kode-kodenya seperti contoh dibawah ini :


    .sidebar .widget{

    background:#0000b3;
    border:1px dotted #C3D9FF;
    margin:0 0 1.5em;
    padding:0.5em;
    }


    Kode diatas mengandung arti :latar belakang sidebar berwarna biru tua, border berupa garis putus-putus dengan lebar 1 px dengan warna biru muda (lebar border inilah yang membuat sidebar terlihat dalam bentuk kotak-kotak), jarak antara widget sebesar 1.5em dan padding 0.5em.
    Kode tersebut dapat anda ubah sesuai dengan keinginan dan kreatifitas anda.

  4. Lakukan hal yang sama untuk mengubah penampilan main widget. Pilih variasi warna yang cocok agar penampilan semakin cantik.

  5. Selesai...!!!

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
7 Comments

7 komentar :

EPG Studio mengatakan...

:)) :)] ;))

WDnur mengatakan...

Wah, ini harus dilakukan dengan teliti ya tentunya, karena salah sedikit saja gagal. Trima kasih untuk tutornya. Akan dicoba

Mamanya Zaheer mengatakan...

Mas, tanya nich, kalo kotaknya pengen berupa garis (bukan titik-titik), kata 'dotted' nya diganti sama apa? Saya coba pake 'lined' tp malah gak muncul. Trus, kalo boleh aku minta rumus kode warna-warna dunkz. Thanx yaa

SOCCER PREDICTION mengatakan...

sangat membantu bgt

obat tradisional mengatakan...

makasih infonya

xamthone plus mengatakan...

aku baru tahu? makasih infonya

muklisin muklisin mengatakan...

sidebar kota-kotaknya tidak bisa muncul mas bos

Poskan Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!