Cara buat widget/gadget sidebar dalam kotak yang terpisah

Tweet

Dalam artikel cara membuat postingan dalam kotak yang berbeda, kami telah belajar bagaimana membagi postingan kita di kotak yang menggunakan gaya yang sama itu hadir dalam template. Sekarang, kami akan melakukan hal yang sama untuk elemen Sidebar - widget (gadget). Idenya adalah sama. Kami akan memisahkan satu dari yang lain, dan masing-masing akan memiliki kotak.

Anda harus diingat:

1. Ini adalah contoh untuk Blog yang sudah memiliki (bergaya) Sidebar disesuaikan (berwarna, borderized ..)
2. Contoh ini dibuat di Blogger template Minima (jadi kode Anda mungkin sedikit berbeda, tetapi prosedur adalah sama)
3. Tidak masalah jika Anda memiliki "berat" template disesuaikan, Anda dapat menerapkan pengaturan ini tetap

Pahami Bagian Ini.
Kita harus meniru gaya utama dari sidebar-wrapper kita (salah satu yang membawa gaya untuk elemen sidebar keseluruhan), dan menerapkannya pada widget individu (gadget). Inilah gaya sidebar-wrapper dalam contoh ini:

#sidebar-wrapper {
background:#ADD8E6;
border: 1px solid #E9967A;
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 */
}

• Gaya kami tertarik di sini adalah: latar belakang dan perbatasan
• Selanjutnya adalah untuk menerapkan ini ke widget kita ...

Ok, LET'S DO IT
Pertama, back up template Blogger Anda saat ini. Lalu, ke: LAYOUT ► EDIT HTML ► dan cari bagian ini dalam kode (ini adalah untuk standar template blogger minima, mungkin terlihat sedikit berbeda untuk anda):

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

Hapus kode diatas dan ganti dengan kode dibawah ini :

.sidebar .widget {
background:#ADD8E6;
border: 1px solid #E9967A;
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;
}

1. kami telah membagi widget utama dan sidebar widget untuk menerapkan gaya
2. dalam warna pink, Anda dapat melihat gaya disalin dari sidebar-wrapper
3. dalam warna hijau, Anda dapat mengatur padding dari isi widget (jika padding adalah 0px, teks akan dekat dengan perbatasan) ..

Hal berikutnya adalah untuk menghapus (menyembunyikan) gaya dari sidebar-wrapper. Mengapa? Karena jika Anda tidak, sidebar akan terlihat seperti ini:

Untuk menghindari hal ini, temukan sidebar-wrapper:

#sidebar-wrapper {
background:#ADD8E6;
border: 1px solid #E9967A;
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 */
}

dan hapus latar belakang dan perbatasan (atau gaya lain yang telah diterapkan untuk widget/gadget):

 #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 */
}

Simpan dan itu saja.