Headlines News :
Home » » Sidebar Nampak Kotak-kotak

Sidebar Nampak Kotak-kotak

Bagian sidebar bawaan dari bloger mungkin kurang menarik menurut perhitungan pemilik blog. Agar menarik bisa dipoles dengan memberi kesan kotak-kotak pada setiap bagiannya. Cara membuatnya tidak terlalu sulit, anda hanya perlu mengotak-atik kode-kode HTML pada blog saja. Ikuti langkah-langkah berikut ini :

  • Login dengan ID panjenengan/anda
  • Klik Tata Letak
  • Klik Edit HTML, 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.
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;
}

Keterangan :
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 kode sidebar widget dan main widget harus dipisah sehingga 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;
}


  • 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:#FF0000;
border:1px dotted #000000;
margin:0 0 1.5em;
padding:0.5em;
}

Kode diatas mengandung arti :latar belakang sidebar berwarna merah, border lebarnya 1 px dengan warna hitam (lebar border inilah yang membuat sidebar terlihat dalam bentuk kotak-kotak), jarak antara widget sebesar 1.5em dan padding 0.5em. Karena paduan warna ini tidak bagus, maka kode tersebut dapat anda ubah sesuai dengan selera. Untuk pemilihan warna silahkan cari di sini

Perlakukan pula untuk mengubah penampilan main widget dengan cara yang sama.

Selesai, silahkan lihat hasilnya.
Semoga berguna dan sukses, terus semangat
Share this article :

0 komentar:

Speak up your mind

Tell us what you're thinking... !

Recent Post

Popular Posts

Dreaming IT News

 
Support : Dre@ming Post | Dre@aming Group | I Wayan Arjawa, ST
Proudly powered by Blogger
Copyright © 2011. research - All Rights Reserved
Template Design by Dre@ming Post Published by Hot News Seventeen