Tutorial post tittle hover

Bismillahirrahmanirahim.

Salam Ramdhan Kareem 

Hari ni miza nak share tutorial post tittle ada hover.

Post Tittle sebelum disentuh:

Post Tittle selepas disentuh:

Dashboard  Template  Edit HTML

Tekan Ctrl F dan cari h3.post-title, atau /* Posts

Copy paste code bawah ni di bawah h3.post-title,

}

h3.post-title,

.comments h4 {

text-align: center;

font: 13px arial;

color: #616161;

background-color: #FFDCDC;

border-right: 5px solid #FFACAC;

border-left: 5px solid #FFACAC;

border-top: 2px dashed #FFACAC;

border-bottom: 2px dashed #FFACAC;

padding: 5px;

}

.post h3:hover{

font: 13px arial;

color: #616161;

border-radius: 5px;

border-right: 2px dashed #95CEFF;

border-left: 2px dashed #95CEFF;

border-top: 2px dashed #95CEFF;

border-bottom: 2px dashed #95CEFF;

background: url(Icon Url);

background-position:bottom right;

background-repeat:no-repeat;

background-color: #DCE9FF;

-webkit-transition-duration: 3.5s;

}

 Biru : Tukar colour dan border sebelum hover

Coklat emas : Tukar colour dan border selepas hover

Pink : Tukar Icon

Alhamdulillah siap. Simple right ?

Tukar colour click situ.

Tukar border : Solid, Dashed, Dotted. 

Tukar icon:

 , ,

nak lebih banyak pilihan click sini atau sana

Cara nak mudah dapatkan url icon tu,

Right click  Copy image url

Sesungguhnya yang baik itu datang daripada Allah, dan serba kekurangan itu datang daripada diri miza sendiri. Insyaallah ada masa kita jumpe lagi. Segala kekhilafan miza mohon ampun dan maaf. Wassalam.

                                                                 Allahhumma Solli `Ala Muhammad