Top Best Websites List. Free Classifieds. SEO, Blogging Tips

TopBestListed- Blogspot Blog for Best websites list for Free classifieds, Bookmarking,SEO, Directories,Blogging, content writing Money.Top sites 2015-16 USA India.

lundi 12 mai 2014

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.

responsive CSS timeline, customize blogger posts

How to Add Responsive CSS Timeline View to Blogger Posts

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

blogger template, edit html

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

blogger 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

Libellés : Blog Design, blogger posts, CSS, posts

publié par Anonyme @ 14:26   0 commentaires

0 commentaires:

Enregistrer un commentaire

Abonnement Publier les commentaires [Atom]

<< Accueil

Qui êtes-vous ?

Nom : Unknown

Afficher mon profil complet

Articles précédents

  • How to Enable Google Plus Comments in Blogger
  • Display Blogger Posts in Grid View with Thumbnails
  • How To Change The Comment Font Face And Color On B...
  • The Complete Blogger’s Guide to Hashtags
  • Embed Google Maps Get Directions Form To Your Blog
  • How to Add Numbered Page Navigation Widget for Blo...
  • How To Add Google Analytics To Blogger
  • SEO Back-Link Buliding Tips-Techniques for Blogger...
  • 5 Easy Ways to Improve the SEO of a blog & Boost T...
  • What is the difference between padding and margins?

Powered by Blogger

Abonnement
Articles [Atom]