Post Title (Hover) Versi 1

Posted by Mira Rasidi | 12 April 2012 | 2 Comment
Assalamualaikum...
Korang.Korang. & Korang..

Semalam cikmeera ada kongsi dengan korang tuto cara nak buat sidebar title hover kan?
Macam mana?Dah cuba ke belom?
InsyaAllah..next tuto cikmeera akan kongsi banyak lagi yup.ngee~~

Apa-2 pown..Jom kita fokus kepada tuto yang cikmeera nak kongsi dengan korang untuk kali ini yup.
Err~~..Tuto yang dimaksudkan adalah cara buat post title hover versi 1.


Oyey~Jom tengok contoh dulu>>>

SEBELUM HALAKAN CURSOR

SEMASA HALAKAN CURSOR



Dah tengok?Nak jugaK?Jom folow step yup...


STEP

1.  Dashboard>Design>Edit HTML>tick Expand Widget Templates.

2.  Cari kod ini:(Bagi memudahkan pencarian,tekan Ctrl F serentak.Kemudian Copy Paste kod kat bawah di kotak Find: & tekan ENTER)

DENIM TEMPLATE
.post-title {

MINIMA TEMPLATE
.post h3 {

DESIGN TEMPLATE/SIMPLE TEMPLATE
h3.post-title, .comments h4 {
ATAU
h3.post-title {
ATAU
h3.post-title, h4 {

#Dah jumpa?..Kemudian, cuba korang tengok di bawah kod  yang dicari tadi ,terdapat kod asal kan?.So.Korang DELETE semua kod  yang berada di bawah kod yang dicari  sehingga kod  }  ye.


3. Bila dah DELETE,baru gantikan dengan kod di bawah ini.Seperti biasa.Just Copy Paste kod kat bawah ini di bawah kod yang korang cari tadi la.
padding:2px;
margin:1.5em 0 .75em;
border-top: 1px dashed #000000;
border-bottom: 1px dashed #000000;
text-align:center;
background-image:url(URL Background);
}
 .post-title:hover {
padding:2px;
margin:1.5em 0 .75em;
text-align:center;
background: #FFFFFF;
border-top: 2px dotted #808080;
border-bottom: 2px dotted #808080;
}

*AAA: Ketebalan Border sebelum cursor dihalakan
*AAA: Pattern border sebelum cursor dihalakan.Boleh tukar kepada dotted/dashed/solid
*AAA: Warna Border sebelum cursor dihalakan
*AAA: Gantikan dengan URL background yang korang suka.
*AAA: Warna Background semasa cursor dihalakan
*AAA: Ketebalan border semasa cursor dihalakan
*AAA: Pattern Border semasa cursor dihalakan
*AAA: Warna Border semasa Cursor dihalakan

#Dapatkan kod warna di SINI.


4.  Preview & Halakan cursor korang.Jika sukses...Save dengan penoh bangga yup..heheh

5. Klik SINI okeyh.Heheh.(Mintak tolong jap)


P/s: Credit untuk cikmeera yup:))...Semoga u aulls berjaya..^__^

2 comments:

hazdnul said...

hye cikmeera..dah jadik..hihi..suke2..tq 4 tuto ^_^

Mira Rasidi said...

welcome dear:))...tahniah2..heheh