Responsive CSS Timeline with 3D Effect for Blogger

Here's another amazing way to display our Blogger posts. By applying the following Responsive CSS Timeline View with 3D Effect on Blogger Posts, we will have a responsive timeline-like structure of the most recent posts and their thumbnails, along with some cool CSS effects. When clicking on the associated radio input, the posts snippet/summary will expand by changing their style and size and will rotate in 3D. The main structure of this CSS timeline with 3D effect is an unordered list.

To get an idea of what it looks like, you can visit this demo blog.

How to Add Responsive CSS Timeline View to Blogger Posts

Step 1. Go to Blogger dashboard > Template > click on the Edit HTML button:

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:

Step 3. Type or paste the following tag inside the search box and hit Enter to find it:

Step 4. Just above the tag, copy and paste the following style:

Step 5. Search for the SECOND instance of this code below (hit Enter two times):

Note: depending on the template you are using, you could find more lines like this one above. Therefore, if you don't see any changes after saving the template, try to replace the last one, as well.

Also, please note that if you are using the Read more function, you may need to remove it in order to make it work.

Step 6. After you found - replace it this code:

• 
  
  
  

  
  

Step 7. Finally, click on the Save template button to save the changes.

Now, we will need to make some small adjustments in order to make the posts date appear correctly:
Go to Layout and click on the Edit link just below the Blog posts area. When the pop-up window appears, check the date option and choose to display the date in the following order (date/month/year):

Note that you can also hide the posts date by unchecking this option.
Finally, click on the Save button and that's it! View your blog and enjoy this Responsive Timeline view with 3D Effect on Blogger posts. If you need more help, please leave a comment below.

Credit: tympanus.net