How to add Spinning effect on Logo and Title

Logo for a website or blog usually is a for branding purposes. It can give visitor/s the idea of what kind of website you have. Having fancy logo would also attract visitors to your site. Now for this tutorial, We will be showing you how to add spinning effect on your logo when mouse over.

This is such an amazing tricks since you are giving your logo an amazing effect that even your visitors can play around.

Let's start with the tutorial.

Demo: Mouse over VBT logo or see GIF below




Follow the steps below:

Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard

Step #2: Click ->Template -> Edit HTML

Step #3: Find ]]></b:skin> by Pressing CTRL + F (Windows) or CMD + F (MAC)

Step #4: Now paste the below code above/before ]]></b:skin>

#header-inner{
 -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
#header-inner:hover{
-moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

Step #5: Now hit Save Template

Now head over to your blog site, mouse over to your logo and see that your logo is spinning.

That's all for this tutorials. To all visitors thank you for dropping by at vbt blog.

Happy Blogging!

Similiar tagsBloggerBlogging TipsTutorials