Cara buat widget/gadget sidebar dalam kotak yang terpisah

Kali ini Blog Gado Gado akan menampilkan artikel berjudul Cara buat widget/gadget sidebar dalam kotak yang terpisah. Dengan artikel Cara buat widget/gadget sidebar dalam kotak yang terpisah ini kami berharap dapat menjadi sebuah rujukan dan bahan penambah wawasan kita terkait dengan judul tersebut. Artikel ini adalah hasil pencarian di google dengan kata kunci Cara buat widget/gadget sidebar dalam kotak yang terpisah kemudian saya kumpulkan dan saya sajikan buat anda di Blog Gado Gado ini. Semoga kehadiran artikel ini bermanfaat bagi kita semua.anda juga dapat melihat artikel sebelumnya atau artikel berikutnya. Ok, langsung saja berikut adalah artikel Cara buat widget/gadget sidebar dalam kotak yang terpisah selengkapnya:

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.

Nah, sobat Blog Gado Gado.. Anda telah membaca seluruh artikel berjudul Cara buat widget/gadget sidebar dalam kotak yang terpisah dengan keword yang masuk Blogger Hack . Anda dapat memberikan komentar ditempat yang telah tersedia. Terima kasih kunjungan Anda.