Responsive CSS Timeline dengan Efek 3D untuk Blogger

Berikut cara lain yang menakjubkan untuk menampilkan postingan Blogger kalian. Dengan menerapkan Responsif CSS Timeline View dengan Efek 3D di Blogger Posts, kita akan memiliki struktur timeline css responsif dari tulisan paling baru dan thumbnailnya, dan dengan beberapa efek CSS keren. Ketika mengklik masukan radio terkait, tulisan snippet/summary akan memperluas dengan mengubah gaya dan ukuran mereka dan akan memutar dalam bentuk 3D. Struktur utama dari timeline CSS ini dengan efek 3D adalah daftar unordered.

Untuk Lebih Jelas Lihat demonya, lebih-kurang seperti itu tampilannya

Demo

Bagaimana Tambahkan Responsif CSS Timeline View untuk Blogger Posts

Langkah 1. Pergi ke Blogger dashboard > Template > klik pada Edit HTML tombol:

Langkah 2. Klik di mana saja di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian:

Langkah 3. Ketik atau paste tag berikut di dalam kotak pencarian dan tekan Enter untuk mencarinya:

</head>

Langkah 4. Tepat di atas tag </ head>, copy dan paste kode berikut:

<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 #87939E,        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: #87939E;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: #8995A1;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;}.post-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 #8995A1;box-shadow: 0 4px 6px rgba(0,0,0,0.1);background: #F9F9F9;}.blog-post-body h3 {border: none;margin: 0px;}.blog-post-body h3 a{font-size: 21px;padding: 5px 0 5px 0;color: #86919D;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: #8995A1; 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;}.post-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 .post-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; } .post-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 .post-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 #8995A1;}.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>

Langkah 5. Cari kode yang KEDUA dari kode di bawah ini (tekan Enter dua kali):

<data:post.body/>

Catatan: tergantung pada template yang Anda gunakan, Anda bisa menemukan lebih baris seperti ini di atas. Oleh karena itu, jika Anda tidak melihat perubahan setelah menyimpan template, coba ganti yang terakhir, juga.

Juga, perlu diketahui bahwa jika Anda menggunakan fungsi Read More, Anda mungkin perlu menghapus itu dalam rangka untuk membuatnya bekerja.

Langkah 6. Setelah Anda menemukan <data: post.body /> yang kedua - ganti kode ini dengan:

<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='post-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>

Langkah 7. Akhirnya, klik pada Simpan Template. Tombol untuk menyimpan perubahan Sekarang, kita perlu membuat beberapa penyesuaian kecil untuk membuat posting tanggal ditampilkan dengan benar: 

Pergi ke Tata Letak dan klik pada Sunting tepat di bawah kotak tulisan Blog. Ketika jendela pop-up muncul, centang pilihan tanggal dan memilih untuk menampilkan tanggal dengan urutan sebagai berikut (tanggal / bulan / tahun):

Anda juga dapat menyembunyikan tanggal posting centang pilihan ini.

Akhirnya, klik pada Simpan dan hanya itu! Lihat blog Anda dan menikmati ini tampilan Timeline Responsif dengan Efek 3D di Blogger posting. Jika Anda membutuhkan bantuan lebih lanjut, silakan tinggalkan komentar di bawah ini.