Skip to main content

Responsive CSS Timeline with 3D Effect for Blogger

Introducing an impressive method to showcase Blogger posts! With the application of a Responsive CSS Timeline View featuring a captivating 3D effect, we can create a dynamic timeline-like structure for displaying the latest posts and their thumbnails. This technique incorporates stylish CSS effects to enhance the visual appeal. By clicking on the corresponding radio input, the post snippets/summaries expand, undergoing a change in style, size, and a captivating 3D rotation effect. The core structure of this timeline is implemented using an unordered list.


To see a demonstration of this feature, please visit the following demo blog.


responsive CSS timeline, customize blogger posts
Demo

How to Add Responsive CSS Timeline View to Blogger Posts

Step 1. Go to the Blogger dashboard and navigate to the Template section. Then, click on the "Edit HTML" button:

blogger template, edit html

Step 2. Within the code area, click anywhere and use the keyboard shortcut CTRL + F to open the search box:

blogger search box

Step 3. Type or paste the following tag in the search box and hit Enter to locate it: "
</head>
Step 4. Just above the </head> tag, copy and paste the following style:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {padding: 0px; border: 0px;}
.post-footer {display: none;}
.post {margin-bottom: 50px; padding-bottom: 0px; background: none; border: none;}
.jump-link a {display: none;}
  h3.post-title a {display: none;}
 .date-header {display: none;}
*,
.timeline:after,
.timeline:before {box-sizing: border-box;padding: 0; margin: 0;}
.timeline {position: relative;padding: 30px 0 50px 0;font-family: Arial, sans-serif;}
.timeline:before {content: &#39;&#39;;position: absolute;width: 5px;height: 100%;margin:0px;top: 0;left: 200px;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJUlEQVQIW2NkQAP/gYARWQwkAOLDBeECjEAAkkEWAKtEFwAJAgAZEBP+oM1IkwAAAABJRU5ErkJggg==);}
.event {position: relative;margin-bottom: 80px;padding-right: 40px;}
.thumb {position: absolute; width: 90px; height: 90px;box-shadow:
        0 0 0 8px rgba(65,131,142,1),
        0 1px 1px rgba(255,255,255,0.5);background-repeat: no-repeat;border-radius: 50%;-webkit-transform: scale(0.8) translateX(24px);-moz-transform: scale(0.8) translateX(24px);-o-transform: scale(0.8) translateX(24px);-ms-transform: scale(0.8) translateX(24px);transform: scale(0.8) translateX(24px);}
.thumb:before {content: &#39;&#39;;background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPElEQVQYV2NkQAP/gYARCNDFUQRgirAphitEl0TngxXisg5ZnBGXIpgbYfIYjkb3BNxGbBLYxIgyEaQRAA8KKAWYsZtjAAAAAElFTkSuQmCC);position: absolute;height: 8px; z-index: -1; width: 50px;top: 42px; left: 100%;margin-left: 8px;
}
.thumb span {color: #41838e;width: 100%;text-align: center;font-weight: 700;font-size: 15px;text-transform: uppercase;position: absolute;bottom: -30px;}
.event label,.event input[type=&quot;radio&quot;] {width: 24px;height: 24px;left: 158px;top: 36px;position: absolute;display: block;}
.event input[type=&quot;radio&quot;] {opacity: 0;z-index: 10;cursor: pointer;}
.event label:after{content: &quot;\2713&quot;;background: #41838E;border-radius: 50%;color: #fff;font-size: 20px;height: 100%;width: 100%;font-weight: bold;left: -2px;top: -3px;line-height: 24px;position: absolute;text-align: center;}
.content-perspective { margin-left: 230px;position: relative;perspective: 600px;-webkit-perspective: 600px;-moz-perspective: 600px;-o-perspective: 600px;-ms-perspective: 600px;}
.content-perspective:before { content: &#39;&#39;; width: 34px; left: -44px; top: 48px;position: absolute;height: 1px; z-index: -2;background: #fff;}
.content {transform: rotateY(10deg);transform-origin: 0 0;transform-style: preserve-3d;}
.blog-post-body {position: relative;padding: 20px;color: #333; border-left: 5px solid #41838e;box-shadow: 0 4px 6px rgba(0,0,0,0.1);background: #fff;}
.blog-post-body h3 {border: none;margin: 0px;}
.blog-post-body h3 a{font-size: 21px;padding: 5px 0 5px 0;color: #41838e;margin: 0px;text-decoration: none;border: none;}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body h3 a{color: #F26328;}
.blog-post-body p,.thumb span,.event label {-webkit-backface-visibility: hidden;}
.blog-post-body p {font-size: 15px;max-height: 0px; overflow: hidden; color: rgba(0,0,0,0);text-align: left;}
.blog-post-body:before {content: &#39;\25c2&#39;;font-weight: normal; line-height: 86px; font-size: 86px;position: absolute;color: #41838e; left: -41px;width: 100%;height: 100%; top: 3px;z-index: -1;}
.thumb,.thumb span,.blog-post-body h3 {transition: all 0.6s ease-in-out 0.2s;-webkit-transition: all 0.6s ease-in-out 0.2s;-moz-transition: all 0.6s ease-in-out 0.2s;-o-transition: all 0.6s ease-in-out 0.2s;-ms-transition: all 0.6s ease-in-out 0.2s;transition: all 0.6s ease-in-out 0.2s;}
.blog-post-body { transition: box-shadow 0.8s linear 0.2s;-webkit-transition: box-shadow 0.8s linear 0.2s;-moz-transition: box-shadow 0.8s linear 0.2s;-o-transition: box-shadow 0.8s linear  0.2s;-ms-transition: box-shadow 0.8s linear 0.2s;}
.content {transition: transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-webkit-transition: -webkit-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-moz-transition: -moz-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-o-transition: -o-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;-ms-transition: -ms-transform 0.8s cubic-bezier(.59,1.45,.69,.98) 0.2s;}
.blog-post-body p { transition: max-height 0.5s linear, color 0.3s linear;-webkit-transition: max-height 0.5s linear, color 0.3s linear;-moz-transition: max-height 0.5s linear, color 0.3s linear;-o-transition: max-height 0.5s linear, color 0.3s linear;-ms-transition: max-height 0.5s linear, color 0.3s linear;}
.event input[type=&quot;radio&quot;]:checked + label:after {content: &#39;\2714&#39;;color: #fff;background: #F26328;box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.8);}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective:before {background: #F26328;}
 .event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body h3 { color: #F26328;}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .content {transform: rotateY(-5deg);-webkit-transform: rotateY(-5deg);-moz-transform: rotateY(-5deg);-o-transform: rotateY(-5deg);-ms-transform: rotateY(-5deg);}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body {border-color: #F26328;box-shadow: 10px 0px 10px -6px rgba(0, 0, 0, 0.1);}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body p {max-height: 460px; color: rgba(0,0,0,0.6); transition-delay: 0s, 0.6s;-webkit-transition-delay: 0s, 0.6s;-moz-transition-delay: 0s, 0.6s;-o-transition-delay: 0s, 0.6s;-ms-transition-delay: 0s, 0.6s;}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body:before {color: #F26328;}
.event input[type=&quot;radio&quot;]:checked ~ .thumb {transform: scale(1);box-shadow: 0 0 0 8px rgba(242,99,40,1), 0 1px 1px rgba(255,255,255,0.5); -webkit-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);-ms-transform: scale(1);}
.event input[type=&quot;radio&quot;]:checked ~ .thumb span {color: #F26328;}
.event input[type=&quot;radio&quot;]:checked ~ .thumb:before {
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAOfUjX+882+wYgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQBbNyaHFmzEqgAAAABJRU5ErkJggg==);}
@media screen and (max-width: 850px) {.blog-post-body h3 {font-size: 20px;}
 .blog-post-body p { font-size: 14px; text-align: justify; }
 .event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body p { max-height: 500px; }}
@media screen and (max-width: 540px) {.timeline:before { left: 50px;}
.event {padding-right: 0px; margin-bottom: 100px; }
 .thumb { transform: scale(0.8); -webkit-transform: scale(0.8);-moz-transform: scale(0.8);-o-transform: scale(0.8);-ms-transform: scale(0.8);}
 .event input[type=&quot;radio&quot;] { width: 100px;height: 100px;left: 0px;top: 0px; }
.thumb:before,.event input[type=&quot;radio&quot;]:checked ~ .thumb:before {background: none;width: 0;}
 .event label {display: none;}
 .content-perspective {margin-left: 0px;top: 80px;}
 .content-perspective:before {height: 0px; }
 .content { transform: rotateX(-10deg);-webkit-transform: rotateX(-10deg);-moz-transform: rotateX(-10deg);-o-transform: rotateX(-10deg);-ms-transform: rotateX(-10deg);}
 .event input[type=&quot;radio&quot;]:checked ~ .content-perspective .content { transform: rotateX(10deg);-webkit-transform: rotateX(10deg);-moz-transform: rotateX(10deg);-o-transform: rotateX(10deg);-ms-transform: rotateX(10deg);}
.blog-post-body {border-left: none;border-top: 5px solid #41838e;}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body {border-color: #F26328;box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.1);}
.blog-post-body:before {content: &#39;\25b4&#39;;left: 33px; top: -32px;}
.event input[type=&quot;radio&quot;]:checked ~ .content-perspective .blog-post-body p {max-height:300px; }}
ul.timeline {list-style-type: none;}
</style>
</b:if>
</b:if>

Step 5. Search for the SECOND instance of this code below (hit Enter two times):
<data:post.body/>

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 <data:post.body/> - replace it this code:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<ul class='timeline'><li class='event'><input checked='checked' name='tl-group' type='radio'/><label/>
<b:if cond='data:post.thumbnailUrl'><img class='thumb' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></b:if><div class='thumb'><b:if cond='data:post.dateHeader'><span><data:post.dateHeader/></span></b:if></div>
<div class='content-perspective'><div class='content'><div class='blog-post-body'><h3><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><b:if cond='data:blog.url != data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if><b:else/><data:post.title/></b:if></b:if></h3><p><b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'><data:post.snippet/></b:if></b:if></p></div></div></div></li></ul></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
Step 7: To finalize the changes, simply click on the "Save template" button.

ow, we need to make some minor adjustments to ensure that the post dates are displayed correctly:

Go to the "Layout" section and locate the "Edit" link just below the "Blog posts" area.
A pop-up window will appear. Check the "date" option and select the desired date format (date/month/year) for display.
Please note that if you prefer to hide the post dates, you can simply uncheck this option.
Once you've made your selection, click on the "Save" button, and you're all set! Now you can view your blog and enjoy the fantastic Responsive Timeline view with the captivating 3D effect on your Blogger posts. If you require further assistance, please feel free to leave a comment below.

Responsive CSS Timeline with 3D Effect for Blogger

Please note that if you prefer to hide the post dates, you can simply uncheck this option.
Once you've made your selection, click on the "Save" button, and you're all set! Now you can view your blog and enjoy the fantastic Responsive Timeline view with the captivating 3D effect on your Blogger posts. If you require further assistance, please feel free to leave a comment below.


Comments

Popular posts from this blog

SEO Traffic v2.0.20041213

DOWNLOAD SEO Traffic v2.0.20041213 simplifies the process of generating search-optimized web pages by automatically creating a large number of them using premium keywords from Overture, Google, and Espotting. Instead of spending countless hours meticulously crafting keyword-optimized pages, why not let SEOT do it for you, completely free of charge? This tool offers the perfect balance of flexibility for professionals and simplicity for beginners. Say goodbye to manual labor and let SEOT Traffic handle your page creation effortlessly.

Understanding Online Work From Home Businesses

Millions of people are searching the internet daily to try and find the right opportunity to start a business at home making money online . Don't believe me?; just go to your favorite search engine and search for phrases like ' work from home ', ' work at home ', ' online businesses ' and things about working from home . You will see thousands of website choices in the results. If using Google.com you will see on the right panel lists of websites under the heading 'Sponsored Links'. Sponsored links are paid for on google by using a tool or website at www.adwords.com . Many marketers are paying a lot of money to advertise this way and rookies need to be careful as the costs can get out of hand. Sponsored links are a good indication of what the competition is doing and also of the viability of the product. The most popular method of making money online is through affiliate marketing. What this means is that you can become an a

What are the revenue sources?

There are two basic sources of income your website will have: Affiliate Marketing and Google Adsense. How you will get paid and from who? Income from Affiliate Marketing Companies that offer affiliate programs pay those who promote them in two ways. In the first case, upon the sale which comes from your affiliate link, your  commission automatically goes to your paypal account.  For example, if through the affiliate link one buys a book priced 20 USD and the commission is set at 25%, then, at the time of sale, you recieve in your Paypal account USD 5 and the remaining 15 goes to the owner's Paypal account . In the second case,  the payments are made after a short time . For example, the company "Commision Junction" manages the affiliate programs of thousands of companies. Among them are : TOSHIBA, HP, YAHOO, LEXMARK, DELL … So when someone promotes products of these companies and qualifies a commission, then periodically, o nce or twice a month , the company &q

Search Marketing Tips For Yandex, Russia’s Top Search Engine

Globally, Russia is the eighth largest market of Internet users, and as we know, Google is playing second fiddle to Yandex , which is currently the main search engine in Russia with well over half of the market share. Yandex makes hundreds of millions of dollars in revenue and provides a broad range of online services (email, free hosting, PPC advertising network (Yandex Direct), maps, news, weather, and dictionaries). Comscore ranked the web property first in Russia with 34.9 million unique visitors in August 2010 , It is also the 25th site in the Alexa Top 100. What’s more, Yandex is the default search provider in the Russian version of Firefox. Russian Language In Connection With SEO If your company is turning eyes to the Russian market, you might be considering  making a Russian-language version of your website to attract more local customers. You could have built your SEO strategy based on your experience in the English-speaking Internet, but if you’re building

GOMO: Create a Professional Mobile Site to your Blog & Website for Free

Some report says By 2013 more people will use their mobile phones than PCs to get online. 80% of mobile internet users abandon a site if they have a bad user experience. Mobile sites are designed for the small screen, with the needs of mobile users in mind. A mobile-friendly site can help your blog growth and connect with customers and increase sales. But a bad mobile experience can drive your customers to your competition. GOMO (Google Mobile)  partner with Duda mobile providing online tool to make your desktop website more mobile friendly with professional templates and free hosting. Duda mobile premium service free for one year(value $108) with unlimited email and phone support. How to: Step 1: Go to GOMO site through this link  www.howtogomo.com .  Then Enter your site URL in the specific column like below image. Then hit MAKE MY SITE MOBILE button.  Step 2: It redirects theme window, s elect your site theme from their. You can f

WORK AT HOME & MAKE EASY MONEY

Assuming that you've worked at an office five days (or more) for every week for more drawn out than a few years, its likely you fantasize about telecommuting. Perhaps you recently do telecommute infrequently, however are finding it hard to stay centered. I'm here to separate it into the most significant fundamentals for kicking off effectively. As a full-time independent author who recently passed her two-year commemoration, I've absolutely had my ups and downs regarding the matter of renouncing office (however not dependably weekend) warrior status. Gain experience from my accidents, go onward and flourish! Who, Who, Who Are You? Telecommuting isn't for every living soul. I don't say this to sound unrivaled or selective, daiquiri ice enhanced dessert isn't for everybody either. Whether its set to truly work for you is all about how you like to use your day, and your capacity to autonomously supervise your time. You may as well inquire as to whether you sup

5 Money Making, Recession Resistant Home Businesses

Ideas for Starting a Successful Business in a Down Economy In a recession, or in other times when the economy is lagging and jobs are being lost, most people consider it to be a very poor time to start thinking about starting a home business. However, tough economic times can also present great money making opportunities to those who prepare and are willing to take a chance on being successful. Starting a home business in the midst of a recession may seem scary, but not having a backup plan in case you should suddenly lose your job can be even more scary. Here are 5 relatively recession resistant, money making home business ideas to consider. 1. Internet Marketing Services Internet marketing services are in high demand in an industry that is growing by leaps and bounds. Anyone who has an online business presence needs to know how best to effectively market their website on the Internet and most will consult an Internet marketing firm for assistance. That&#

Adding a Neat CSS3 Dropdown Menu in Blogger

Presenting a remarkable dropdown menu with pure CSS3, originally created by Andrew from script-tutorials.com. I have made slight modifications to ensure its seamless integration into our Blogger template. Located in the upper right corner of this menu are the contact links and social media icons for Facebook, Twitter, Google Plus, and RSS feed. Directly below these links, you'll find the dropdown navigation menu, while the search form resides on the left side. To enhance the user interface and interaction, the CSS dropdown menu incorporates subcategories with elegant CSS3 effects such as box-shadow, text-shadow, and a smooth transition triggered by hovering over the parent link. Please visit this demo page to see it in action. Adding the CSS dropdown navigation menu in Blogger Step 1. Access your Blogger Dashboard and go to 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. Type the tag be

STRATEGIES TO INCREASE WEB TRAFFIC

Site improvement ( SEO ) system and best practices change always as web crawlers like Google press on to take off new calculation overhauls, for example Panda and Penguin. The effect is that marks and advertisers can no more extended take alternate ways. It's all about building trust and driving quality site activity that will effect the end result. This originates from enhancing navigate rates for natural list items, which is the place the underutilized capacity of rich pieces becomes an integral factor. A rich scrap is basically only a minor outline of the information that a client can hope to see on a web site page. Rich pieces have no immediate impact on enhancing rankings, however they add huge worth to a natural posting in the web search tool results and can incredibly expand site activity. They can come in the manifestation of Google creator qualified data, appraisals and surveys, occasion notices and items. Rich pieces enhance navigate rates breathtakingly by en

10 Important Tips To Increase Fans On Your Facebook Page

The first direct marketing tool that one can think of today is Facebook. It’s gone from being just another social network, to being ‘The social network’. No just that, it’s now great medium for business. Simply speaking, this is because facebook is where people are. And if they are there, why not get them to notice who you are and what you do? These virtual profiles belong to real people, with real needs. So, here’s some quick ways to increase the number of fans on your business page: 1. Cater To Your Target Group The first rule is to know and target the people who could be interested in your products or services. So, everything you do should be for the people who will actually be your clients. 2. Start Activities Once you have your TG in mind and you obviously know all the plusses of your products, so start activities promoting the same. You need to start interacting or creating activities that people enjoy and like to participate in. A way to encourage part