Post title hover ( Designer )

Assalamualaikum dan selamat malam semua...sekarang saya nak buat tutorial post title with hover untuk template designer,denim,simple,minima dan yang seangkatan dengannya...kalau nak tau mcm mane rupanya tengok bawah nie...

LIVE PREVIEW

Firstly : Blogger.com --> Home --> Template --> Edit HTML

Secondly : Press ctrl + F or F3 and search this code...

.post-title {     or     h3.post-title, .comments h4 {     or     h3.post-title {     or     h3.post-title, h4 {     or     .post h3 {

Thirdly : Delete the subcodes and the codes that you had search...replace with the code that I give below...

The codes :

.post-title {
font-family: Comic sans MS;
font-size: 18px; color:#FFFFFF;
text-align:right;
margin-top:5px; margin-bottom:10px;
margin-left:5px; margin-right:5px;
padding:5px; padding-left:15px;
padding-right:15px; background-color: #FFC2C2;
background-image:url(http://i171.photobucket.com/albums/u305/silverobsession/pixels/animals/elephants/elephantliferm5.gif);
background-repeat:no-repeat;
background-size:35px;
background-position:bottom-left;
border-left:20px solid #FFEBEB;
border-right:20px solid #FFEBEB;
border-top:2px dashed #FFEBEB;
border-bottom:2px dashed #FFEBEB;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
}
.post-title:hover {
moz-box-shadow: 0 0 4px 3px #FFD6D6;
-webkit-box-shadow: 0 0 4px 3px #FFD6D6;
box-shadow: 0 0 4px 3px #FFD6D6;
transform: rotate(10deg) ;
-webkit-transform: rotate(10deg) ;
-moz-transform: rotate(10deg) ;
-o-transform: rotate(10deg) ;
-ms-transform: rotate(10deg)
}

The notes :
Fucshia : Color code HERE
Blue : Url cute image HERE or HERE
Red :The number of skew effect  (the more the number,the more the skew effect)

Lastly : PREVIEW AND SAVE...

Tak paham ? tanye jer... :') jangan copy tutorial nie taw...any request can be made through my cbox...