Lets Talk About: How To Add Flipping Effect To Logo / Header In Blogger

Tags

As a blogger one of the things that distinguish you out from the rest is your logo. I do normally encourage wanna be bloggers to always have logo of their own. Creating logo is not that hard just a coral draw install in your PC and printer that is all, anyway that is a story for another day. But the true
is that the story doesn't end there, the next step is. After creating and adding this your very logo to your blog. How do you add cool effects to it?.

I must also acknowledge here that some people achieve that by simply adding just (shape and colors) not just anyhow colors but decent ones. There's a secret to this which many of them are still hiding but trust me i know their secret and am going to make it public today to help my new bloggers out there achieve their goal on that aspect. The true remains that this logos doesn't end with shape and decent colors. A logo /image can be made cool by simply adding cool effects to it such as zoom on mouse hover, flip on mouse hover. and even rotate on mouse hover.

And all the above mentions can be achieve using CSS. By the way the full meaning of CSS is (cascading style sheet). Always remember that as a blogger you never can tell.
Alright back to our discussion the very essence of this post is about making your logo simply cool which can be achieve by adding flipping effect to it. And is not that hard to do, Just follow the simple below instruction or step:

The next question is how does it works?
Now with the help of CSS many cool effects can be created in images among which most popular are Rotating effect, Auto-zoom effect, fade-out effect on mouse hover, and many others. In-fact Flipping an image is also done by CSS. So to achieve this effect a CSS code is simply added into blog along with some more changes and the logo/header image starts to flip on hover. Lets continue!

The very first step to create flipping effect in your header image is by adding CSS code in your blog template along with some more changes like i stated above. Simply follow the below steps its very easy and safe if you ask me but i will advise you create a backup of your blog template first so that you could backup your blog if some unexpected change is made while adding this effect to your blog's logo. Is very important you do so. Alright here we go:

(1). Login to your Blogger Dashboard, select Template and click on Edit Html.

(2). Click anywhere in the Html and search for the below code by using combination of Ctrl+F buttons on your keyboard: Just past the below code inside and hit enter key.

<img expr:alt='data:title'

(3). Just above this code paste the below code:

<div class='flip-container' ontouchstart='this.classList.toggle(&apos;hover&apos;);'>
<div class='flipper'>
<div class='front'>

(4). Also find below code:

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> 

Important Note: Sometime you may not find the above code by using the template's search box all you have to do is after finding the code in 2nd step find this code by using browser's search box. Click out of the template and hit CTRL + F to open browser's search box !

 (5). Sure by now you have seen it Okay then Paste the below code just below the above code:

</div>
 <div class='back'>
            <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:width='data:width' src='http://3.bp.blogspot.com/-IXeMRaNp0vE/V59DM1H6AlI/AAAAAAAABrs/f-BmgArNvd0u220rfv8uihzGs7Eg59a_gCK4B/s1600/OOOO.jpg' style='display: block'/>
        </div>
    </div>
</div> 

(6). Replace the blue highlighted link with your blog's logo url.

(7). Also find <h1 class='title'> by using Ctrl+F on keyboard, it will look like below code:

<h1 class='title'>
          <b:include name='title'/>
        </h1>

(8). Replace above code with the below code:

<h1 class='title'>
<div class='flip-container' ontouchstart='this.classList.toggle(&apos;hover&apos;);'>
<div class='flipper'>
<div class='front'>
          <b:include name='title'/></div>
<div class='back'>
<b:include name='title'/>
</div>
    </div>
</div>
        </h1>

We are there Almost just last thing left is to add this CSS code.

(9). Find ]]></b:skin> and paste the below code just above it:

/* Start Header Flipper
----------------------------------------------- */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
       -o-perspective: 1000;
-moz-transform-style: preserve-3d;
-Webkit-transform-style: preserve-3d;
-0-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-0-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-webkit-transform: perspective(1000px);
-ms-transform: perspective(1000px);
}
.flip-container:hover .back {
        transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
     -moz-transform: rotateY(0deg);
       -o-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);        

    }
    .flip-container:hover .front {
        transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
       -o-transform: rotateY(180deg);
 -ms-transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 125px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transition: 0.6s;
-ms-transition: 0.6s;
     -moz-transition: 0.6s;
       -o-transition: 0.6s;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
    transition: 0.6s;
-webkit-transition: 0.6s;
     -moz-transition: 0.6s;
       -o-transition: 0.6s;
-ms-transition: 0.6s;
    transform-style: preserve-3d;
position: absolute;
    top: 0;
    left: 0; }
.front {
    z-index: 2;
    transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
     -moz-transform: rotateY(0deg);
       -o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg); }
.back {
    transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
     -moz-transform: rotateY(-180deg);
       -o-transform: rotateY(-180deg);
       -ms-transform: rotateY(-180deg); }
.vertical.flip-container {
    position: relative;}
.vertical .back {
        transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
       -o-transform: rotateX(180deg);
 -ms-transform: rotateX(180deg); }
    .vertical.flip-container:hover .back {
        transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
     -moz-transform: rotateX(0deg);
       -o-transform: rotateX(0deg);
-ms-transform: rotateX(0deg); }
    .vertical.flip-container:hover .front {
        transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
     -moz-transform: rotateX(180deg);
       -o-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);}

(10). Just click on save template and you are done. ''wow'' am sure you like what you are seen?

Alright and before i forget if you were not able to find this code ]]></b:skin> in step 9 don't worry just scroll down to Template, click on Customize scroll to Advanced, scroll down again to Add CSS you are there right? good just paste the above CSS CODE There. We are done for this.

I hope this post was able to help you add flip effect to your blog logo. If you still have questions or comment kindly use the comment box and i will do my possibly best to have them answered good luck.

Lets Talk About It! Join Me Please
EmoticonEmoticon