How To Add Flipping Effect To Logo / Header In Blogger

Do you have a logo? I am sure you will have a logo because every blogger has his own logo now a days. If you don't have a logo yet you can create one by reading a post about creating and adding logo here. After creating and adding logo to blog another thing comes that is how to add cool effects to your logo? Some people do that by making a cool logo(shape and colors) as you can see my logo(it has cool shape and decent color) but it is not limited to just shape and color, a logo / image can be made cool by adding cool effects to it such as zoom on mouse hover, rotate on mouse hover or flip on mouse hover. You can do it by using css(cascading style sheet).

This post is about making your blog logo cool by adding flipping effect to it. Its very easy to make your blog logo flip on mouse hover, you just need to follow below steps.

How it works? 

With css many cool effects can be created in images among which most popular are auto-zoom effect, fade-out effect on mouse hover, rotating effect etc. Flipping an image is also done by css, to create this effect a css code is added in blog along with some more changes and the logo/header image starts to flip on hover.  

How to add flipping effect to logo in blogger:

To create flipping effect in your header image you have to add css code in your blog template along with some more changes, so follow below steps its very easy and safe but 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.

(1).  Go to 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:

<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). Now 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'/> 

Note: Sometime you can't find the above code by using the template's search box so 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). 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvSjroI6VPFTVyh-Uvfg01k8Q09PXONgS6nLUqQryk2WLddJkr63AHkGdDc1i999GDG3K4cVGE9wHwaQH-7p0gUJlsD9rlbMr7JKD2eKE5LunRexnVCRsyPTAsbzRTTcFAUmLWiUzNxIw/s760/101Helper+logo.png' style='display: block'/>
        </div>
    </div>
</div>

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

(7). Now 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>

Almost everything is done the last thing left is to add 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). Click on save template and you are done.

If you can't find ]]></b:skin> in step 9 then go to template, click on customize and on the customization page click on Advanced, scroll down to Add css and paste the above css code here.

Hope you like this post and its working in your blog. If you have any problem related to this post ask me in comments or contact me. If you like this post share it with others. Sign-up by Email to get instant news about blogger tricks or follow 101Helper on Facebook, twitter or Google+ to stay in touch. I would like to know your experience about this post or if you have any suggestions then leave a comment below.

Search tags: cool effects for blogger, cool image effects in blogger, blogger tricks, how to make cool logo for blog, cool logo for blog, flipping effect in header, flipping header effects for blogger, how to create flip on hover effect in blog header image, 101Helper blogger tricks.  

Tweet