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 design—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

Letakkan komen anda disini.Segala komen adalah dihargai.Sila buat backup bila membuat perubahan pada template.Terima Kasih.

21 Comments:

Zaer!! berkata...
terima kasih atas kunjungan

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

princeduyong berkata...
terima kasih atas kunjungan

waa..bagus bagus...

suffer8zine berkata...
terima kasih atas kunjungan

wahhh nice bro!

Terkini : 5 Tandatangan Termahal Di Dunia

Mknace berkata...
terima kasih atas kunjungan

:) :) :)
terbaeekkk!!!!

yahaya berkata...
terima kasih atas kunjungan

@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...
terima kasih atas kunjungan

thhnxxx.... yahya :)

MOH KEMBARA berkata...
terima kasih atas kunjungan

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

yahaya berkata...
terima kasih atas kunjungan

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

wAnA berkata...
terima kasih atas kunjungan

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

noraim berkata...
terima kasih atas kunjungan

xjadi lah. xkeluar ape pon. cmne ye?

geekz36 berkata...
terima kasih atas kunjungan

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...
terima kasih atas kunjungan

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

kue ziya berkata...
terima kasih atas kunjungan

da try... berkesan..tengss

kienah starz berkata...
terima kasih atas kunjungan

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

kienah starz berkata...
terima kasih atas kunjungan

klu nk wat divider pd sidebar plak mcm mane ye?

aleya alyaa berkata...
terima kasih atas kunjungan

xjd pown..huh

Lia-De-Pinky-Leo berkata...
terima kasih atas kunjungan

huhu.. x jdik la pulak..

mysmalloutlet berkata...
terima kasih atas kunjungan

time kasih..sume ilmu sungguh bermanfaat

Nur Syafiqa Zakaria berkata...
terima kasih atas kunjungan

camne nak design header sendiri dengan tulisan yang sangat gempak

Riezu Mizu berkata...
terima kasih atas kunjungan

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...
terima kasih atas kunjungan

@Riezu Mizucuba tutorial cara buat tab menu

Related Posts Plugin for WordPress, Blogger...