Cara membuat setiap postingan dalam kotak yang terpisah

Tweet

Dalam tutorial ini, kita akan membagi (terpisah) postingan kita dalam kotak (frame), jadi setiap posting akan memiliki itu sendiri "rumah", dan Anda akan dapat melihat latar belakang di antara mereka. Lihat di bawah apa yang saya blabing tentang:

Anda dapat melihat live preview sini dan di sini (yang satu dengan kotak terpisah).

Jika Anda melakukan hal yang sama untuk gadget sidebar, membaca artikel ini: gadget Sidebar (widget) dalam kotak yang terpisah

Ok. Anda harus diingat:

1. Ini adalah contoh untuk Blog yang sudah memiliki area (bergaya) Post disesuaikan
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 :

1. main-wrapper mendefinisikan area Post di Blogger Template. Seluruh ide di sini adalah untuk menyalin gaya main-wrapper, dan menerapkannya pada elemen di dalamnya.
2. sekarang, seluruh bagian dari "main-wrapper" terlihat seperti ini (dalam contoh saya) :

#main-wrapper {
background:#FFDEAD;
border: 1px solid #E9967A;
padding-right:7px;
padding-left:7px;
width: 410px;
float: $startSide;
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 */
}

Kode bagian hitam adalah default, dan saya sudah sesuaikan template yang sedikit dengan bagian dalam kode berwarna kuning.

 

• Saya juga telah menambahkan beberapa bantalan sehingga teks tidak terlalu dekat dengan tepi. Baca lebih lanjut tentang menambahkan perbatasan di Blogger di sini.
• Gaya Anda akan berbeda, tentu saja. Tapi ini tidak terlalu penting.

Jadi, Anda ingin menyimpan gaya yang sama (desain) dan posting terpisah ke dalam kotak individu. Berikut ini:

CARA MELAKUKANNYA
Hal pertama yang harus Anda lakukan adalah membuat cadangan template saat ini Blogger Anda. Lalu pergi ke:
Menu Template >> Edit HTML >> Procced >> centang Expand Template Widget dan pada bagian kode, cari baris kode berikut:

#main-wrapper {

Dalam contoh saya perlihatkan seluruh bagian terlihat seperti ini:

#main-wrapper {
background:#FFDEAD;
border: 1px solid #E9967A;
padding-right:7px;
padding-left:7px;
width: 410px;
float: $startSide;
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 */
}

Sekarang, aku akan menyalin gaya (dalam warna kuning) dan paste di elemen saya main-wrapper (temukan baris berikut dalam kode):

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

Setelah menyisipkan kode, akan terlihat seperti ini:

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

 Anda dapat melihat kode tambahan dalam warna kuning.

Hal berikutnya adalah untuk menyembunyikan (atau menghapus) gaya disalin dari "main-wrapper". Jika saya tidak melakukan hal ini, template saya akan terlihat seperti ini:

Untuk menghindarinya, saya akan menyembunyikan gaya dalam "main-wrapper" gunakan /* and */ dalam kode itu seperti ini:

#main-wrapper {
/*background:#FFDEAD;
border: 1px solid #E9967A;
padding-right:7px;
padding-left:7px;*/
width: 410px;
float: $startSide;
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 */
}

Ganti, Anda bisa DELETE gaya dari main-wrapper ...
Sekarang, gaya untuk main-wrapper dinonaktifkan, dan Anda dapat melihat celah (latar belakang Blog, sebenarnya) antara posting Anda ...

FIX
Untuk menyelaraskan sidebar Anda dengan bagian pos, menemukan bagian dari kode:

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

dan ganti kode diatas dengan kode ini :

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

Simpan Template.

SARAN

1. Dalam contoh ini, tanggal itu memiliki kotak sendiri. Anda dapat mengubah ini jika Anda tidak menyukainya. Baca petunjuk pada:

Bagaimana memindahkan tanggal di bawah judul posting di Blogger

1. Jika Anda telah beralih ke komentar disematkan di bawah posting, Anda harus mempertimbangkan menyesuaikan mereka sedikit. Mengapa? Karena latar belakang Blog Anda dapat datang di jalan, menyebabkan jarak pandang terbatas dari komentar dan komentar, bentuk ini tergantung pada warna latar belakang Anda. Anda akan mendapatkannya.

Nah, itu saja .... berimprovisasi, mencoba, bermain, mengatur,  dan merancang.....