Daha Önce rastlamadığınız kesinlikle görmediğiniz bir eklentiyi boyutu sunuyoruz inşallah begenirsiniz ziyaretinde.
Numaralı Liste Nasıl Oluşturulur eklentisinin Özelliği hover efekti ile oluşturulan maddelerin Üzerine gelindiğinde resimde de gördüğünüz gibi ok işareti belirir de değiştiğini göreceksiniz renkinin ok işareti beliren Maddenin arka planı ettik.
Numaralı Liste Nasıl Oluşturulur? Sitemize nasıl ekleyebiliriz Blog?
* Kumanda Paneli> Şablon> HTML'yi düzenle sıralamasını takip ediyoruz.
* CTRL + F kısa yol tuşları ile altta ki kodu aratıyoruz.
1..
]]></b:skin>
2.
<style></style>kodları içine alıp <head> ile </head> arasına ekleyebilirsiniz.CSS KODLARI:
/* BC61/KOM Kodlarla Mücadele Numaralı Liste
----------------------------------------------*/
ol {counter-reset:li;list-style: none;font:15px 'Roboto Condensed', 'Oswald';
padding:0;margin-bottom:4em;text-shadow: 0 1px 0 rgba(255,255,255,.5);}
ol ol {margin: 0 0 0 2em;}
.post ol li{position:relative;display:block;padding:.4em .4em .4em .8em;
margin:.5em 0 .5em 2.5em;background:#F0F0F0;color:#666;text-decoration:none;
transition:all .3s ease-out;}
.post ol li:hover{background:#E6E6E6;}
.post ol li:before{content:counter(li);counter-increment:li;position:absolute;
left:-2.5em;top:50%;margin-top:-1em;background:#7F8C8D;color:#fff;height:2em;width:2em;
line-height:2em;text-align:center;font-weight:bold;}
.post ol li:after{position:absolute; content:'';border: .5em solid transparent;
left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
.post ol li:hover:after{left:-.5em;border-left-color:#7F8C8D;}
.post ol li span{position:relative;display:block;padding:5px 8px;margin-bottom:10px;background:#fafafa;color:#666;text-decoration:none;transition:all .3s ease-out;}
.post ol li span:hover{background:#f9f9f9;}
Kullanımı konusunda bilgi vereyim;
- Oluştur kısmından makalenizi yazarken maddeler halinde olusturmak istediğiniz başlıkları alt alta yazıyorsunuz.
- Daha sonra altta ki resimde yeşil 2 numaralı işaretli kısımdan numaralı liste seçeneğine tıklıyoruz.
 |
Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin
Not: Gelen Maili Aktif Etmeyi Unutmayınız!
Hiç yorum yok:
Yorum Gönder