Cara Memasang Post Divider Blogger (Menggunakan CSS)

Halo pembaca

Jadi ceritanya gini nih, beberapa hari lalu saya mau instal post divider buat blog saya yang satunya.

Padahal sebelumnya saya udah pernah instal post divider lho di blog ini. Post dividernya sudah saya instal bertahun2 lalu dan itu pakai ngutek2 kode HTML, tapi lupa saya gimana caranya, wkkk... Akhirnya saya browsing lagi sana sini dan luckily nemu caranya tanpa mesti mantengin HTML yang bisa bikin sepet mata itu^^

Biar jadi pengingat buat saya juga maka saya post aja disini.

Sebelumnya, kalian bisa cari gambar post divider yang bisa kalian download gratis di situs2 penyedia dimana pernah saya sebutkan pada postingan INI. Atau kalian mau buat post divider sendiri dengan picture editing software.

Saya anjurkan untuk mengupload gambar post divider di situs hosting dengan akun kita sendiri. Cara hosting gambar di blogger pernah saya bahas di SINI.

Berikut ini cara instal post divider dengan menambahkan kode CSS.

Pertama masuk ke blogger dan klik pada Tema lalu pilih sesuaikan.

Pilih Opsi berwarna orange

Klik pada opsi Lanjutan

Pilih tambahkan CSS

Masukkan kode css untuk post divider (copy kode yang tertera di antara garis berikut) :

-------------------------------------------------------------

.post { background:url('masukkan url blog');

background-repeat: no-repeat;

background-position: bottom center;

padding-bottom: 130px;

margin:  10px 0px  10px 0px; }

--------------------------------------------------------------

(klik gambar untuk perbesar) 

Paste kode tersebut ke kolom CSS seperti pada gambar di atas.

Kita masukkan url gambar yang mau kita pakai di dalam tanda petik dimana saya tulis *masukkan url blog*.

contoh realnya yang saya lakukan begini :

.post { background:url('https://lh3.googleusercontent.com/ZDycDf-JzYPh8p3OHyLmN0ysl5HHDipynIEeaU0O52VSMofa1d7bvgLfDl6k4d0ba8L7200Jdue8duf6jw=w600-h154-rw');

background-repeat: no-repeat;

background-position: bottom center;

padding-bottom: 160px;

margin:  10px 0px  10px 0px; }

Gambar untuk post divider saya simpan di Google photos dan seperti itu alamat linknya. Kita bisa merubah jarak post divider dari bagian footer post dengan merubah angka padding bottom. Ini kita sesuaikan dengan tingginya gambar yang kita gunakan sebagai post divider.

Setelah kode CSS diletakkan, klik tombol ‘Terapkan ke Blog’, dan jadilah tampilan blog anda makin menarik dengan adanya post divider yang sudah terpasang.

Saya rasa sekian dulu tips dari saya. Semoga bermanfaat. Jika ada pertanyaan silahkan berkomentar.

Referensi tips dari berbagai sumber.