How to Create Animated Header Banner for Blogger.com (Blogspot) using CSS3/HTML5

As requested by many, on how to create animated header or logo for blogger.com (blogspot), I've decided to write an article which provided detailed steps on how to create animated header banner for your blogger.com website / blog using CSS3 and HTML 5.



1. Firstly, click on Template from the menu and select Simple layout and Apply to Blog.

2. From blogger admin, click on Template > Edit HTML from the menu and search for the following code:

</b:section>

Until you've found the code that has class='header':

3. Add the following code after you've found the code above (Add after </b:section>) (Also, change the images link to your own images as highlighted in red below):

 <div class='off-canvas-wrap'>  
    <div class='desktop_head'>  
   <img class='animated_logo go' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu_YHA3InIHNE-ozeTyeZMHKxIw9OhtUUm-T79lEZtvErCmcnZTpmBcULivOj7QpcfMHNdLRSWWwMj1d4u5a0MzWaWsjPJQbMkp7FJ3wcKH-oPg3mlXpgusTi8U3ceDeujc851DJO_Ggb1/s1600/cupid.png'/>  
   <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyHQt_DPhQJVyCApjrsQ5dRDxvqI43EgguWJoNyXv7SfzwYouCVBKWwI8rvpIrjtEcCE0B2ySz54S75UFis5Sq5y50GMvzy7KiBWFG-G0Wy4a_LLH9skyU4jbXbCWqL7hanYZz5gjwboKU/s1600/bg-text.jpg'/></div>  
   <div class='mobile_head'></div>  
 </div>