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!
Admin kardeş şimdi biz css kodunu b skinin üzerine mi kopyalıyacağız yoksa style ve headin üzerine de kopyalıyacakmıyız
YanıtlaSil]]> kodunun hemen üst kısmına
SilNasıl çalışmadı bir yerde hata yapmışsındır?
YanıtlaSilhata yapmadı admin verdiğiniz kod türkçe çevirmeli olmuş bloga yapıştırırken çevirmiş kendisi hiç html kod türkçe olurmu bir an önce füzeltmenizi rica ediyorum bu yazı çünkü başka yerde yok
YanıtlaSilHe tamam ya pardon kullandığım önce ki temada bir sorun vardı bütün kodlarda bozulmalara neden oldu şimdi konuyu düzeltip size haber veririm uyarınız için teşekkürler.
YanıtlaSilKonu güncellenmiştir ve konu ile ilgili video eklenti...
YanıtlaSilİşte şimdi oldu yabancı sitelerdeki hoşuma gitmemişti kusursuz ve güzel ilgilendiğin için teşekkürler
SilBu arada sitedeki kategorileri türkçeleştirme yapmayacakmısın ve bazı yerleri türkçeleştirmeyecekmisin
Sil