[Tutorial] Divider di Sidebar Widget

by - Wednesday, June 23, 2010



Salam. Sebelum ada orang tanya macam mana nak buat, baik aku bagitahu awal-awal. Haha :D Malam tadi aku ada buat sesuatu dengan blog. Aku tambah divider dekat sidebar widget aku tue. Comel tak?
Haaaaaaaa ~ Yang bunga-bunga tu lah divider untuk sidebar aku. Comel kan? Nampak lebih kemas lagi. Hehe :D Nak buat jugak? Baca langkah-langkah seterusnya :D


SILA BACKUP DULU TEMPLATES KORANG
Takut ada tersalah edit-edit die punya coding



  • Pergi ke Dashboard > Design > Edit HTML
  • Tekan ctrl + f dan cari code bawah ini
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

  • Buang semua code di atas ini dan GANTIKAN dengan code di bawah ini di tempat yang sama
.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.sidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}


*Act kalau korang perasan, die just pisahkan code .main .widget dengan .sidebar .widget jer ~ Aku suruh korang buang code yang mula-mula tu dan gantikan dengan code yang baru sebab tak nak peningkan kepala korang. Ok next step ! :D


  • Lepas tu korang edit-edit sikit code tadi supaya code .sidebar .widget jadi macam kat bawah ini
.sidebar .widget {
border-bottom:0px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 50px;
background-image: url(URL DISINI);
background-position: bottom;

background-repeat: no-repeat;


Faham tak? Korang kena ubah balik code yang asal tu dan tukarkan code tadi tu jadi SEBIJIK macam kat atas ni. Faham tak? Faham tak?


Korang jangan kacau-kacau lagi code yang aku bagi tu. Apa yang aku nak korang buat ialah gantikan URL contoh yang aku bagi tu dengan URL divider yang korang nak. Boleh cari contoh divider di Glitter Graphics.


Dah pilih mana-mana yang korang berkenan, amik URL gambar itu. Tekan right click di gambar tersebut dan tekan Copy Image Location.

Lepas dah sudah, korang pastekan di URL code tadi tue


Preview dulu. Dah puas hati baru save ok?


Siap !


*Baca dan fahami betul-betul semua arahan yang aku bagi dan tengok perbezaan code-code die. Baru faham :D Jangan mudah berputus asa ! Practise make prefect ! :D

Credit to this :)


You May Also Like

29 comments