Cara letak divider diantara posting

Divider  atau pemisah ini adalah digunakan sebagai pemisah diantara setiap posting pada blog.Ia biasanya dalam bentuk garisan atau imej yang memanjang.selain dari itu juga ia boleh juga sebagai menghiasi  lagi pada paparan blog kita dengan divider dalam pelbagai imej yang menarik.Imej yang dipilih biarlah bersesuaian dengan latar belakang blog kerana ada yang hanya sesuai untuk background yang berwarna cerah.

Untuk membuat garisan yang ringkas pada bahagian posting Cuma perlu masukkan kod seperti dibawah ini sahaja pada entri:

Berikut adalah garisan border yang boleh kita masukkan dengan meletakkan kod dibawah pada bahagian yang hendak diletakkan:
<hr>
Hasilnya:

---

Diatas adalah kod biasa untuk letak garisan melintang dan dibawah ini adalah kod yang boleh kita ubah panjang garisan dan warna.Kod ini cuma perlu dimasukkan sahaja bila membuat posting pada mana mana bahagian yang ingin dimasukkan.


<hr width="50%" size="4" />

---

<hr width="60%" size="4" noshade />

---

<hr width="80%" color=" #0080FF" size="4" />

---

Jika hendak letakkan dalam bentuk imej dan  pada setiap posting .kod perlu dimasukkan pada template.
Caranya:
Masuk ke dashbaord—template---edit html—

cari kod ini:

.post {

Atau sesetengah template kena letak pada

.post-body {

kebiasaanya kod pada template seperti ini:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
cuma perlu masukkan kod dibawah ini:

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY3O9LYKMmKVJF8g-Amqeoq-bUEPNixXf627ET-S7YML-DSWQfsziXbROZflTuHubgxWiog5EBVgjJkcI9mOjY3n16V5ulPIepWZIYeAORF0lN_N5chySBC5yE2V7vMuEsB2Yb7K-2B5w/s400/ribbon.gif);

background-position: bottom center;
background-repeat: no-repeat;
margin:.5em 0 1.5em;
padding-bottom:1.5em;

 menjadi seperti dibawah ini

.post {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBWoJ_p4BnjVRCkzksnaxQPGHOSdS380akPxS0qtC6pkbTANBezCRVtNzD4ZRmjMGsOZ-uEzJvD4XC6aoFqT60oSZC81jbg03h1gk1qTtCOlGR8NbXVbs8l-9hyphenhyphenjHMPUiqJgiR4B48teY/s1600/zizzag.gif);
background-position: bottom center;
background-repeat: no-repeat;
margin:.5em 0 1.5em;
padding-bottom:1.5em;

}

Untuk menjarakkan sedikit diantara border dan kandungan posting ubah pada padding

Dari: padding-bottom:1.5em;    kepada ; padding-bottom:2.5em;

Kalau nak letak imej contohnya seperti dibawah ini cuma perlu gantikan  url pada teks berwarna merah diatas:

Url imej:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfwkEVNsd2R37uKAs-p-vHr4OFnhUsAUR-0effM3RWC5iTnBXGRQWbilgRCYQm6CSnBoXHWuM6GCDQpeGpmtOLW_Bl72mfH8WIBLDUZj-7VHsr9UFAeJa9q3uNMu5nFkuG0mjs7NTDLT4/s1600/red+border.gif

 

Url imej: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilktdktS5wgjQlRnAn6PIL5CH5lRLWRmo0pfBymSsOi7fn0fG3DpsqkbFNRTtycNgjnEFiEdPTYvST5wsyMkmhCk0W46UpSi-0pwvf7Yxk-8K302vdupwC_VGB6TYwpmdWYCAnUxw4Tfk/s1600/flowerbar.gif

Imej boleh didapatkan diinternet dengan mencari  horizontal line atau page divider