Animasyonlu Popüler Yazılar Eklentisi

Popüler Yazılar Eklentisi

Popüler yazılar eklentisi ne işe yarar? Popüler yazılar için kod gerekir mi? Çok okunan yazılar eklentisi nasıl eklenir?
  "Popüler yazılar", hem seo açısından hem de blog sayfanızı tamamlayacak en önemli eklentilerden biridir. Hemen çıkma oranını yani sitede geçirilen süreyi de olumlu yönde etkiler. Tüm zamanlar, aylık veya haftalık şekilde popüler olan yazıların listelenmesi her zaman faydanıza olacaktır. Ziyaretçileriniz ilgili olduğu yazınızı okumaya geldiğinde diğer kategorilerdeki yazıları da görerek ziyaret edebilir. Blogger için hazır eklentiyi de kullanabilirsiniz ama vereceğim kodlar ile daha şık ve kullanışlı bir görünüme de sahip olabilirsiniz. Yapmanız gereken popüler yazıları eklemek ve aşağıda verdiğim kod ile animasyonlu hale getirmek olacak. Güzel bir tasarım ve kolay kurulum ile animasyonlu popüler yazılar için Tema - Html'yi Düzenle üzerinden Ctrl+F tuşlarını kullanarak ]]></b:skin> kodunu aratın ve hemen bir üst satırına aşağıdaki kodları yapıştırın ve kaydedin.

.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; }

  Yukarıdaki kodu ekledikten sonra Gadget ekle üzerinden popüler yazılar eklentisi ekleyin. Ayarlarını yaparken küçük resim seçeneğinin seçili olduğuna emin olun. Düzenlemeler bittiğinde mause eklenti üzerine geldiğinde yazılar sola doğru eğilecek ve görüntü netleşecek. Aynı şekilde mause yazı üzerindeyken daha soluk aynı alanda resime doğru kaydırıldığında daha net olacak.

✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵