Sidebar'a bunu nasıl yapabilirim?

Merhaba Arkadaşlar,

Örnekte kırmızı çerçeve içerisine alarak göstermeye çalıştım. http://prntscr.com/mf3xvl bu görünümde ve işlevde sidebar'a bileşenlerden alan yapmak istiyorum. Benzer veya aynısını yapabileceğim bir eklenti var mı ? Yardımcı olursanız sevinirim.

Hocam şunlara göz atmanızı tavsiye ederim işinize yarar mı tam olarak bilmiyorum ama
baknz
baknz

Bunu eklenti olmadan custom sidebar ile yapabilirsiniz. Esktra eklemeniz gereken şey ise php kodları ile sayı arttırmak. Şuan müsait değilim ilgili bir arkadaş kodları paylaşıcaktır.

Hocam manuel olarak Css dosyasına eklemelerle nasıl yapabilirim müsait olduğunuz da belirtseniz sevinirim. Sayı sırası olmasada olur.

PHP ile işlem yapmanıza gerek yok. Sizin için bir örnek yaptım.

https://jsfiddle.net/g7kcjz4a/

PHP ile sayı arttırmak yerine bu yöntemi kullanmak çok daha mantıklı olur. Bu yöntem için CSS counter olayını araştırabilirsiniz.

https://developer.mozilla.org/en-US/...g_CSS_counters

hocam Allah razı olsun, yanlız kodları css dosyasına eklediğim de
body
counter-reset: section

satırında hata almaktayım kırmızı X ile gösteriyor.

Çünkü kodları SASS ile yazdım. SASS to CSS converter kullanarak kodları çevirebilirsiniz.

Buyrun CSS kodları:

body {
  counter-reset: section;
}

.sidebar-posts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebar-posts .post {
  background: #f2f2f2;
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
  padding-left: 40px;
}

.sidebar-posts .post:before {
  counter-increment: section;
  content: counter(section);
  position: absolute;
  top: 50%;
  left: 10px;
  font-size: 40px;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  color: #666;
}

.sidebar-posts .post .post-title {
  margin: 0 0 10px;
}

.sidebar-posts .post .post-title a {
  text-decoration: none;
  color: #222;
}
/*# sourceMappingURL=stil.css.map */

Şuan da oldu çok çok teşekkür ederim. Birebir çalıştı.