Popular Post With Rotating Title On Hover

Tampilan Popular Post Lebih Menarik

Popular Post. Halo sobat, kali ini aku akan menyebarkan CSS untuk menciptakan tampilan Popular Post / Entri Popular lebih menarik dengan efek rotasi pada title atau judulnya.

Widget popular post memang cukup penting untuk ditampilkan pada blog, widget ini akan menampilkan postingan yang paling popular pada blog kita.

Sebelumnya aku juga sudah post wacana widhget popular post dengan 5 style yang tidak mengecewakan bagus.
Silahkan cek di link 5 Style Popular Post

Nah untuk popular post yang sekarang, aku menambahkan efek hover untuk merubah rotasi pada titlenya.
Sebagai contoh, silahkan klik di link berikut ini.

Result

Nah kalau gan tertarik dengan tampilan Popular Postnya Mari kita Langsung saja ke tutorialnya, silahkan ikuti langkah-langkah dibawah ini.

• Login ke Blogger.com

• Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> atau </style> 

• Lalu masukan CSS dibawah ini sempurna diatas isyarat ]]></b:skin> atau </style> 

 .sidebar .PopularPosts .item-content {font-family:Raleway;position: relative;float: left;max-height: 310px;width: 100%;text-align: center;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);font-size: 20px;margin: 0px auto;background: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("https://lh3.googleusercontent.com/-m8TxQMObg6c/U474EWu7Y9I/AAAAAAAAI2k/xkRGoIEC1iU/s1600/blur.jpg");overflow: hidden;background-size: cover;background-repeat: no-repeat;background-position: center center;} .sidebar .PopularPosts .item-content * {-webkit-transition: all 0.35s ease-in-out;transition: all 0.35s ease-in-out;} .item-content img {max-width: 100%;position: relative;top: 0;left: 0;} .item-content .item-title {position: absolute;top: 50%;left: 30px;right: 30px;line-height: 1.6em;-webkit-transform: rotate(0deg) translateY(-50%) scale(1);transform: rotate(0deg) translateY(-50%) scale(1);-webkit-transform-origin: center 0;transform-origin: center 0;} .item-content .item-title a {top: 50%;letter-spacing: -1px;color: #ffffff;text-transform: uppercase;padding: 10px 0;margin: 0;font-weight: 400;} .item-content .item-title a:hover {color: #fff;} .item-content .item-title:before,.item-content .item-title:after {background-color: rgba(255, 255, 255, 0.8);width: 100%;height: 2px;position: absolute;content: "";display: block;-webkit-transition: all 0.35s ease-in-out;transition: all 0.35s ease-in-out;} .item-content .item-title:before {left: 0;top: 0;} .item-content .item-title:after {bottom: 0;right: 0;} .item-content:hover .item-title,.item-content.hover .item-title {-webkit-transform: rotate(-45deg) translateY(-50%) scale(0.9);transform: rotate(-29deg) translateY(-50%) scale(0.9);} .item-content:hover .item-title:before,.item-content.hover .item-title:before,.item-content:hover .item-title:after,.item-content.hover .item-title:after {width: 200%;} .sidebar .widget{clear:both} .sidebar .PopularPosts .item-snippet {display: none;} .sidebar .PopularPosts ul {padding: 0;} .sidebar .PopularPosts ul li:first-child {width: 100%;max-height: 100%;opacity: 0.9;} .sidebar .PopularPosts ul li:nth-child(even) {margin-right: 2%;} .sidebar .PopularPosts ul li:nth-child(2) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(3) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(4) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(5) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(6) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(7) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(8) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(9) .item-content {font-size: 12px} .sidebar .PopularPosts ul li:nth-child(10) .item-content {font-size: 12px} .sidebar .PopularPosts ul li {box-sizing: border-box;position: relative;padding: 0px !important;width: 49%;max-height: 120px;opacity: 0.4;overflow: hidden;float: left;margin-bottom: 2%;-webkit-transition: all 0.5s ease 0s;-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;-o-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;} .sidebar .PopularPosts ul li:hover {opacity: 1;} .sidebar .PopularPosts .item-thumbnail {margin: 0;width: 100%;} .sidebar .PopularPosts ul li img {box-sizing: border-box;width: 100%;height: 123px;object-fit: cover;padding: 0; } 

Kalau tampilannya error atau tidak rapih, coba hapus css popular post bawaan template agan.

• Save Template Dan Lihat Hasilnya

• Selanjutnya atur widget popular post kalian menjadi menyerupai gambar dibawah ini.

• Selesai deh :) . Kalo ada persoalan dalam penerapannya, silahkan tanyakan dikolom komentar ya.

Mampir juga kepostingan lainnya :)

• Mengatur Jarak Spasi Antar Text Dengan CSS
• Free Tool Untuk Merapihkan HTML Dan CSS Online
• Cara Alternatif Mengatasi Url Blog Yang Di Block Facebook [ Tidak Bisa Share Link ]
• Simple CSS Notification From Top
• Cek Responsive Blog Dengan Google Resizer

Cukup sekian dan terimakasih, agar artikel wacana Widget Popular Post. ini bermanfaat ya :)