Divider Di Sidebar Widget

Penulis : Nurul Fatihah Shahronizam Masa : 19:44 Komen : 0 Tag :

Salam. Sebelum ada orang tanya macam mana nak buat, baik Nurul bagitahu awal-awal. Haha :D Malam tadi Nurul ada buat sesuatu dengan blog. Nurul tambah divider dekat sidebar widget Nurul tue. Comel tak?Tapi sayang korg tidak sempat tengok coz Nurul dah buang apapun Nurul still nak share dengan korg jgk tutorial nie
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 ~ Nurul 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 .widgetjadi 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 Nurul bagi dan tengok perbezaan code-code die. Baru faham :D Jangan mudah berputus asa ! Practise make prefect ! :D

A true muslimah : never forget that Islam, which encourages her to look attractive under the permitted limits, is also the religion that's warns her against extravagance ^_^

0 comments:

Post a Comment