Sidebar Title (Hover) Versi 2

Posted by Mira Rasidi | 11 April 2012 | 5 Comment
Hello Peeps!
Ehem..Baru-baru ini ada beberapa orang yang tak berjaya buat sidebar title hover macam cikmeera...

Baiklah.Kalau sidebar Title Hover Versi 1 dulu,..Cikmeera hanya ajar korang untuk buat hover dekat sidebar title & tanpa mengubah sidebar title korang yang asal kan?...Now,bagi mengurangkan kekeliruan korang tu,untuk tuto kali ini cikmeera akan buat sidebar title hover  yang sedikit berbeza stepnya.Buat pengetahuan semua sidebar Hover Versi  1 telah di DELETE oleh cikmeera bagi mengelakkan kekeliruan.

Yeaah! Tuto kali ini akan menyebabkan sidebar title korang yang asal tu berubah la yup....Boleh tak korang?Boleh kan?..Dont worry tidak akan menjejaskan blog korang pown.Just berwajah baru saja.Heheh.Setelah gali punya gali...Insyaallah.. Design Template juga boleh guna tuto ini yup.

Sebelom tu kita tengok contoh image dulu>>>

SEBELUM HALAKAN CURSOR

SEMASA HALAKAN CURSOR



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
.sidebar h2 {
ATAU
MINIMA TEMPLATE/DESIGN TEMPLATE
h2 {

#Kemudian cuba korang tengok di bawah kod  .sidebar h2 { atau h2 { ,terdapat kod asal kan?.So.Korang DELETE semua kod kat bawah kod  .sidebar h2 { atau h2 {  sehingga kod  } yup.Faham?


3.  Then,Barulah korang Copy kod kata bawah ni & Paste DI BAWAH  kod yang korang cari tadi sama ada bawah kod .sidebar h2 atau h2 {  ye.
padding:2px;
margin:1.5em 0 .75em;
font-family:Century Gothic;
font-size:14px;
font-weight:500;
text-align: center;
color: #808080;
background-image: url(URL Background Sebelum Halakan Cursor);
border-left: 6px  solid #808080 ;
border-right: 6px solid #808080;
border-top: 1px dashed #808080;
border-bottom: 1px dashed #808080;
}
h2:hover {
padding:2px;
margin:1.5em 0 .75em;
text-align:left;
color:#FFB9C8;
background-image:url(URL Background Semasa Halakan Cursor);
border-left: 6px solid #808080;
border-right: 6px solid #808080;
border-top: 2px dotted #808080;
border-bottom: 2px dotted #808080;
}
*AAA: Warna font sebelum halakan cursor
*AAA: URL Background sebelom halakan cursor.Gantikan dengan background korang suka yup.Cari di Freebies cikmeera pown boleh.
*AAA: Ketebalan border
*AAA: Pattern Border.Boleh tukar kepada dashed/dotted/solid
*AAA: Warna border.
*AAA: Warna Font semasa halakan cursor
*AAA: URL Background Semasa Halakan Cursor.Gantikan dengan background yang korang suka yup.Cari di Freebies cikmeera pown boleh.

*AAA: Warna border semasa halakan cursor.


#Klik SINI untuk dapatkan WARNA

4.  Preview.Tak masalah.Save yup.



P/s:Selamat Mencuba.Semoga berjaya yup.Roger2 dekat cikmeera okeyh^ ^

5 comments:

hazdnul said...

hye kak..dah jadi buat ni..lame dah cri..thanks akak ^_^

Mira Rasidi said...

@hazdnulyezza appy gler ble ada yg boleh buat...kalau tak suka font yg ak bg.boleh tukar yup..

Hidayah Suhailee said...

yeay!!1 dah dapat dah.. thanks!!! syg kakak.. hehe

Mira Rasidi said...

@hazdnulak pulak...akak ler;))

Mira Rasidi said...

@yaya c domowlcme dear:))..syg kamu jugak:)