Thursday 30 May 2013

Post title hover ( Blogskin )


Assalamualaikum dan hai semua...sebelum nie kan saya ada buat tutorial post title hover untuk designer kan...kali nie untuk blogskin pulak...jenisnya sama jer cuma cara jer lain...



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

Secondly search using CTRL+F and find your post title code...( all blogskin code are different )
Try searching for    .title-a {     or     .h1 {

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

The codes :

.h1 {
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;
}
.h1: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)


( Skip this step if your old post title code is   h1 )
Next : Search this code     <blogger>
Then : Replace the code after that for example :

<div class=" loli ">   WITH  <div class=" h1 ">

Repeat this step on every <blogger> code if there is two <blogger> code
Lastly : PREVIEW AND SAVE...
Tak paham ? fell free to ask... :')  any request can be made through my cbox...

1 comment: