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(http://2.bp.blogspot.com/_vLeiVavkV_M/SthJsqCtR3I/AAAAAAAAB9o/tO5gQME5P8Q/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(http://3.bp.blogspot.com/_yqzcBmyK-mo/TQ2lF3pewjI/AAAAAAAABLw/KtFWYjX1t8w/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:http://1.bp.blogspot.com/_yqzcBmyK-mo/TQ2kMOaGkyI/AAAAAAAABLo/SDJRVEyJRMs/s1600/red+border.gif

  red border

Url imej: http://1.bp.blogspot.com/_yqzcBmyK-mo/TQ2kPB6lbkI/AAAAAAAABLs/1nIuAzY6kps/s1600/flowerbar.gif


flower divider

Imej boleh didapatkan diinternet dengan mencari  horizontal line atau page divider 

Catat Ulasan

26 Comments:

Zaer!! berkata...
Teknik Buat Blog

Wah! terbaik.hehe.mekasih bro sharing.;p

princeduyong berkata...
Teknik Buat Blog

waa..bagus bagus...

suffer8zine berkata...
Teknik Buat Blog

wahhh nice bro!

Terkini : 5 Tandatangan Termahal Di Dunia

Mknace berkata...
Teknik Buat Blog

:) :) :)
terbaeekkk!!!!

yahaya berkata...
Teknik Buat Blog

@NEGO

saya dah buat sikit tambahan pada artikel diatas.Terima kasih atas teguran.Saya jadi sibuk hingga terlupa nak baca semula selepas saya publish.sebenarnya selain komen ada byk juga pertanyaan yg perlu saya jawap pada email.semua ini saya buat kerana hendak menolong rakan rakan dalam membuat blog.Jika ada masaalah sila kemukakan.tq

Bi4RL4HR4HSi4H berkata...
Teknik Buat Blog

thhnxxx.... yahya :)

MOH KEMBARA berkata...
Teknik Buat Blog

Salam Yob Yahaya, Akak hargai usaha Yob ni. Tapi Akak blur. Kena ada sorang guru di sebelah. Anyway, tima kasih...

yahaya berkata...
Teknik Buat Blog

@MOH KEMBARAkalau tak biasa dgn kod agak susah sikit...kalau ikut tutorial bermula dari awal mungkin boleh..

wAnA berkata...
Teknik Buat Blog

thnx 4 de info :)
dh lme wana cari bnde ni.
akhirnye jumpa gak :D

noraim berkata...
Teknik Buat Blog

xjadi lah. xkeluar ape pon. cmne ye?

geekz36 berkata...
Teknik Buat Blog

tq bro, kalau tutorial kat sini berbayar semput gak aku nak bayar. byk sgt dah aku curi code2 kat sini. =)

Latest Entry: Adobe Photoshop CS5 Extended (Portable)

toyolkiut berkata...
Teknik Buat Blog

dh try buat satni..
ok, jadi..
tima kasih daun keladi..

kue ziya berkata...
Teknik Buat Blog

da try... berkesan..tengss

kienah starz berkata...
Teknik Buat Blog

waaa....pening nye tgk kod...asyik xmnjd je ni....;'(

kienah starz berkata...
Teknik Buat Blog

klu nk wat divider pd sidebar plak mcm mane ye?

aleya alyaa berkata...
Teknik Buat Blog

xjd pown..huh

Lia-De-Pinky-Leo berkata...
Teknik Buat Blog

huhu.. x jdik la pulak..

mysmalloutlet berkata...
Teknik Buat Blog

time kasih..sume ilmu sungguh bermanfaat

Nur Syafiqa Zakaria berkata...
Teknik Buat Blog

camne nak design header sendiri dengan tulisan yang sangat gempak

Riezu Mizu berkata...
Teknik Buat Blog

Salam.. saya ingin bertanya.. bagaimana nk buat scroll menu cm awak buat? yg ada blog, photoshop and komputer tu.. sy x tau la

yahaya berkata...
Teknik Buat Blog

@Riezu Mizucuba tutorial cara buat tab menu

ira san berkata...
Teknik Buat Blog

terima kasih...

Mashitah Mamat berkata...
Teknik Buat Blog

terima kasih shar tuto nih..menjadi !

Mashitah Mamat berkata...
Teknik Buat Blog

saya siap masukkan blog ni dlm blog list sy sebagai rujukan..mintak halal segala ilmu yea... tq

Fokus Impian berkata...
Teknik Buat Blog

@Mashitah Mamat
terima kasih..saya halalkan...

Mami Leesya berkata...
Teknik Buat Blog

hai semua.. sy dah buat n jadi cumanya jd lebar.. abis kluar dr page sy