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 

Post a Comment

26 Comments:

Zaer!! said...
Teknik Buat Blog

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

Artzlizan said...
Teknik Buat Blog

waa..bagus bagus...

suffer8zine said...
Teknik Buat Blog

wahhh nice bro!

Terkini : 5 Tandatangan Termahal Di Dunia

mknace unlimited said...
Teknik Buat Blog

:) :) :)
terbaeekkk!!!!

sibersensasi said...
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

Aidanatasya said...
Teknik Buat Blog

thhnxxx.... yahya :)

MOH KEMBARA said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

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

Anaz Tiffany said...
Teknik Buat Blog

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

Ł†ŁˆŲ±Ų¹ŁŠŁ… said...
Teknik Buat Blog

xjadi lah. xkeluar ape pon. cmne ye?

geekz36 said...
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 said...
Teknik Buat Blog

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

ArtFantastic said...
Teknik Buat Blog

da try... berkesan..tengss

lady kina said...
Teknik Buat Blog

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

lady kina said...
Teknik Buat Blog

klu nk wat divider pd sidebar plak mcm mane ye?

aleya alyaa said...
Teknik Buat Blog

xjd pown..huh

Lia Irdelia said...
Teknik Buat Blog

huhu.. x jdik la pulak..

mysmalloutlet 002185xxx-M said...
Teknik Buat Blog

time kasih..sume ilmu sungguh bermanfaat

FIEQA a.k.a KAKA said...
Teknik Buat Blog

camne nak design header sendiri dengan tulisan yang sangat gempak

Riezu Mizu said...
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

sibersensasi said...
Teknik Buat Blog

@Riezu Mizucuba tutorial cara buat tab menu

Unknown said...
Teknik Buat Blog

terima kasih...

Mashitah Mamat said...
Teknik Buat Blog

terima kasih shar tuto nih..menjadi !

Mashitah Mamat said...
Teknik Buat Blog

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

sibersensasi said...
Teknik Buat Blog

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

shella said...
Teknik Buat Blog

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